ストーリーボードの状態、遷移および可視性

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"
• 可視性= "可視"

（それは、XAMLでデフォルトとして設定されている基本的にはどのような）NotLoadingState ：

• 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); 
      } 
     } 
    } 

上記のコードは、私が遷移を動作させることができなかった見た目ほど単純で。状態をLoadStateに変更すると、不透明アニメーションが得られますが、それ以外の方法では（LoadingState - > NotLoadingState）、オーバーレイグリッドがアニメーションなしで消えるだけです。 VisibilityがCollapsedに設定されているため、私はそれを推測しています。私は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では、2つの状態間のカスタムトランジションを作成することで、トランジションのストーリーボードを直接編集できます。そして、トランジションの最後に可視性をアニメーション化するストーリーボードを作成することができます。

申し訳ありません申し訳ありませんが、このコンピュータにBlendを使用する方法について詳しくは説明しませんが、私はこのコンピュータにインストールしていません。