スライドバーを使って画像サイズが変更できるSilverlightアプリケーションの作成

ComponentOne Studio for SilverlightのC1RangeSliderコントロールを使ったWebページの作成

Webページの作成

　では、さっそくWebページを作成してみましょう。グリッドは、背景色をグラデーションで塗りつぶし、行列を設定します。まず、3行のグリッドを作成し、1行目と2行目を2列に分割します。

　1行目にはそれぞれImageコントロールを、2行目にはTextBlockコントロールを各列に配置します。3行目には、テーマの「C1ThemeRainierOrange」を設定し、その中にC1RangeSliderコントロールを配置します。それぞれのコントロールは、Effectプロパティに「DropShadowEffect」を設定し、影付きの表示にします。

コントロールのレイアウト（※グリッドの枠線を表示しています）

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のコードが表示されます。

グリッドの設定

　グリッドを作成していきます。行ごとに列の設定が違うので、Gridコントロールのネストを作成します。

　まず、最初にRowDefinitionsで行を3行設定します。次に、列を設定したい行を指定しColumnDefinitionsを記述します。また、グリッドの背景色をグラデーションで塗りつぶすので、LinearGradientBrushブラシを作成し、Backgroundプロパティに設定します。

<Grid x:Name="LayoutRoot" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="50"/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>

    <Grid.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="PaleTurquoise" Offset="0.0" />
            <GradientStop Color="RoyalBlue"  Offset="1.0" />
        </LinearGradientBrush>
    </Grid.Background>

    <Grid Grid.Row="0" ShowGridLines="True" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
    </Grid>

    <Grid Grid.Row="1" ShowGridLines="True" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
     </Grid>
</Grid>

Imageコントロールの作成

　次に、ツールボックスの「Imageコントロールアイコン」をダブルクリックして、Imageコントロールを2つ作成します。作成する場所は、グリッドの最初の行を設定している<Grid Grid.Row="0"></Grid>の中です。

　コードから参照するので名前を付け、グリッドを配置する位置を指定します。設定する画像「sample.jpg」と「sample2.jpg」はSourceプロパティで指定し、プロジェクトに組み込んでおきます。コントロールのサイズは、Width・Heightプロパティで「450」に設定し、Effectプロパティに「DropShadowEffect」を設定します。

<Grid Grid.Row="0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Image x:Name="image1" Grid.Row="0" Grid.Column="0" Source="sample.jpg" 
           Width="350" Height="350">
        <Image.Effect>
            <DropShadowEffect Color="Black" Opacity="50" />
        </Image.Effect>
    </Image>

    <Image x:Name="image2" Grid.Row="0" Grid.Column="1" Source="sample2.jpg" 
           Width="450" Height="450">
        <Image.Effect>
            <DropShadowEffect Color="Black" Opacity="50" />
        </Image.Effect>
    </Image>
</Grid>