VisualStateManager

Posted 2020-10-19 Lulus

管理控件状态和管理控件状态的转换逻辑

<Window.Resources>
    <Style TargetType="Button" x:Key="AnimatedStyle" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <!-- Define our button‘s border. Note that
                    the text color is inherited by child 
                    elements, that is we give it a name, so 
                    we can target it with the animation -->
                    <Border BorderBrush="Black" BorderThickness="1" 
                    CornerRadius="2" 
                    TextBlock.Foreground="WhiteSmoke" 
                    Name="theBorder">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>

                            <!-- To match the appearance of a typical button, 
                            we use two rectangles -->
                            <Rectangle Name="topBackground" Fill="DarkGray"/>
                            <Rectangle Grid.Row="1" Name="bottomBackground" 
                                Fill="Black" />

                            <!-- The content presenter shows the 
                            button‘s text -->
                            <ContentPresenter Grid.RowSpan="2" 
                                VerticalAlignment="Center" 
                                HorizontalAlignment="Center" />
                        </Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup Name="CommonStates">

                                <!-- Here is where we define 
                            the disable animation -->
                                <!--控件有状态：Disabled，Normal等等-->
                                <VisualState Name="Disabled">
                                    <Storyboard>
                                        <ColorAnimation 
                                        Storyboard.TargetName="topBackground"
                                        Storyboard.TargetProperty="(Rectangle.Fill).(Color)"
                                        To="White" Duration="0:0:.5" />
                                        <ColorAnimation 
                                        Storyboard.TargetName="bottomBackground"
                                        Storyboard.TargetProperty="(Rectangle.Fill).(Color)"
                                        To="WhiteSmoke" Duration="0:0:0.5" />
                                        <ColorAnimation 
                                        Storyboard.TargetName="theBorder"
                                        Storyboard.TargetProperty="(TextBlock.Foreground).(Color)"
                                        To="Gray" Duration="0:0:0.5" />
                                    </Storyboard>
                                </VisualState>

                                <!-- Here is where the enabled animation 
                                is defined -->
                                <VisualState Name="Normal">
                                    <Storyboard>
                                        <ColorAnimation 
                                        Storyboard.TargetName="topBackground"
                                        Storyboard.TargetProperty="(Rectangle.Fill).Color"
                                        To="DarkGray" Duration="0:0:0.5" />
                                        <ColorAnimation 
                                        Storyboard.TargetName="bottomBackground"
                                        Storyboard.TargetProperty="(Rectangle.Fill).(Color)"
                                        To="Black" Duration="0:0:0.5" />
                                        <ColorAnimation 
                                        Storyboard.TargetName="theBorder"
                                        Storyboard.TargetProperty="(TextBlock.Foreground).Color"
                                        To="WhiteSmoke" Duration="0:0:0.5" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <CheckBox Grid.Row="0" Content="Enable Button" 
        Name="chkEnabled" IsChecked="True" VerticalAlignment="Center" />
    <!--此处通过IsEnabled来进行Disabled，Normal二者的切换-->
    <Button Grid.Row="1" Content="Test Button" Name="btnTest" 
    IsEnabled="{Binding ElementName=chkEnabled,Path=IsChecked}" 
    Style="{StaticResource AnimatedStyle}" Click="ButtonClick"/>
</Grid>

示例代码

https://github.com/zLulus/NotePractice/tree/dev3/WPF/WpfDemo/VisualStateManager