爲什麼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沒有工作，這真的困擾我。如果我刪除第二個Grid，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屬性值類型爲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>