2013年01月18日

[C# WPF]Styleを使う

今回からStyleについて解説していきます。

Styleは複数コントロールに共通するプロパティ設定をくくりだして
一箇所にまとめるのがもっとも基本的な使用方法です。

以下のサンプルを見てください。

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel>
<CheckBox Content="Enabled" x:Name="ButtonEnabled"/>
<Button Content="Button1" Width="70" Height="23" Margin="5"
IsEnabled="{Binding IsChecked, ElementName=ButtonEnabled}"/>
<Button Content="Button2" Width="70" Height="23" Margin="5"
IsEnabled="{Binding IsChecked, ElementName=ButtonEnabled}"/>
<Button Content="Button3" Width="70" Height="23" Margin="5"
IsEnabled="{Binding IsChecked, ElementName=ButtonEnabled}"/>
<Button Content="Button4" Width="70" Height="23" Margin="5"
IsEnabled="{Binding IsChecked, ElementName=ButtonEnabled}"/>
<Button Content="Button5" Width="70" Height="23" Margin="5"
IsEnabled="{Binding IsChecked, ElementName=ButtonEnabled}"/>
</StackPanel>
</Grid>


StackPanelの中にCheckBoxとButtonを5つ配置しています。
CheckBoxのON/OFFでButtonの有効状態を切り替えます。
5つのButtonを見るとWidth、Height、Margin、IsEnabledは同じ値です。

これをStyleを使って以下のように書く事ができます。

<Window.Resources>
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Width" Value="70"/>
<Setter Property="Height" Value="23"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="IsEnabled" Value="{Binding IsChecked, ElementName=ButtonEnabled}"/>
</Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel>
<CheckBox Content="Enabled" x:Name="ButtonEnabled"/>
<Button Content="Button1" Style="{StaticResource ButtonStyle}"/>
<Button Content="Button2" Style="{StaticResource ButtonStyle}"/>
<Button Content="Button3" Style="{StaticResource ButtonStyle}"/>
<Button Content="Button4" Style="{StaticResource ButtonStyle}"/>
<Button Content="Button5" Style="{StaticResource ButtonStyle}"/>
</StackPanel>
</Grid>


WindowのResourceに5つのButtonの共通設定をもったStyleを定義しています。
SetterはPropertyで指定したプロパティにValueで指定した値を設定します。
KeyではこのStyleに名前をつけています。
TargetTypeにはこのStyleを割り当てるコントロールの型を指定します。

5つのButtonにはKeyに設定した名前を指定してこのStyleを適用しています。
このようにすることで同じ記述を複数回書く手間を省く事ができます。
また、修正が必要になったときの修正箇所を一箇所にまとめる事ができます。

実行結果は以下のようになります。
1.jpg
1.jpg

チェックボックスのチェック状態とボタンの有効状態が連動します。

Styleで設定しているプロパティを、そのStyleを適用するコントロール側にも設定できます。
この場合、Styleを適用するコントロール側で設定しているプロパティ値が優先されます。

<Window.Resources>
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Width" Value="70"/>
<Setter Property="Height" Value="23"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="IsEnabled" Value="{Binding IsChecked, ElementName=ButtonEnabled}"/>
</Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel>
<CheckBox Content="Enabled" x:Name="ButtonEnabled"/>
<Button Content="Button1" Style="{StaticResource ButtonStyle}"/>
<Button Content="Button2" Style="{StaticResource ButtonStyle}"/>
<Button Content="Button3" Style="{StaticResource ButtonStyle}"/>
<Button Content="Button4" Style="{StaticResource ButtonStyle}"/>
<Button Content="Button5" Style="{StaticResource ButtonStyle}" IsEnabled="True"/>
</StackPanel>
</Grid>


5つ目のButtonにはStyleでも設定しているIsEnabledをTrueに設定しています。
5つ目のButtonではIsEnabled=Trueの設定が優先されるので
CheckBoxのON/OFFによらず常に有効状態となります。

実行結果です。
1.jpg

StyleのKeyについてですが、これを指定しない場合
同一xaml内のTargetTypeで指定したコントロール全てにこのStyleが適用されます。
コントロールのStyleプロパティを設定していなくても適用されます。

<Window.Resources>
<Style TargetType="Button">
<Setter Property="Width" Value="70"/>
<Setter Property="Height" Value="23"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="IsEnabled" Value="{Binding IsChecked, ElementName=ButtonEnabled}"/>
</Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.RowSpan="2">
<CheckBox Content="Enabled" x:Name="ButtonEnabled"/>
<Button Content="Button1"/>
<Button Content="Button2"/>
<Button Content="Button3"/>
<Button Content="Button4"/>
<Button Content="Button5"/>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="OK"/>
<Button Content="Cancel"/>
</StackPanel>
</Grid>


上のサンプルではStyleのKeyを設定していない為、
画面右下に追加したOK、CancelボタンにもこのStyleが適用されます。

1.jpg
1.jpg

基本的にはKeyを設定して使うのがいいと思います。


posted by cw at 10:30| Comment(0) | TrackBack(0) | Style | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。