Question

在我的CustomControl中，我正在使用像这样的VisualStateManager：

...
<ControlTemplate TargetType="{x:Type local:MyCustomControl}">
    <Grid x:Name="rootGrid" >
        <Grid.RowDefinitions>
            <RowDefinition Height="65"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="toggleRegionContent"
                                         Storyboard.TargetProperty="Height"
                                         From="0"
                                         To="{TemplateBinding ContentHeight}"
                                         Duration="0:0:.7" />
                        <DoubleAnimation Storyboard.TargetName="arrowIcon"
                                         Storyboard.TargetProperty="(Path.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
                                         From="0"
                                         To="180"
                                         Duration="0:0:.1" />
                        </Storyboard>
                <VisualState>
                <!-- Some other States -->
            </VisualStateGroup>
        </VisualStateManager>
    <ToggleButton>
<!-- The Rest of the Control -->

我现在的问题是如何处理事件检查或处理它。单击ToggleButton时，VisualStateManager是否自动切换状态。或者我必须给我的ToggleButton一个Checked事件并在Code Behind中指定Button的状态，如下所示：

VisualStateManager.GoToElementState(Control, "Checked", true);

感谢您的帮助。

Answer 1

或者我必须给我的ToggleButton一个Checked事件并在Code Behind中指定Button的状态，如下所示：

是的，您的自定义控件负责使用VisualStateManager类及其GoToState方法设置控件的当前可视状态。

您可以在MSDN上阅读有关此内容的更多信息：https://msdn.microsoft.com/en-us/library/ee330302(v=vs.110).aspx

Answer 2

您必须使用GoToStateAction行为或DataStateBehavior来切换状态。

如果您只在2个状态之间切换，那么DataStateBehavior很不错。如果你想在多个状态之间切换，GoToStateAction很不错。

首先，这是一个使用DataStateBehavior的非常简单的示例。我在复选框点击时切换矩形的颜色。

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="MyStates">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.3"
                                  To="Checked">
                    <VisualTransition.GeneratedEasingFunction>
                        <CubicEase EasingMode="EaseInOut" />
                    </VisualTransition.GeneratedEasingFunction>
                </VisualTransition>
                <VisualTransition GeneratedDuration="0:0:0.3"
                                  To="Unchecked">
                    <VisualTransition.GeneratedEasingFunction>
                        <CubicEase EasingMode="EaseInOut" />
                    </VisualTransition.GeneratedEasingFunction>
                </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Checked">
                <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                                  Storyboard.TargetName="myRect">
                        <EasingColorKeyFrame KeyTime="0"
                                             Value="#FF6F6FFF" />
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Unchecked" />
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <i:Interaction.Behaviors>
        <ei:DataStateBehavior Binding="{Binding IsChecked, ElementName=myCheckBox}"
                              Value="True"
                              TrueState="Checked"
                              FalseState="Unchecked" />
    </i:Interaction.Behaviors>
    <Rectangle x:Name="myRect"
               Fill="#FFF4F4F5"
               HorizontalAlignment="Left"
               Margin="43.166,74.07,0,153.968"
               Stroke="Black"
               Width="104.438" />
    <CheckBox x:Name="myCheckBox"
              Content="CheckBox"
              Height="20.776"
              Margin="239.69,88.668,192.524,0"
              VerticalAlignment="Top" />

</Grid>

以下是使用GoToStateAction的示例。我只是根据正在检查的复选框更改矩形颜色。

    <Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="MyStates">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.3"
                                  To="Checked">
                    <VisualTransition.GeneratedEasingFunction>
                        <CubicEase EasingMode="EaseInOut" />
                    </VisualTransition.GeneratedEasingFunction>
                </VisualTransition>
                <VisualTransition GeneratedDuration="0:0:0.3"
                                  To="Unchecked">
                    <VisualTransition.GeneratedEasingFunction>
                        <CubicEase EasingMode="EaseInOut" />
                    </VisualTransition.GeneratedEasingFunction>
                </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Checked">
                <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                                  Storyboard.TargetName="myRect">
                        <EasingColorKeyFrame KeyTime="0"
                                             Value="#FF6F6FFF" />
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Unchecked" />
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Rectangle x:Name="myRect"
               Fill="#FFF4F4F5"
               HorizontalAlignment="Left"
               Margin="43.166,74.07,0,153.968"
               Stroke="Black"
               Width="104.438" />
    <CheckBox x:Name="myCheckBox"
              Content="CheckBox"
              Height="20.776"
              Margin="239.69,88.668,192.524,0"
              VerticalAlignment="Top">
        <i:Interaction.Triggers>
            <ei:DataTrigger Binding="{Binding IsChecked, ElementName=myCheckBox}"
                            Value="True">
                <ei:GoToStateAction StateName="Checked" />
            </ei:DataTrigger>
            <ei:DataTrigger Binding="{Binding IsChecked, ElementName=myCheckBox}"
                            Value="False">
                <ei:GoToStateAction StateName="Unchecked" />
            </ei:DataTrigger>
        </i:Interaction.Triggers>
    </CheckBox>

</Grid>

编辑：确保添加对Blend SDK的引用，以使上述方法起作用。

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

WPF / XAML VisualStateManager谁处理事件？

2 个答案: