如何将同一视觉状态应用于多个控件？

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控件。我想将此VisualState应用于textBlock2。

谢谢。

- Vero009

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>

- madd0

---

你能给我一个例子吗？ - Vero009

我刚刚注意到，当我的手指写下“TextBlock”时，我的大脑正在思考“TextBox”，因此上面的代码可能需要修改才能按预期工作。 - madd0