更新日: 2010 年 7 月 16 日

Visual Basic の内容はこちらに掲載しています。10 行でズバリ!! [VB] Silverlight アプリケーションの開発
WPF の内容はこちらに掲載しています。10 行でズバリ!! [C#] デスクトップ アプリケーションの作成 (WPF アプリケーション)

このコンテンツのポイント

  • Silverlight アプリケーションの基本的な作成手順の理解

今回紹介するコード

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Effects;

namespace MySilverlightApp
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
		}
		private void button1_Click(object sender, RoutedEventArgs e)
		{
			// テキスト ボックスに現在日時を表示
			this.textbox1.Text = DateTime.Now.ToString();
		}
		private void slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
		{
			// テキストボックスに影をつける
			var shadow = new DropShadowEffect();
			shadow.ShadowDepth = slider1.Value;
			this.textbox1.Effect = shadow;
		}
	}
}
 

目次

  1. はじめに
  2. Silverlight アプリケーションの開発準備
  3. ユーザー インターフェイスのデザイン
  4. イベント ハンドラーの記述
  5. Silverlight アプリケーションの実行
  6. おわりに

1. はじめに

Silverlight はブラウザーのプラグインとして動作するランタイムで、ブラウザー内で Web アプリケーションを実行できるほか、ブラウザー外実行と呼ばれる機能を利用して、デスクトップ アプリケーションのようなシナリオにも対応できます。Silverlight アプリケーションは、.xap (ザップと読みます) という拡張子のファイルで、その実体は、アプリケーション マニフェスト (AppManifest.xaml) と実行形式 (DLL) を圧縮して格納した ZIP 形式のファイルです。

ここでは、Visual Studio 2008 SP1 と Visual Studio 2008 用のSilverlight 3 Tools を用いて、Silverlight アプリケーションを開発する基本的な手順を紹介します。基本的な開発手順は、Visual Studio 2010 でも同様です。

Note : Visual Studio 2008 では、Visual Studio 2008 用 Silverlight 3 Tools をインストールする必要があります。Silverlight 4 用のアプリケーションを開発する場合は、Visual Studio 2010 と Visual Studio 2010 用の Silverlight 4 Tools が必要です。

ページのトップへ


2. Silverlight アプリケーションの開発準備

Visual Studio を起動して、[ファイル] メニューの [新規作成] から [プロジェクト] をクリックし、[新しいプロジェクト] ダイアログを開きます。そして、[プロジェクトの種類] で [Silverlight] を、[テンプレート] では [Silverlight アプリケーション] を選びます。[プロジェクト名] は任意の名前を指定できます。ここでは、「MySilverlightApp」としています。

図 1 [新しいプロジェクト] ダイアログで Silverlight アプリケーションのプロジェクトを新規作成

[OK] をクリックすると、[新しい Silverlight アプリケーション] ダイアログが表示され、これから作成する Silverlight アプリケーションが埋め込まれた Web ページを持つ Web サイトを作成するかどうかが確認されます。

ここでは、[Silverlight アプリケーションを新しい Web サイトでホストする] のチェック、[新しい Web プロジェクト名] の「MySilverlightApp.Web」、[新しい Web プロジェクトの種類] は「ASP.NET Web アプリケーション プロジェクト」を変更しないでおきます。これで、Silverlight を配置する Web ページをカスタマイズしたり、Web プロジェクトのオプションを保存しやすくなります。チェックボックスのチェックを外した場合は、Silverlight アプリケーションを実行しようとするたびに、仮の Web サイトが自動生成されます。

図 2 [新しい Silverlight アプリケーション] ダイアログ

[OK] ボタンをクリックすると、MySilverlightApp ソリューションが作成され、Silverlight アプリケーションのための MySilverlightApp プロジェクトと、この Silverlight アプリケーションをホストする MySilverlightApp.Web プロジェクトが作成されます。

MainPage.xaml は、Silverlight のユーザー インターフェイスを定義しているファイルで、XAML (eXtensible Application Markup Language) という XML ベースとしたマークアップ言語で記述されています。

図 3 プロジェクト作成直後の Visual Studio 2008

ページのトップへ


3. ユーザー インターフェイスのデザイン

ここでは、次のような画面の Silverlight アプリケーションを作成します。画面には、テキストボックス、ボタン、スライダーの 3 つのコントロールを配置しています。

図 4 今回作成するサンプル アプリケーションの画面

MainPage.xaml を開き、TextBox、Button、Slider コントロールを配置するための記述を追加します。XAML では、次のように書きます。<Grid x:Name="LayoutRoot"> ~ </Grid> の部分を置き換えてください。

C#
<Grid x:Name="LayoutRoot">
    <Grid Margin="20,20,20,0" Height="120" VerticalAlignment="Top"
          Background="AliceBlue">
        <TextBox x:Name="textbox1" Margin="20,20,20,0" VerticalAlignment="Top" />
        <Button x:Name="button1" Margin="20,60,20,20" Width="100"
                HorizontalAlignment="Right" Content="Click!" />
    </Grid>
    <Slider x:Name="slider1" Margin="10,0,10,10" VerticalAlignment="Bottom" />
</Grid>
 

コードを記述する際に、左側のツールボックスからコントロールを選び、エディターにドラッグ & ドロップすると、対応する XAML の要素が自動的に追加されます (図 5)。

図 5 ツールボックスからエディターに、コントロールをドラッグ & ドロップする

Note: この解説では、ユーザー インターフェイスを作成するための XAML を直接テキストで記述しています。Expression Blend やVisual Studio 2010 以降を使えば、ビジュアルを確認しながらデザインすることができます。

[デバッグ] メニューで [デバッグなしで実行] を選び、プログラムを実行すると、図 4 のような画面が表示されます。

ページのトップへ


4. イベント ハンドラーの記述

次にボタンのクリック時と、スライダーの移動時の挙動を C# で記述します。ボタンがクリックされたときにはテキストボックスに現在の日時を表示し、スライダーのつまみが動かされたときにはテキストボックスの影が強調されるようにします。

XAML 中のボタンの定義部分 (<Button ... />) の属性として、「Click=」と入力します。すると、「新しいイベント ハンドラー」というメニューが表示されますので、これを選びます。自動的に「button1_Click」というコードが追加されますので、この button1_Click をマウスで右クリックし、[イベント ハンドラーへ移動] メニューを選びます。これで自動生成されたイベント ハンドラーの定義部分が表示されます。

図 6 自動生成されたボタンのイベント ハンドラー

ここで、ボタンをクリックしたときの動作を定義できます。また、同じようにスライダー (slider1) に対しても「ValueChanged=」に続いて新しいイベント ハンドラーを追加すれば、スライダーのつまみを動かしたときの動作を定義できます。太字部分が追加するコードです。

using System.Windows.Media.Effects; // エフェクト用の名前空間を追加する

namespace MySilverlightApp
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            // テキスト ボックスに現在日時を表示
            this.textbox1.Text = DateTime.Now.ToString();
        }

        private void slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            // テキストボックスに影をつける
            var shadow = new DropShadowEffect();
            shadow.ShadowDepth = slider1.Value; // 影の幅
            this.textbox1.Effect = shadow;
        }
    }
}

スライダーのイベント ハンドラーで使用している DropShadowEffect は、コントロールに影をつけるエフェクト (効果) を与えるためのクラスです。このインスタンスを作成し、コントロールの Effect プロパティに割り当てることで、そのコントロールに影をつけることができます。

Silverlight では、影をつける以外にもコントロールをぼかす効果 (BlurEffect) や、ピクセル シェーダーを使った独自の効果を与えることができます。また、コントロールの拡大や縮小、回転といった描画変換もできます。こうした効果や変換は、ほとんどのコントロールで利用できます。

参考までに、最終的な XAML のコードも示しておきます。

C#
<UserControl x:Class="MySilverlightApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">
        <Grid Margin="20,20,20,0" Height="120" VerticalAlignment="Top"
              Background="AliceBlue">
            <TextBox x:Name="textbox1" Margin="20,20,20,0" VerticalAlignment="Top" />
            <Button x:Name="button1" Margin="20,60,20,20" Width="100"
                    HorizontalAlignment="Right" Content="Click!"
                    Click="button1_Click"/>
        </Grid>
        <Slider x:Name="slider1" Margin="10,0,10,10" VerticalAlignment="Bottom"
                ValueChanged="slider1_ValueChanged"/>
    </Grid>
</UserControl>
 

ページのトップへ


5. Silverlight アプリケーションの実行

[デバッグ] メニューで [デバッグなしで実行] を選び、プログラムを実行してみましょう。スライダーで影の幅を広げると図 7 のような画面になります。

図 7 日時を表示し、テキストボックスの影を広げた様子

ページのトップへ


6. おわりに

このように Silverlight アプリケーションは、コントロールを配置し、イベント ハンドラーを記述するという、Windows アプリケーションの場合と同じような手順で開発できます。

今回ご紹介した通り、Silverlight では、.NET Framework の WPF (Windows Presentation Foundation) と同じ XAML というマークアップ言語でユーザー インターフェイスを定義しており、また、C# や VB.NET のようなマネージコードでビジネス ロジックを記述しています。.NET の開発で培ったスキルやツールを活かして、ユーザー エクスペリエンスに優れた RIA (Rich Internet Application) の開発に取り組んでみて下さい。


Code Recipe Silverlight デベロッパー センター

ページのトップへ