VisualState.Storyboard プロパティ

定義

名前空間:

Microsoft.UI.Xaml

この表示状態を使用している場合に、状態固有のプロパティ値とコントロールの外観を定義する ストーリーボード を取得または設定します。

public:
 property Storyboard ^ Storyboard { Storyboard ^ get(); void set(Storyboard ^ value); };

Storyboard Storyboard();

void Storyboard(Storyboard value);

public Storyboard Storyboard { get; set; }

var storyboard = visualState.storyboard;
visualState.storyboard = storyboard;

Public Property Storyboard As Storyboard

<VisualState>
  singleStoryboard
</VisualState>

プロパティ値

Storyboard

この VisualState が現在の表示状態として使用されるときに、コントロールに適用するプロパティの変更を定義するストーリーボード。

例

この例では、1 つのグリッドを含むボタンの単純な ControlTemplate を作成します。 x:Name 属性値が "PointerOver" の VisualState にはストーリーボードがあり、ユーザーがポインターをButtonの上に置くと、ボタンコンテンツ (Grid) の色が緑色から赤に変更されます。 x:Name 属性値が "Normal" の VisualState が含まれるため、ユーザーがポインターをボタンから移動すると、Gridの背景が緑色に戻ります。

<ControlTemplate TargetType="Button">
  <Grid >
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">

        <VisualStateGroup.Transitions>

          <!--Take one half second to transition to the PointerOver state.-->
          <VisualTransition To="PointerOver" 
                              GeneratedDuration="0:0:0.5"/>
        </VisualStateGroup.Transitions>
        
        <VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, ButtonBrush, to red when the
            Pointer is over the button.-->
        <VisualState x:Name="PointerOver">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="ButtonBrush" 
                            Storyboard.TargetProperty="Color" To="Red" />
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.Background>
      <SolidColorBrush x:Name="ButtonBrush" Color="Green"/>
    </Grid.Background>
  </Grid>
</ControlTemplate>

注釈

Storyboard プロパティの値は、nullまたは単一のStoryboard オブジェクトです。 Storyboardはアニメーションのコンテナーに似ています。1 つ以上のアニメーション定義を含めることができます。 このような各アニメーションは、特定の名前付きターゲットの特定の依存関係プロパティをターゲットにすることができます。 名前付きターゲットは、テンプレート自体で 定義された Name または x:Name 属性値 を持つコントロール テンプレート内の要素である必要があります。 依存関係プロパティは、そのオブジェクトのオブジェクト モデルに存在するプロパティ、または添付プロパティである必要があります。 アニメーションをターゲットにするには、 Storyboard.TargetName および Storyboard.TargetProperty 添付プロパティを使用します。 XAML 構文を使用してアニメーションを定義する方法と、使用できるアニメーションの種類の詳細については、「 ストーリーボードに設定されたアニメーション」を参照してください。

レイアウトに影響するアニメーションは依存する可能性のあるアニメーションであり、 コントロールが VisualState を読み込むと、コントロールのユーザーにパフォーマンスの影響を与える可能性があります。

こちらもご覧ください

• Storyboard
• ストーリーボード化されたアニメーション
• XAML コントロール テンプレート
• XAML コントロールとアプリのスタイル設定のサンプル