今回作成するWebページの構成
では、さっそくWebページを作成してみましょう。今回のプログラムでは、グリッドを使ってコントロールを配置します。
各コントロールの動作は、まず2つのC1ColorPickerコントロールを使ってグラデーションの開始色と終了色を選べるようにします。
基本モードのC1ColorPickerコントロールでは、リストボックスから5つのカラーテーマのパレットを選べるようにします。
C1ColorPickerコントロールで選んだ色は、すぐに四角形の塗りつぶしグラデーションに反映するように、C1ColorPickerコントロールのSelectedColorChangedイベントハンドラに処理を組み込みます。
Silverlightプロジェクトの作成
まずは、Silverlightプロジェクトの作成からです。
- Visual Studio 2008 Silverlight Tools 3.0をインストールし、Visual Studioで新しいプロジェクト作成すると、「プロジェクトの種類」に[Silverlight]が追加されています。これを選択し、「テンプレート」から[Silverlightアプリケーション]を選びます。
- 「新しいSilverlightアプリケーション」というダイアログボックスが表示されるので、「新しいWebプロジェクトの種類」リストから[ASP.NET Webサイト]を選びます。
- プロジェクトが作成され、新しいWebサイトに「MainPage.xaml」が作られてXAMLのコードが表示されます。
![[Silverlightアプリケーション]を選ぶ](http://cz-cdn.shoeisha.jp/static/images/article/5471/5471_image9.gif)
![リストから[ASP.NET Webサイト]を選ぶ](http://cz-cdn.shoeisha.jp/static/images/article/5471/5471_image10.gif)
グリッドの作成
今回は、まず上下2段(1列2行)のグリッドを設定し、2行目を2列のグリッドに分割します。
グリッドに行を追加するには、RowDefinition要素を必要な行数分定義します。高さはHeightプロパティで指定します。また、列を設定するには、ColumnDefinitions要素を必要な列数分定義します。幅はWidthプロパティで指定します。
<Grid x:Name="LayoutRoot"> <!-- 最初に1列2行のグリッドを作成--> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <!-- 2行目のグリッドを2列に分割--> <Grid x:Name="PaletteLayout" Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> </Grid> </Grid>
![グリッドの設定(※「ShowGridLines="True"」にして枠線を見えるようにしている)](http://cz-cdn.shoeisha.jp/static/images/article/5471/5471_image11.gif)
タイトル文字と四角形の描画
1行目のグリッドにTextBlockとRectangleを作成し、タイトル文字と四角形を描画します。それぞれ、Effectプロパティを使ってドロップシャドウを設定します。
RectangleはFillプロパティで塗りつぶしますが、この時、線形グラデーションブラシ(LinearGradientBrush)を作成し、左上から右下にかけてグラデーションになるように設定します。XAMLを記述するのは、<Grid.RowDefinitions>
要素の下です。
<Grid x:Name="LayoutRoot" ShowGridLines="True"> <!-- 最初に1列2行のグリッドを作成--> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <!-- 1行目のグリッドにTextBlockとRectangleを作成--> <TextBlock Margin="5" Grid.Row="0" Text="四角形のグラデーションの色を変更する" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="20" Foreground="Navy" ></TextBlock> <Rectangle x:Name="rc1" Grid.Row="0" Height="200" Width="600" HorizontalAlignment="Center" VerticalAlignment="Center"> <Rectangle.Fill> <LinearGradientBrush x:Name="colors"> <GradientStop x:Name="col1" Color="Black" Offset="0" /> <GradientStop x:Name="col2" Color="White" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> <Rectangle.Effect> <DropShadowEffect Color="Black" BlurRadius="5" /> </Rectangle.Effect> </Rectangle>