2013年10月31日

WPFサンプル:VisualStateManagerでコントロールの状態ごとの外観をカスタマイズする

   このエントリーをはてなブックマークに追加 Clip to Evernote
VisualStateManagerを使うと、コントロールの状態ごとに外観を変化させることが可能です。
VisualStateManagerを使って、Buttonの外観を変えてみました。

ここでは、Window.ResourcesにControlTemplateを定義し、その中で、isualStateManagerを使って、Buttonの外観を変化させています。
Buttonにはすでに、"Normal" "MouseOver" といった状態が定められているので、その状態ごとにどういったAnimationを実行するかを定義することができます。

<Window x:Class="VisualStateManagerButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="Button" >
            <Setter Property="Background" Value="#115E8B" />
            <Setter Property="Foreground" Value="White" />
        </Style>
        <ControlTemplate  x:Key="ButtonTemplate" TargetType="Button">
           
            <Grid x:Name="MyButton" Background="{TemplateBinding Background}" Margin="1">
                <ContentPresenter
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                       
                        Margin="4,5,4,4" />
                <VisualStateManager.VisualStateGroups>
                   
                    <VisualStateGroup Name="CommonStates">
                        <VisualState Name="Normal" />
                        <VisualState Name="MouseOver">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="MyButton"
                                        Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"                       
                                        Duration="00:00:00.1"
                                        To="#1570A6" />
                                <ThicknessAnimation Storyboard.TargetName="MyButton"
                                        Storyboard.TargetProperty="Margin"
                                        Duration="00:00:00.1"
                                        To="0,0,0,0" />
                            </Storyboard>                           
                        </VisualState>
                        <VisualState Name="Pressed">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="MyButton"
                                        Storyboard.TargetProperty="Opacity"
                                        Duration="00:00:00.1"
                                        To="0.6"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <Button Width="120" Height="40"
                Template="{StaticResource ButtonTemplate}"
                Content="Click Me!"  />
    </Grid>
</Window>

C#のコード側では何も記述する必要はありません。

以下、実行結果です。


通常の状態
VisualState1

マウスオーバーの状態
VisualState2

マウスをプレスした状態
VisualState3



WPFサンプル・目次


 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52336247