SHOEISHA iD

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

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

ComponentZine(ComponentOne)

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

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

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

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

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

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

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

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

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

Silverlightプロジェクトの作成

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

  1. Visual Studio 2008 Silverlight Tools 3.0をインストールし、Visual Studioで新しいプロジェクト作成すると、「プロジェクトの種類」に[Silverlight]が追加されています。これを選択し、「テンプレート」から[Silverlightアプリケーション]を選びます。
  2. [Silverlightアプリケーション]を選ぶ
    [Silverlightアプリケーション]を選ぶ
  3. 「新しいSilverlightアプリケーション」というダイアログボックスが表示されるので、「新しいWebプロジェクトの種類」リストから[ASP.NET Webサイト]を選びます。
  4. リストから[ASP.NET Webサイト]を選ぶ
    リストから[ASP.NET Webサイト]を選ぶ
  5. プロジェクトが作成され、新しい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"」にして枠線を見えるようにしている)
グリッドの設定(※「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>

次のページ
C1ColorPickerコントロールの作成

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング