SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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ページの作成は終了です。

次のページ
処理コードの作成

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5471 2010/09/28 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング