故事板狀態，轉場和可視性屬性

Question

我正在第一次玩Expression Blend。 我做了一個非常簡單的覆蓋網格，佔據了所有的屏幕空間。

<!-- phone application page --> 
<Grid x:Name="LayoutRoot"> 
    <Grid> 
     <Grid.RowDefinitions> 
     <RowDefinition /> 
     <RowDefinition /> 
     </Grid.RowDefinitions> 
    </Grid> 
    <TextBlock Grid.Row="0" Text="Some Content" /> 
    <TextBlock Grid.Row="1" Text="Some Other Content /> 
    <Grid x:Name="Overlay" Grid.RowSpan="2" Background="Black" Opacity="0" Visibility="Collapsed"> 
     <TextBlock Text="Loading..." /> 
     <toolkit:PerformanceProgressBar x:Name="ProgressBar" IsIndeterminate="False" /> 
    </Grid>  
</Grid> 

我要覆蓋電網有2種狀態：

• LoadingState進行
• NotLoadingState

其中 LoadingState進行：

• ProgressBar.IsIndeterminate =「真「
• 透明度=」 80"
• 能見度= 「可見」

NotLoadingState （基本上是它被設置爲在XAML默認）：

• ProgressBar.IsIndeterminate = 「假」
• 不透明度= 「0」
• 能見度= 「坍塌」

轉變之間的時間：0.5秒

我觸發狀態代碼隱藏這樣的：

private void VmPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) 
    { 
     if (e.PropertyName == ListViewModel.IsLoadingPropertyName) 
     { 
      if (_vm.IsLoading) 
      { 
       VisualStateManager.GoToState(this, LoadingStatePropertyName, true); 
      } 
      else 
      { 
       VisualStateManager.GoToState(this, NotLoadingStatePropertyName, true); 
      } 
     } 
    } 

然而，就這麼簡單上面的代碼看起來我沒能轉變工作。將狀態更改爲加載狀態工作，我得到一個不錯的不透明度動畫，但它不會反其道而行（LoadingState - > NotLoadingState） - 覆蓋網格消失，沒有任何動畫。我猜這是因爲可視性設置爲摺疊。我一直在嘗試在Expression Blend中提出一些東西，但目前爲止還沒有成功。

這裏的日請求生成的源：

<VisualStateManager.VisualStateGroups> 
    <VisualStateGroup x:Name="LoadingStateGroup"> 
     <VisualStateGroup.Transitions> 
      <VisualTransition From="LoadingState" GeneratedDuration="0" To="NotLoadingState"> 
       <Storyboard> 
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Overlay"> 
         <EasingDoubleKeyFrame KeyTime="0" Value="0.8"/> 
         <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/> 
        </DoubleAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Overlay"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <Visibility>Visible</Visibility> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
         <DiscreteObjectKeyFrame KeyTime="0:0:0.5"> 
          <DiscreteObjectKeyFrame.Value> 
           <Visibility>Collapsed</Visibility> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualTransition> 
      <VisualTransition From="NotLoadingState" GeneratedDuration="0" To="LoadingState"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Overlay"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <Visibility>Visible</Visibility> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
         <DiscreteObjectKeyFrame KeyTime="0:0:0.5"> 
          <DiscreteObjectKeyFrame.Value> 
           <Visibility>Visible</Visibility> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Overlay"> 
         <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 
         <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.795"/> 
        </DoubleAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualTransition> 
      <VisualTransition GeneratedDuration="0"/> 
     </VisualStateGroup.Transitions> 
     <VisualState x:Name="LoadingState"> 
      <Storyboard> 
       <DoubleAnimation Duration="0" To="0.795" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Overlay" d:IsOptimized="True"/> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Overlay"> 
        <DiscreteObjectKeyFrame KeyTime="0"> 
         <DiscreteObjectKeyFrame.Value> 
          <Visibility>Visible</Visibility> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
       </ObjectAnimationUsingKeyFrames> 
      </Storyboard> 
     </VisualState> 
     <VisualState x:Name="NotLoadingState"> 
      <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Overlay"> 
        <DiscreteObjectKeyFrame KeyTime="0"> 
         <DiscreteObjectKeyFrame.Value> 
          <Visibility>Collapsed</Visibility> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
       </ObjectAnimationUsingKeyFrames> 
       <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Overlay" d:IsOptimized="True"/> 
      </Storyboard> 
     </VisualState> 
    </VisualStateGroup> 
</VisualStateManager.VisualStateGroups> 

Answer 1

你需要的是流體佈局。它是專門爲解決這個問題而設計的。你可以閱讀更多here (good read, if a bit long)和相應的樣本是here。甚至有一個Windows Phone 7專用教程over here。

Answer 2

你是正確的，因爲過渡切換的知名度，所以你看不到動畫不透明度當即暈倒。

在Expression Blend中你可以做的是在兩個狀態之間創建一個自定義轉換，這可以讓你直接編輯轉換的故事板。然後，您應該能夠創建一個故事板，在轉換結束時爲動畫顯示提供動畫。

對不起，我不能給出更多關於如何使用Blend的指導，但我沒有安裝在這臺電腦上。