c# - 如何将相同的 VisualState 应用于多个控件？

Question

我正在尝试了解 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 控件。我想在 textBlock2

上应用这个 VisualState

谢谢。

Answer 1

您应该将您的 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>