カラーピッカーで色を選択できるSilverlightアプリケーションの作成

ComponentOne StudioのColorPicker for Silverlightを使ったWebページの作成

今回作成するWebページの構成

　では、さっそくWebページを作成してみましょう。今回のプログラムでは、グリッドを使ってコントロールを配置します。

コントロールのレイアウト

　各コントロールの動作は、まず2つのC1ColorPickerコントロールを使ってグラデーションの開始色と終了色を選べるようにします。

　基本モードのC1ColorPickerコントロールでは、リストボックスから5つのカラーテーマのパレットを選べるようにします。

　C1ColorPickerコントロールで選んだ色は、すぐに四角形の塗りつぶしグラデーションに反映するように、C1ColorPickerコントロールのSelectedColorChangedイベントハンドラに処理を組み込みます。

Silverlightプロジェクトの作成

　まずは、Silverlightプロジェクトの作成からです。

1. Visual Studio 2008 Silverlight Tools 3.0をインストールし、Visual Studioで新しいプロジェクト作成すると、「プロジェクトの種類」に［Silverlight］が追加されています。これを選択し、「テンプレート」から［Silverlightアプリケーション］を選びます。
［Silverlightアプリケーション］を選ぶ

2. 「新しいSilverlightアプリケーション」というダイアログボックスが表示されるので、「新しいWebプロジェクトの種類」リストから［ASP.NET Webサイト］を選びます。
リストから［ASP.NET Webサイト］を選ぶ

3. プロジェクトが作成され、新しいWebサイトに「MainPage.xaml」が作られてXAMLのコードが表示されます。

グリッドの作成

　今回は、まず上下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"」にして枠線を見えるようにしている）

タイトル文字と四角形の描画

　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>