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

您的代码中存在两个问题。

首先，Module not found: Error: Cannot resolve 'file' or 'directory' ../appNonExistentFolder in D:\devel......附加属性应位于Page的根元素下。因此，您可以将webpackServer: { noInfo: false }置于根Hash: f4683f5fa2953dc3a97c Version: webpack 1.15.0 Time: 61ms webpack: Compiled successfully. webpack: Compiling... Hash: 18eef6f855c83434d040 Version: webpack 1.15.0 Time: 1086ms Asset Size Chunks Chunk Names tests.webpack.js 4.88 kB 0 [emitted] tests.webpack.js chunk {0} tests.webpack.js (tests.webpack.js) 269 bytes [rendered] [0] ./testing/tests.webpack.js 109 bytes {0} [built] [1] ./app \*.spec.js$ 160 bytes {0} [built] webpack: Compiled successfully.之下，如：

VisualStateManager.VisualStateGroups

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

因此您可以按以下方式更改代码。然后您的VisualStateManager应该能够正常工作。

Gird

为什么VisualStateManager不起作用？

1 个答案: