今回は、今まで解説してきたSilverlight 4のサンプルで紹介しきれなかったものを、10回に亙ってTipsという形で紹介します。いろいろな表現方法を紹介していますので、きっと表現豊かなページ作成に役立つと思います。
第1回では、畫像の“裏”を表示するプログラムを紹介します。
今回の筆者の開発環境は、Windows 7 Professional+SP1、Visual Studio Ultimate+SP1、Expression Blend4、Silverlight 4です。
Windows 7のSP1は下記URLよりダウンロードできます。
→ Windows 7 および Windows Server 2008 R2 Service Pack 1
Visual Studio 2010のSP1は下記URLよりダウンロードできます。
→ Microsoft Visual Studio 2010 Service Pack 1
以上を必要に応じてインストールしてください。
まず初めに、このプログラムで実裝する機能の動作を、下記に解説しておきます。通常、Expression Blend4(以下Blend4)で、畫像等を180度反転させると、畫像が裏向きに透けて表示されます(図1)。このサンプルでは、[裏畫面へ]ボタンをクリックすると、畫像が反転し、何もない真っ黒な面に文字が表示された裏を表示させます。[表畫面へ]ボタンをクリックすると畫像が表示されます(図2)。
|
図1:通常は畫像を180度反転させると、畫像が裏向きに透けて表示される(クリックで拡大) |
|
図2:畫像の裏面が表示される(クリックで拡大) |
今回のサンプルは以下よりダウンロードできます。
→ 今回のサンプルファイル(963KB)
新規プロジェクトの作成
早速サンプルを作っていきましょう。本稿では開発言語にVisual Basicを用います。
Visual Studio 2010(以下VS 2010)のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]を選択します。次に、「Silverlight アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「SL4_ImageFrontBack」という名前を付けています。
ソリューションエクスプローラー內にImageというフォルダを作成して、「菜の花」の畫像と、裏面となる黒い畫像の2枚を追加しておきます。ダウンロードされたサンプル・ファイルには畫像は追加済みです。
コントロールの配置
<UserControl>要素のWidthに800、Heightに600と指定します。ツールボックスからBorder、Grid、Image、TextBlock、Buttonコントロールを図3のように配置します。ImageコントロールにはImageフォルダ內の畫像を指定します。XAMLコードはリスト1のように書き出されます。
|
図3:Border、Grid、Image、TextBlock、Buttonコントロールを配置した(クリックで拡大) |
リスト1 書き出されたXAMLコード(MainPage.xaml)
01 |
(1)表(おもて)となる面には、<Border>要素內に<Grid>要素を配置し、<Grid>要素內に<Image>と<Button>要素を配置しています。それぞれの要素には任意のx:Nameを指定しています。表となる<Border>要素にはImageBorderというx:Nameを付けています。 |
03 |
(2)裏となる面には、(1)の要素以外に<TextBlock>要素を配置しています。裏となる<Border>要素にはBackBorderというx:Nameを付けています。 |
05 |
<UserControl x:Class="SL4_ImageFrontBack.MainPage" |
11 |
d:DesignHeight="300" d:DesignWidth="400" Width="800" Height="600"> |
13 |
<Grid x:Name="LayoutRoot" Background="White"> |
14 |
<Border BorderBrush="Silver" BorderThickness="1" Height="280" HorizontalAlignment="Left" Margin="108,98,0,0" x:Name="ImageBorder" VerticalAlignment="Top" Width="320"> ■(1) |
15 |
<Grid Height="280" x:Name="ImageGrid" Width="320"> |
16 |
<Image Height="240" HorizontalAlignment="Left" Margin="0,-1,0,0" x:Name="FlowerImage" Stretch="Fill" VerticalAlignment="Top" Width="320" Source="/SL4_ImageFrontBack;component/Image/菜の花.jpg"
/> |
17 |
<Button Content="裏畫面へ" Height="31" HorizontalAlignment="Left" Margin="6,243,0,0" x:Name="ToBackButton" VerticalAlignment="Top" Width="116"/> |
21 |
<Border BorderBrush="Silver" BorderThickness="1" Height="280" HorizontalAlignment="Left" Margin="108,98,0,0" x:Name="BackBorder" VerticalAlignment="Top" Width="320" > ■(2) |
22 |
<Grid Height="280" Name="BackGrid" Width="320"> |
23 |
<Image Height="240" HorizontalAlignment="Left" Margin="0,-1,0,0" Name="Image1" Source="/SL4_ImageFrontBack;component/Image/裏畫像.jpg" Stretch="Fill" VerticalAlignment="Top" Width="320"
/> |
24 |
<Button Content="表畫面へ" Height="31" HorizontalAlignment="Left" Margin="6,243,0,0" x:Name="ToFrontButton" VerticalAlignment="Top" Width="116"/> |
25 |
<TextBlock Height="25" HorizontalAlignment="Left" Margin="176,204,0,0" x:Name="TextBlock1" Text="Photo by Sei Yakushiji" VerticalAlignment="Top" Width="130" Foreground="Gold" /> |
次に、裏となる面を<Border>要素ごと表となる面の上に重ねます(図4)。
|
図4:表となる面に裏となる面を重ねる |
裏の面が前面に表示されます。裏の面に該當する、Borderコントロールのプロパティの[可視性]を展開して表示される、Visibilityプロパティに、Collapsedを指定して非表示としておきます。SP1の入っていないVS2010上では裏面が非表示になりませんが、Blend4上では非表示となって表面(おもてめん)が表示されます。SP1の入ったVS2010ではVS2010上でも裏面が非表示になり、表面が表示されます。
ソリューションエクスプローラー內の、MainPage.xamlを選択し、マウスの右クリックで表示されるメニューの、「Expression Blendを開く(X)」を選択し、Blend4を起動します。