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

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

C1ColorPickerコントロールの作成

　さきほど2列に分割した2行目のグリッドの最初の列に、C1ColorPickerコントロールを2つ作成します。

1. C1ColorPickerコントロールは、横に並ぶようにStackPanelを使用してレイアウトします。StackPanelは、グリッドの左側の列に作成します。
2. 開始色用C1ColorPickerコントロールは、Modeプロパティを「Advanced」にして拡張型に設定します。
3. 終了色用C1ColorPickerコントロールは、Modeプロパティを「Basic」にして基本型に設定します。
4. ドロップダウンの方向は、開始色用C1ColorPickerコントロールはDropDownDirectionプロパティを「AboveOrBelow」にして、コントロールの上側にカラーエディタが表示されるようにします。
5. 終了色用C1ColorPickerコントロールはDropDownDirectionプロパティを「BelowOrAbove」にして、コントロールの下側にカラーエディタが表示されるようにします。
6. どちらのC1ColorPickerコントロールも、あらかじめ表示する選択色は「White」に設定し、イベントハンドラを作成しておきます。
7. また、C1ColorPickerコントロールはEffectプロパティが設定されていないので、StackPanelのEffectプロパティでドロップシャドウを付けます。

<!-- 2行目のグリッドを2列に分割-->
<Grid x:Name="PaletteLayout" Grid.Row="1" ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <!-- 左の列に横向きのStackPanelを使ってC1ColorPickerを2つ作成-->
    <StackPanel Height="Auto" Width="Auto" Grid.Column="0" HorizontalAlignment="Right" 
                VerticalAlignment="Top" Orientation="Horizontal">

        <c1ext:C1ColorPicker x:Name="c1cp1" Width="80" Height="80" HorizontalAlignment="Center" 
                             VerticalAlignment="Center" Margin="5" DropDownDirection="AboveOrBelow" 
                             Mode="Both" SelectedColor="White" 
                             SelectedColorChanged="c1cp1_SelectedColorChanged">
         </c1ext:C1ColorPicker>
        <c1ext:C1ColorPicker x:Name="c1cp2" Width="80" Height="80" HorizontalAlignment="Center" 
                             VerticalAlignment="Center" Margin="5" DropDownDirection="BelowOrAbove" 
                             Mode="Basic"  SelectedColor="White"  
                             SelectedColorChanged="c1cp2_SelectedColorChanged">
        </c1ext:C1ColorPicker>
        
        <StackPanel.Effect>
            <DropShadowEffect Color="Black" BlurRadius="5" />
        </StackPanel.Effect>
    </StackPanel>

ListBoxの作成

　作成したStackPanelの下に、もう1つ縦向きのStackPanelを作成し、グリッドの右側の列に配置します。そして、StackPanelの中にTextBlockとListBoxを作成します。

　ListBoxは、リスト選択のイベントハンドラを作成し、ListBoxItemプロパティを使用してカラーパレットの5つのテーマ名を設定します。TextBlockとListBoxは、いずれもEffectプロパティでドロップシャドウを設定します。

                <!-- 右の列に縦向きのStackPanelを使ってTextBlockとListBoxを作成-->
    <StackPanel Height="Auto" Width="Auto" Grid.Column="1" 
                HorizontalAlignment="Left"  VerticalAlignment="Top"
                Orientation="Vertical">
        <TextBlock Margin="5" Text="カラーパレットの変更" Foreground="Blue" >
            <TextBlock.Effect>
                <DropShadowEffect Color="Black" BlurRadius="5" ShadowDepth="2" Opacity="70" />
            </TextBlock.Effect>
        </TextBlock>
        <ListBox x:Name="ListBox1" Grid.Column="1" Height="100" Width="120" 
                 HorizontalAlignment="Left" VerticalAlignment="Top" 
                 SelectionChanged="ListBox1_SelectionChanged" >                   
            <ListBoxItem Content="Apex" />
            <ListBoxItem Content="Office" />
            <ListBoxItem Content="Verve" />
            <ListBoxItem Content="Metro" />
            <ListBoxItem Content="リゾート" />
            <ListBox.Effect>
                <DropShadowEffect Color="Black" BlurRadius="5" />
            </ListBox.Effect>
        </ListBox>
    </StackPanel>
</Grid>

　以上で、Webページの作成は終了です。