为什么 VisualStateManager 不起作用？

Question

<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 Designer 会显示错误，当我运行应用程序时，它将显示 SliderProgress 和 TimeProgress 隐藏。

Answer 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 is Visibility, an enumeration. To animate values that are enumerations, you must use a 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>

为什么 VisualStateManager 不起作用？

Why the VisualStateManager didn't work?

xaml

uwp

uwp-xaml

visualstatemanager