グラフィックス目次

WPF チュートリアルを使用したボタンの作成此のチュートリアルでは Windows Presentation Foundation(WPF) アプリケーションで使用するアニメーションボタンの作成方法に付いて説明する此のチュートリアルではカスタマイズされたボタンリソースを作成するのにスタイルとテンプレートを使用する此れに依りコードを再利用したりボタンロジックをボタン宣言から分離したり出来る様に成る此のチュートリアルは総て Extensible Application Markup Language() で記述されて居る此のチュートリアルでは Extensible Application Markup Language() を Microsoft Visual Studio に入力するかコピーと貼り付けを行う事でアプリケーションを作成する手順に付いて説明する同じアプリケーションをデザインツール (Microsoft Expression Blend) を使用して作成する方法の詳細に付いてはチュートリアル : Microsoft Expression Blend を使用してボタンを作成するを参照され度い次の図は完成したボタンの外観を示して居る基本ボタンの作成先ず新しいプロジェクトを作成しウィンドウにボタンを幾つか追加する新しい WPF プロジェクトを作成しウィンドウにボタンを追加するには 1.Visual Studio を起動する 2. 新しい WPF プロジェクトの作成 :[ ファイル ] メニューの [ 新規 ] をポイントし [ プロジェクト ] をクリックする [WPF アプリケーション ] テンプレートを選択しプロジェクトに AnimatedButton と謂う名前を付ける此れでアプリケーションのスケルトンが作成される -1-

3. 既定の基本ボタンの追加 : 此のチュートリアルで必要と成るファイルは総てテンプレートに用意されて居るソリューションエクスプローラで MainWindow.xaml をダブルクリックして開く MainWindow.xaml には既定で Grid 要素が有る Grid 要素を削除し次の強調表示されたコードを Window1.xaml に入力するかコピーして貼り付けて Extensible Application Markup Language() ページにボタンを幾つか追加する <Window x:class="mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="AnimatedButton" Height="300" Width="300" Background="Black">  <StackPanel HorizontalAlignment="Left"> <Button>Button 1</Button> <Button>Button 2</Button> <Button>Button 3</Button> </StackPanel> </Window> F5 キーを押してアプリケーションを実行する次の図の様なボタンのセットが表示される基本ボタンを作成したので MainWindow.xaml ファイルに対する作業は終わりで有る此れ以降はボタンのスタイルとテンプレートを定義する Application.xaml ファイルを中心に説明する基本プロパティの設定次に此等のボタンに付いて外観とレイアウトをコントロールする為のプロパティを幾つか設定する其の際プロパティをボタン別に設定するのではなくアプリケーション全体のボタンプロパティを定 -2-

義するリソースを使用するアプリケーションリソースは Web ページ用の外部カスケードスタイルシート (CSS) と概念的には似て居るが此のチュートリアルを通じて説明される様にリソースの方がカスケードスタイルシート (CSS) 依り遥かに強力で有るリソースの詳細に付いてはリソースを参照され度いボタンの基本プロパティを設定する為のスタイルを使用するには 1.Application.Resources ブロックの定義 :Application.xaml を開き次の強調表示されたマークアップが含まれて居ない場合は追加する <Application x:class="application" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> <Application.Resources>  </Application.Resources> </Application> リソースのスコープはリソースを定義する場所で決定される Application.xaml ファイルの Application.Resoureses で定義されたリソースはアプリケーションの何処ででも使用出来るリソースのスコープの定義の詳細に付いてはリソースを参照され度い 2. スタイルの作成と基本プロパティ値の定義 : 次のマークアップを Application.Resources ブロックに追加する此のマークアップはアプリケーションに含まれる総てのボタンに適用される Style を作成する此のスタイルに依りボタンの Width は 90 に設定され Margin は 10 に設定される <Application.Resources> <Style TargetType="Button"> <Setter Property="Width" Value="90" /> <Setter Property="Margin" Value="10" /> </Style> </Application.Resources> TargetType プロパティは Button 型の総てのオブジェクトに適用されるスタイルを指定する各 Setter は Style に異なるプロパティ値を設定する従って此の時点ではアプリケーションに含まれる総てのボタンの幅は 90 で余白は 10 で有る F5 キーを押してアプリケーションを実行すると次の様なウィンドウが表示される -3-

スタイルを使用すると他にも様々な事が出来る例えば対象オブジェクトを微調整する方法が各種用意されて居る他複雑なプロパティ値を指定したり或るスタイルを他のスタイルの入力として使用したりする事も出来る詳細に付いてはスタイルとテンプレートを参照され度い 3. スタイルのプロパティ値のリソースへの設定 : リソースを使用する事で一般的に定義されるオブジェクトや値を簡単に再利用出来る複雑な値をリソースを使用して定義する事はコードをモジュール化するのに大変便利で有る次の強調表示されたマークアップを Application.xaml に追加する <Application.Resources> <LinearGradientBrush x:key="graybluegradientbrush" StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="DarkGray" Offset="0" /> <GradientStop Color="#CCCCFF" Offset="0.5" /> <GradientStop Color="DarkGray" Offset="1" /> </LinearGradientBrush> <Style TargetType="{x:Type Button}"> <Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" /> <Setter Property="Width" Value="80" /> <Setter Property="Margin" Value="10" /> </Style> </Application.Resources> Application.Resources ブロックの直下に "GrayBlueGradientBrush" と謂うリソースが作成されて居る此のリソースは水平方向のグラデーションを定義する此のリソースは Background プロパティのボタンスタイルの Setter の内部から等アプリケーションの何処からでもプロパティ値として使用出来る此れで総てのボタンが此のグラデーションの Background プロパティを持つ様に成った -4-

F5 キーを押してアプリケーションを実行する結果は次の様に成るボタンの外観を定義するテンプレートの作成此処ではボタンの外観 ( プレゼンテーション ) カスタマイズするテンプレートを作成するボタンプレゼンテーションは四角形等のコンポーネントを含む幾つかのオブジェクトで構成されボタンに固有の外観を指定する此れ迄アプリケーションに於けるボタンの外観のコントロールはボタンのプロパティを変更する事に制限されて居たボタンの外観を更に大きく変更するには何うすれば良いかテンプレートを使用するとオブジェクトのプレゼンテーションを強力にコントロール出来るテンプレートはスタイル内で使用出来るのでスタイルが適用される総てのオブジェクト ( 此のチュートリアルではボタン ) にテンプレートを適用出来るボタンの外観を定義するテンプレートを使用するには 1. テンプレートのセットアップ :Button 等のコントロールには Template プロパティが有るのでテンプレートのプロパティ値は Style で Setter を使用して設定した他のプロパティと同じ様にして定義出来る次の強調表示されたマークアップをボタンスタイルに追加する <Application.Resources> <LinearGradientBrush x:key="graybluegradientbrush" StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="DarkGray" Offset="0" /> <GradientStop Color="#CCCCFF" Offset="0.5" /> <GradientStop Color="DarkGray" Offset="1" /> </LinearGradientBrush> <Style TargetType="{x:Type Button}"> -5-

<Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" /> <Setter Property="Width" Value="80" /> <Setter Property="Margin" Value="10" /> <Setter Property="Template"> <Setter.Value>  </Setter.Value> </Setter> </Style> </Application.Resources> 2. ボタンプレゼンテーションの変更 : 此の時点でテンプレートを定義する必要が有る次の強調表示されたマークアップを追加する此のマークアップは角が丸い 2 つの Rectangle 要素を指定し続いて DockPanel を指定する DockPanel はボタンの ContentPresenter をホストする為に使用される ContentPresenter にはボタンのコンテンツが表示される此のチュートリアルではコンテンツはテキスト ("Button 1" "Button 2" "Button 3") で有るテンプレートコンポーネント ( 四角形と DockPanel) は総て Grid 内部にレイアウトされる <Setter.Value> <ControlTemplate TargetType="Button"> <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">  <Rectangle x:name="outerrectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}" RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />  <Rectangle x:name="innerrectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Transparent" StrokeThickness="20" Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" />  <DockPanel Name="myContentPresenterDockPanel"> <ContentPresenter x:name="mycontentpresenter" Margin="20" Content="{TemplateBinding Content}" TextBlock.Foreground="Black" /> </DockPanel> </Grid> </ControlTemplate> </Setter.Value> -6-

F5 キーを押してアプリケーションを実行する結果は次の様に成る 3. テンプレートへのグラス効果の追加 : 次にグラスを追加する先ずグラスグラデーション効果を作成するリソースを幾つか作成する此等のグラデーションリソースを Application.Resources ブロック内の何処か ( 先頭部分が良い ) に追加する <Application.Resources> <GradientStopCollection x:key="myglassgradientstopsresource"> <GradientStop Color="WhiteSmoke" Offset="0.2" /> <GradientStop Color="Transparent" Offset="0.4" /> <GradientStop Color="WhiteSmoke" Offset="0.5" /> <GradientStop Color="Transparent" Offset="0.75" /> <GradientStop Color="WhiteSmoke" Offset="0.9" /> <GradientStop Color="Transparent" Offset="1" /> </GradientStopCollection> <LinearGradientBrush x:key="myglassbrushresource" StartPoint="0,0" EndPoint="1,1" Opacity="0.75" GradientStops="{StaticResource MyGlassGradientStopsResource}" />  此等のリソースはボタンテンプレートの Grid に挿入する四角形の Fill として使用される次の強調表示されたマークアップをテンプレートに追加する <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True"> -7-

<Rectangle x:name="outerrectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}" RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />  <Rectangle x:name="innerrectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Transparent" StrokeThickness="20" Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" />  <Rectangle x:name="glasscube" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0" Fill="{StaticResource MyGlassBrushResource}" RenderTransformOrigin="0.5,0.5"> <Rectangle.Stroke> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0.0" Color="LightBlue" /> <GradientStop Offset="1.0" Color="Gray" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Rectangle.Stroke>  <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform /> <RotateTransform /> </TransformGroup> </Rectangle.RenderTransform>  <Rectangle.BitmapEffect> <BevelBitmapEffect /> </Rectangle.BitmapEffect> </Rectangle>  <DockPanel Name="myContentPresenterDockPanel"> <ContentPresenter x:name="mycontentpresenter" Margin="20" Content="{TemplateBinding Content}" TextBlock.Foreground="Black" /> </DockPanel> </Grid> </ControlTemplate> </Setter.Value> -8-

"glasscube" の x:name プロパティを持つ四角形の Opacity は 0 なので此のサンプルを実行するとグラス四角形は最前面にオーバーレイ表示されない此れはユーザーがボタンを使用して対話操作を行う場合に付いて後でトリガーをテンプレートに追加するからで有る但し Opacity 値を 1 に変更してアプリケーションを実行するとボタンの外観を直ぐに確認出来る次の図を参照され度い次の手順に進む前に Opacity を 0 に戻すボタンの対話機能の作成此処ではマウスポインターをボタンに合わせてクリックする等のユーザーアクションに対応してプロパティ値を変更してアニメーションを実行するプロパティトリガー及びイベントトリガーを作成する対話機能 ( マウスオーバーマウスリーブクリック等 ) を追加する簡単な方法はテンプレートやスタイルの内部にトリガーを定義する事で有る Trigger を作成するにはボタンの IsMouseOver プロパティが true に等しいと謂ったプロパティ " 条件 " を作成する次にトリガー条件が true に成った時に実行される setter( アクション ) 定義するボタンの対話機能を作成するには 1. テンプレートトリガーの追加 : 次の強調表示されたマークアップをテンプレートに追加する <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">  <Rectangle x:name="outerrectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}" RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" /> -9-

<Rectangle x:name="innerrectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Transparent" StrokeThickness="20" Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" />  <Rectangle x:name="glasscube" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0" Fill="{StaticResource MyGlassBrushResource}" RenderTransformOrigin="0.5,0.5"> <Rectangle.Stroke> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0.0" Color="LightBlue" /> <GradientStop Offset="1.0" Color="Gray" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Rectangle.Stroke>  <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform /> <RotateTransform /> </TransformGroup> </Rectangle.RenderTransform>  <Rectangle.BitmapEffect> <BevelBitmapEffect /> </Rectangle.BitmapEffect> </Rectangle>  <DockPanel Name="myContentPresenterDockPanel"> <ContentPresenter x:name="mycontentpresenter" Margin="20" Content="{TemplateBinding Content}" TextBlock.Foreground="Black" /> </DockPanel> </Grid> <ControlTemplate.Triggers>  </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> -10-

2. プロパティトリガーの追加 : 次の強調表示されたマークアップを ControlTemplate.Triggers ブロックに追加する <ControlTemplate.Triggers>  <Trigger Property="IsMouseOver" Value="True">   <Setter Property ="Rectangle.Stroke" TargetName="outerRectangle" Value="{DynamicResource {x:static SystemColors.HighlightBrushKey}}" />  <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />  <Setter Property="ContentPresenter.BitmapEffect" TargetName="myContentPresenter"> <Setter.Value> <BlurBitmapEffect Radius="1" /> </Setter.Value> </Setter> </Trigger> <ControlTemplate.Triggers/> F5 キーを押してアプリケーションを実行しマウスポインタをボタンに合わせた時の効果を確認する 3. フォーカストリガーの追加 : 次にボタンにフォーカスが有る場合 ( ユーザーがクリックした後等 ) を処理する同様の setter を追加する <ControlTemplate.Triggers>  <Trigger Property="IsMouseOver" Value="True">   <Setter Property ="Rectangle.Stroke" TargetName="outerRectangle" Value="{DynamicResource {x:static SystemColors.HighlightBrushKey}}" />  <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />  -11-

<Setter Property="ContentPresenter.BitmapEffect" TargetName="myContentPresenter"> <Setter.Value> <BlurBitmapEffect Radius="1" /> </Setter.Value> </Setter> </Trigger>  <Trigger Property="IsFocused" Value="true"> <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" /> <Setter Property="Rectangle.Stroke" TargetName="outerRectangle" Value="{DynamicResource {x:static SystemColors.HighlightBrushKey}}" /> <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" /> </Trigger> </ControlTemplate.Triggers> F5 キーを押してアプリケーションを実行し孰れかのボタンをクリックするクリックされた後でもフォーカスが有るのでボタンは強調表示された儘に成る別のボタンをクリックすると新しいボタンにフォーカスが移り其れ迄のボタンはフォーカスを失う 4.MouseEnter と MouseLeave へのアニメーションの追加 : 次にトリガーにアニメーションを追加する次のマークアップを ControlTemplate.Triggers ブロックの中に追加する  <EventTrigger RoutedEvent="Mouse.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard Name="mouseEnterBeginStoryboard"> <Storyboard>  <DoubleAnimation Storyboard.TargetName="glassCube" Storyboard.TargetProperty= "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" By="-0.1" Duration="0:0:0.5" />  <DoubleAnimation Storyboard.TargetName="glassCube" Storyboard.TargetProperty= "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" By="-0.1" Duration="0:0:0.5" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> <EventTrigger RoutedEvent="Mouse.MouseLeave"> <EventTrigger.Actions>  <StopStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" /> </EventTrigger.Actions> </EventTrigger> -12-

グラス四角形はマウスポインタをボタンに合わせると小さく成りポインターが離れると標準サイズに戻るポインターをボタンに合わせた時 (MouseEnter イベントが発生した時 ) にトリガーされるアニメーションは 2 つ有る此等のアニメーションはグラス四角形を夫々 X 軸及び Y 軸方向に縮小する DoubleAnimation 要素のプロパティは Duration と By で有る Duration はアニメーションが 0.5 秒間発生する様に指定し By はグラスが 10% 縮小される様に指定する 2 番目のイベントトリガー (MouseLeave) は単純に最初のイベントを停止する Storyboard を停止するとアニメーション化された総てのプロパティが既定値に戻る従ってユーザーがポインターをボタンから離すとボタンはマウスポインタをボタンに合わせる前の状態に戻るアニメーションの詳細に付いてはアニメーションの概要を参照され度い 5. ボタンがクリックされた時のアニメーションの追加 : 最後の手順はユーザーがボタンをクリックした時のトリガーの追加で有る次のマークアップを ControlTemplate.Triggers ブロックの中に追加する  <EventTrigger RoutedEvent="Button.Click"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="glassCube" Storyboard.TargetProperty= "(Rectangle.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)" By="360" Duration="0:0:0.5" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> F5 キーを押してアプリケーションを実行し孰れかのボタンをクリックするボタンをクリックするとグラス四角形が回転する http://msdn.microsoft.com/ja-jp/library/bb613545(v=vs.110).aspx http://msdn.microsoft.com/ja-jp/library/ee649089(v=vs.110).aspx -13-

グラフィックス 目次