Как применить тот же VisualState ко многим элементам управления?

Question

Я пытаюсь узнать о VisualState в WPF.Я могу сделать простой VisualState в WPF.Но проблема в том, как я могу применить тот же 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

Спасибо.

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>