VisualStateManager가 작동하지 않는 이유는 무엇입니까? 나를 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> 

, 그것은 정말 나를 괴롭게. 두 번째 Grid를 제거하면 XAML Designer에 오류가 표시되고 응용 프로그램을 실행하면 SliderProgress 및 TimeProgress hide가 표시됩니다.

Answer 1

코드에 두 가지 문제점이 있습니다.

먼저, VisualStateManager.VisualStateGroups 첨부 속성은 Page의 루트 요소 아래에 있어야합니다. 그래서 당신은 루트 Gird 같은 아래 VisualStateManager를 넣을 수 있습니다 :

<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>