VisualStateManagerで状態管理
VisualStateManagerを使用するとコントロールの見た目を状態ごとに管理することができます。
状態はグループ(VisualStateGroup)分けされて管理されています。
例えば、共通項目のCommonStatesには通常状態を表す"Normal"やマウスオーバー時の"MouseOver"、コントロールが押されたときの"Pressed"等があります。
コントロール毎に使用できるグループが違うので、コントロールのスタイルとテンプレートで確認してください。
例として、ボタンのコントロールテンプレートをVisualStateManagerを使用して作成します。全部の状態を定義すると恐ろしく長くなるのでMouseOverとDisabledのみ定義します。
解りにくいですが「ボタン2」をマウスオーバーしています。
VisualStateManager.VisualStateGroups以下に状態を定義するVisualStateGroupを作成します。x:Nameでグループ名を指定します。
VisualStateGroup以下にVisualState(状態)を定義していきます。状態名はx:Nameで指定します。
この例では、通常の状態を表すNormal、マウスオーバー時の状態を表すMouseOver、無効時の状態を表すDisabledを定義しています。
Normalでは特にやることがないので中身は空のままにしてあります。
MouseOver時にはボタンの背景色をPinkにしています。
Disabled時はボタンの背景色をDardGrayに、文字色をWhiteにしています。
状態を変化させる場合はStoryboardを使用して見た目の変更を行います。
アニメーションで定義する必要があるので、どうしてもめんどくさいコードになりがちですが、頑張って覚えるしかありません。
あらかじめ用意されている状態(CommonStatesのMouseOver等)を使用する場合、状態遷移を行う際のトリガーの定義は必要ありません。自動で状態遷移が行われます。
VisualStateManagerを使用すると、あらかじめ用意されている状態を名前付きで定義できるので、トリガーを使用して見た目をコントロールする時よりもわかりやすくなります。
VisualStateManagerは独自の状態を定義して使用することもできます。
その説明は次回行います。
<Window x:Class="VisualStateManagerDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="150" Width="225"> <Window.Resources> <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}"> <Border Name="Border" BorderBrush="Gray" BorderThickness="1" Background="AliceBlue"> <ContentPresenter Name="Content" Margin="2" RecognizesAccessKey="True" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> <EasingColorKeyFrame KeyTime="0" Value="Pink"/> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> <EasingColorKeyFrame KeyTime="0" Value="DarkGray"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"> <EasingColorKeyFrame KeyTime="0" Value="White"/> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Border> </ControlTemplate> </Window.Resources> <StackPanel> <Button Content="ボタン1" Template="{StaticResource ButtonTemplate}" Width="100" Height="30"/> <Button Content="ボタン2" Template="{StaticResource ButtonTemplate}" Width="100" Height="30"/> <Button Content="ボタン3" IsEnabled="False" Template="{StaticResource ButtonTemplate}" Width="100" Height="30"/> </StackPanel> </Window>これを実行すると以下の様になります。

スポンサーサイト
- 関連するタグ:
- WPF