5.リソース
リソースファイル
画面の各種部品のスタイルは画面(xaml)のコードをスッキリさせる為や全ての画面から共用で使用できるように別ファイル(拡張子:xaml)として、Resourcesというフォルダ名のフォルダを作成して、そこに入れます。
このスタイルは画面ではWindow.Resourcesを作って、そこに設定します。
【操作】Resourcesフォルダを選択してマウスの右クリックをして、ショートカット ウィンドゥの中の「追加」にカーソルをもっていって、次に表示されるウィンドゥの中の「リソース ディクショナリ」を選択します。
下記はボタンの背景色等を設定するリソースファイルの例で、CommandTemplateという名前で設定(x:Key)しています。この名前は、画面のボタンに指定します。
6行目で背景色をグリーンに設定しています。16～20行で、マウスが上に来た時に変化させています。
リソースファイル
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="CommandTemplate" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkGoldenrod" />
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
「11.一覧表」では、下記の3行目のようにComboboxの最初のItemとして空行を追加するためのクラスも設定しています。
6行目が、上記のリソースファイルの指定です。
ViewModelでのリソースの指定(2)
<Window.Resources>
<ResourceDictionary>
<vm:XComboBoxEmptyItemConverter x:Key="XComboBoxEmptyItemConverter"/>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/Styles.xaml"/>
<ResourceDictionary Source="/Resources/Styles2.xaml"/>
<ResourceDictionary Source="/Resources/StylesBG.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
リソースファイルの指定
画面(例えばMainWindow.xaml)ではリソースファイルは下記のように指定します。
View<Window x:Class="LivetWPFApplication100.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
xmlns:v="clr-namespace:LivetWPFApplication100.Views"
xmlns:vm="clr-namespace:LivetWPFApplication100.ViewModels"
xmlns:b="clr-namespace:LivetWPFApplication100.Behaviors"
Title="MainWindow" Height="714" Width="1035"
WindowStartupLocation="CenterScreen">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/Styles.xaml"/>
<ResourceDictionary Source="/Resources/Styles2.xaml"/>
<ResourceDictionary Source="/Resources/StylesBG.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<i:Interaction.Triggers>
<!--WindowのContentRenderedイベントのタイミングでViewModelの
Initializeメソッドが呼ばれます-->
<i:EventTrigger EventName="ContentRendered">
<l:LivetCallMethodAction MethodTarget="{Binding}"
MethodName="Initialize"/>
</i:EventTrigger>
<l:InteractionMessageTrigger
MessageKey="MessageKey2" Messenger="{Binding Messenger}">
<l:TransitionInteractionMessageAction
WindowType="{x:Type v:Window2}" Mode="Modal"/>
</l:InteractionMessageTrigger>
</i:Interaction.Triggers>
<i:Interaction.Behaviors>
<b:CloseButtonBehavior IsWindowCloseEnable=
"{Binding ElementName=CloseCheck, Path=IsChecked}"/>
</i:Interaction.Behaviors>
<Grid Background="#FFE6E6FA">
<Label Background="AliceBlue" Content="ユーザーID" Height="22"
HorizontalAlignment="Left" Margin="381,259,0,0" Name="label1"
VerticalAlignment="Top" Width="70" />
<Label Background="AliceBlue" Content="パスワード" Height="22"
HorizontalAlignment="Left" Margin="381,287,0,0" Name="label2"
VerticalAlignment="Top" Width="70" />
<TextBox Style="{StaticResource HighlightTextBox}" Height="22"
HorizontalAlignment="Left" Margin="450,259,429,0"
Name="txtユーザーID" Text="{Binding Path=txtユーザーID}"
VerticalAlignment="Top" Width="134" />
<PasswordBox MaxLength="10" Height="22"
HorizontalAlignment="Left" Margin="450,287,0,0"
VerticalAlignment="Top" Width="134">
<i:Interaction.Behaviors>
<b:PasswordBindBehavior Password="{Binding txtパスワード,
Mode=TwoWay}" />
</i:Interaction.Behaviors>
</PasswordBox>
<Button Style="{StaticResource CommandTemplate}" Content="ログイン"
Width="130" Height="30"
Command="{Binding GotoCommand22}"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="450,322,433,323"
Foreground="White" />
<v:UserControlFooterN1 Margin="0,0,0,0" HorizontalAlignment="Left"
VerticalAlignment="Bottom" />
</Grid>
</Window>
この例は、 Styles.xaml、Styles2.xaml、StylesBG.xaml という3つのファイルを使用する方法で、 <ResourceDictionary.MergedDictionaries> 、</ResourceDictionary.MergedDictionaries> で括ります。1つの時はMergedDictionariesタグは不要です。
リソースファイルのボタンでの設定
ボタンへの設定は下記のように、Style="{StaticResource CommandTemplate}"とします。
View<Button Style="{StaticResource CommandTemplate}" Content="ログイン" Width="130"
Height="30" Command="{Binding GotoCommand22}"
HorizontalAlignment="Center" VerticalAlignment="Center" Margin="450,322,433,323"
Foreground="White" />
ここのサンプルのダウンロード(Styles2.lzh)
One Point Lesson 【スタイル設定】
WPFはHTMLのCSSのようなスタイル設定の機構があります。
スタイルは、<Setter>要素（＝プロパティの値を設定するための要素）のリストとして定義します。
<Style>要素のTargetTypeプロパティにはスタイルを適用したい型の名前を指定します。
<Setter>要素のPropertyプロパティには対象とするプロパティ名、Valueプロパティに、その値を指定します。
■記述例
<StackPanel>
▲設定<br />
<StackPanel.Resources>
<!-- x:Key なしでスタイルを設定しますとTargetType で指定した型すべてにスタイルが適用されます -->
<Style TargetType="Button">
<Setter Property="Background" Value="SkyBlue" />
<Setter Property="Foreground" Value="Red" />
</Style>
<!-- x:Key ありでスタイルを設定しますと、指定したもののみに適用されます -->
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="Background" Value="DarkBlue" />
<Setter Property="Foreground" Value="LightPink" />
</Style>
</StackPanel.Resources>
▲適用
<!-- Styleが無指定のButtonに適用されます -->
<Button Content="次へ" />
<!-- x:Key を指定して明示的にスタイルを適用します -->
<Button Style="{StaticResource MyButtonStyle}" Content="次へ" />
<!-- スタイルを直接記述します -->
<Button Content="次へ">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="SkyBluey" />
</Style>
</Button.Style>
</Button>
</StackPanel>