CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/01/18 14:00
目次

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アプリケーション]を選択
    [Silverlightアプリケーション]を選択
  2. 「新しいSilverlightアプリケーション」というダイアログボックスが表示されるので、「新しいWebプロジェクトの種類」でリストから[ASP.NET 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>

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ComponentZine(ComponentOne)

もっと読む

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5