如何将相同的VisualState应用于多个控件

本文关键字：应用于 控件 VisualState | 更新日期: 2023-09-27 18:15:53

我正在尝试学习WPF中的VisualState。我能够在WPF中制作一个简单的VisualState。但问题是我如何将相同的VisualState应用到其他控件。

这是我的示例VisualState代码。

<Grid x:Name="LayoutRoot" Background="{x:Null}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:1">
                    <ei:ExtendedVisualStateManager.TransitionEffect>
                        <ee:FadeTransitionEffect/>
                    </ei:ExtendedVisualStateManager.TransitionEffect>
                </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="MySate">
                <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Background).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock">
                        <EasingColorKeyFrame KeyTime="0" Value="#FFF31515"/>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <VisualStateManager.CustomVisualStateManager>
        <ei:ExtendedVisualStateManager/>
    </VisualStateManager.CustomVisualStateManager>
    <Grid Height="132" Margin="58,80,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="230">
        <TextBlock x:Name="textBlock" Margin="54,37,35,48" TextWrapping="Wrap" Text="TextBlock" Background="Black"/>
    </Grid>
    <Grid Height="132" Margin="58,80,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="230">
        <TextBlock x:Name="textBlock2" Margin="54,37,35,48" TextWrapping="Wrap" Text="TextBlock" Background="Black"/>
    </Grid>
    <Button x:Name="yyyyy" Content="Button" HorizontalAlignment="Right" Height="70" Margin="0,8,30,0" VerticalAlignment="Top" Width="148" Click="Clickbd"/>
</Grid>
c#: 

private void Clickbd(object sender, System.Windows.RoutedEventArgs e)
{
      VisualStateManager.GoToElementState(LayoutRoot, "MySate", true);
}

这个VisualState成功地为TextBlock控件工作。我想将这个VisualState应用于 textBlock2

谢谢。

如何将相同的VisualState应用于多个控件

您应该将您的VisualState添加到可以在不同控件之间共享的模板中。

我还没有测试过代码，但是像这样的代码应该可以奏效:

<Style TargetType="TextBlock">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="TextBlock">
        <VisualStateManager.VisualStateGroups>
          <VisualStateGroup x:Name="VisualStateGroup">
              <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0:0:1">
                      <ei:ExtendedVisualStateManager.TransitionEffect>
                          <ee:FadeTransitionEffect/>
                      </ei:ExtendedVisualStateManager.TransitionEffect>
                  </VisualTransition>
              </VisualStateGroup.Transitions>
              <VisualState x:Name="MySate">
                  <Storyboard>
                      <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Background).(SolidColorBrush.Color)" Storyboard.TargetName="contentPresenter">
                          <EasingColorKeyFrame KeyTime="0" Value="#FFF31515"/>
                      </ColorAnimationUsingKeyFrames>
                  </Storyboard>
              </VisualState>
          </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <VisualStateManager.CustomVisualStateManager>
          <ei:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager>
        <ContentPresenter x:Name="contentPresenter" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
相关文章：