为什么 VisualStateManager 不起作用？答案

【问题标题】：Why the VisualStateManager didn't work?为什么 VisualStateManager 不起作用？
【发布时间】：2017-04-29 01:02:35
【问题描述】：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   <Grid>
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="auto"/>
           <ColumnDefinition Width="*"/>
           <ColumnDefinition Width="auto"/>`enter code here`
       </Grid.ColumnDefinitions>
       <VisualStateManager.VisualStateGroups>
           <VisualStateGroup>
               <VisualState x:Name="Narrow">
                   <VisualState.StateTriggers>
                       <AdaptiveTrigger MinWindowWidth="0"/>
                   </VisualState.StateTriggers>
                   <VisualState.Setters>
                       <Setter Target="SliderProgress.Visibility" Value="Collasped"/>
                       <Setter Target="TimeProgress.Visibility" Value="Visible"/>
                       <Setter Target="btnPlayList.Visibility" Value="Collasped"/>
                   </VisualState.Setters>
               </VisualState>
               <VisualState x:Name="Wide">
                   <VisualState.StateTriggers>
                       <AdaptiveTrigger MinWindowWidth="600"/>
                   </VisualState.StateTriggers>
                   <VisualState.Setters>
                       <Setter Target="SliderProgress.Visibility" Value="Visible"/>
                       <Setter Target="TimeProgress.Visibility" Value="Collapsed"/>
                       <Setter Target="btnPlayList.Visibility" Value="Visible"/>
                   </VisualState.Setters>
               </VisualState>
           </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>
       <Image Grid.Column="0" 
              Height="70" 
              Width="70"/>
       <!--PlayProgress-->
       <StackPanel Grid.Column="1"
                   Margin="10,0,0,0">
           <TextBlock Text="Title"/>
           <Slider Name="SliderProgress"
                   Visibility="Collapsed"/>
           <StackPanel Orientation="Horizontal"
                       Margin="10,10,0,0"
                       Name="TimeProgress"
                       Visibility="Visible">
               <TextBlock Name="CurrentTime"
                          Text="CurrentTime"/>
               <TextBlock Text=" / "/>
               <TextBlock Name="TotleTime"
                          Text="TotleTime"/>
           </StackPanel>
       </StackPanel>
       <!--PlayProgress Over-->
       <!--PlayControlButton-->
       <StackPanel Grid.Column="2" 
                   Orientation="Horizontal"
                   Grid.ColumnSpan="1">
           <Button Style="{StaticResource CtrlButton}"
                   Content="&#xE0E2;">
           </Button>
           <Button Style="{StaticResource CtrlButton}"
                   Content="&#xE102;">
           </Button>
           <Button Style="{StaticResource CtrlButton}"
                   Content="&#xE0E3;">
           </Button>
           <Button Name="btnPlayList"
                   Style="{StaticResource CtrlButton}"
                   Content="&#xE142;"
                   Visibility="Collapsed">
           </Button>
       </StackPanel>
       <!--PlayControlButton Over-->
   </Grid>

请帮助我理解为什么 VisualStateManager 不起作用，这真的让我很困扰。如果我删除第二个网格，XAML 设计器会显示一个错误，当我运行应用程序时，它将显示 SliderProgress 和 TimeProgress 隐藏。

【问题讨论】：

标签： xaml uwp uwp-xaml visualstatemanager

【解决方案1】：

你的代码有两个问题。

首先，VisualStateManager.VisualStateGroups 附加属性应位于 Page 的根元素下。所以你可以把你的VisualStateManager 放在根Gird 下，比如：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Narrow">
                ...
            </VisualState>
            <VisualState x:Name="Wide">
                ...
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid>
        ...
    </Grid>
</Grid>

其次，Visibility的属性值类型是Visibility，一个枚举。要为枚举值设置动画，您必须使用DiscreteObjectKeyFrame。（您也可以将此技术用于布尔值）。

因此您可以按以下方式更改您的代码。那么你的VisualStateManager 应该可以工作了。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Narrow">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SliderProgress" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="TimeProgress" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="btnPlayList" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Wide">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="600" />
                </VisualState.StateTriggers>
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SliderProgress" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="TimeProgress" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="btnPlayList" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid>
        ...
    </Grid>
</Grid>

【讨论】：