如何使用 VisualStateManager 隐藏 XAML TextBlock？答案

【问题标题】：How to hide XAML TextBlock with VisualStateManager?如何使用 VisualStateManager 隐藏 XAML TextBlock？
【发布时间】：2014-12-13 14:50:55
【问题描述】：

我想根据页面视觉状态隐藏一个 TextBlock。我使用 VisualStateManager 来更改状态，效果很好。但是我隐藏 TextBlock 的代码却没有。附加问题：如果两个状态共享相同的指令（如 Narrow 和 Snapped），有没有办法不再编写相同的 ObjectAnimationUsingKeyFrames-tags，从而减少维护的代码量？谢谢

<TextBlock x:Name="Title" FontSize="20" FontWeight="SemiLight" Margin="12,0,0,1"
                                   Text="{Binding TitleTextBlockText}" VerticalAlignment="Center">
                            <VisualStateManager.VisualStateGroups>
                                <!-- Visual states reflect the application's window size -->
                                <VisualStateGroup>
                                    <VisualState x:Name="DefaultLayout">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                           Storyboard.TargetName="Title">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        Visibility.Visible
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                           Storyboard.TargetName="Title">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        Visibility.Visible
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="FullScreenLandscape">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                           Storyboard.TargetName="Title">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        Visibility.Visible
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="FullScreenPortrait">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                           Storyboard.TargetName="Title">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        Visibility.Visible
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Filled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                           Storyboard.TargetName="Title">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        Visibility.Visible
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="Snapped">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                           Storyboard.TargetName="Title">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        Visibility.Collapsed
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Narrow">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                           Storyboard.TargetName="Title">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        Visibility.Collapsed
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </TextBlock>

【问题讨论】：

标签： xaml visualstatemanager visualstates

【解决方案1】：

如果你想这样做（例如在自定义控件的模板中），你应该将 textbloc 包装到网格中。您不能像这样为对象设置动画，因为视觉状态管理器不能位于将由视觉状态管理器本身设置动画的对象内部。在控件的通用模板中，如下所示：

 <ControlTemplate TargetType="{x:Type local:NumericField}">
          <Grid>
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup Name="ValidationStates">
                <VisualState Name="Good">
                  <!-- do your things -->
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <Border x:Name="ValidationBorderPart"
                    BorderBrush="Black"
                    BorderThickness="1">
              <TextBox x:Name="ValuePart"
                       Foreground="Black"
                       BorderBrush="Transparent"
                       BorderThickness="0"
                       Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:NumericField}},Path=Representation, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" />
            </Border>

          </Grid>
        </ControlTemplate>

【讨论】：