VisualState クラス

定義

名前空間:

Windows.UI.Xaml

UI 要素が特定の状態にある場合の視覚的な外観を表します。 ビジュアル状態では 、Setters または Storyboard を使用して、VisualState が定義されているページまたはコントロール テンプレート内の UI プロパティを設定します。

public ref class VisualState sealed : DependencyObject

/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
/// [Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
class VisualState final : DependencyObject

[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
[Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
public sealed class VisualState : DependencyObject

Public NotInheritable Class VisualState
Inherits DependencyObject

<VisualState x:Name="stateName" />
-or-
<VisualState x:Name="stateName">
  singleStoryboard
</VisualState>
-or-
<VisualState x:Name="stateName">
  <VisualState.Setters>
    oneOrMoreSetters
  </VisualState.Setters>
  [optional]singleStoryboard
</VisualState>
-or-
<VisualState x:Name="stateName">
  <VisualState.StateTriggers>
    oneOrMoreTriggers
  </VisualState.StateTriggers>  
  <VisualState.Setters>
    oneOrMoreSetters
  </VisualState.Setters>
  [optional]singleStoryboard
</VisualState>

継承

Object Platform::Object IInspectable DependencyObject VisualState

属性

ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Windows の要件

デバイス ファミリ	Windows 10 (10.0.10240.0 で導入)
API contract	Windows.Foundation.UniversalApiContract (v1.0 で導入)

例

この例では、"CommonStates" という名前の Button の ControlTemplate に VisualStateGroup を作成し、状態 "Normal"、"Pressed"、および "PointerOver" の VisualState オブジェクトを追加します。 Button では、VisualStateGroup という名前の "CommonStates" にある "Disabled" という状態も定義されていますが、簡潔にするために省略しています。

<ControlTemplate TargetType="Button">
  <Border x:Name="RootElement">

    <VisualStateManager.VisualStateGroups>

      <!--Define the states for the common states.
          The states in the VisualStateGroup are mutually exclusive to
          each other.-->
      <VisualStateGroup x:Name="CommonStates">

        <!--The Normal state is the state the button is in
            when it is not in another state from this VisualStateGroup.-->
        <VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, BorderBrush, to red when the
            Pointer is over the button.-->
        <VisualState x:Name="PointerOver">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                              Storyboard.TargetProperty="Color" To="Red" />

          </Storyboard>

        </VisualState>

        <!--Change the SolidColorBrush, BorderBrush, to Transparent when the
            button is pressed.-->
        <VisualState x:Name="Pressed">
          <Storyboard >
            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                              Storyboard.TargetProperty="Color" To="Transparent"/>
          </Storyboard>
        </VisualState>
          <!--The Disabled state is omitted for brevity.-->
        </VisualStateGroup>
  
    </VisualStateManager.VisualStateGroups>
    

    <Border.Background>
      <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
    </Border.Background>

    <Grid Background="{TemplateBinding Background}" Margin="4">
      <ContentPresenter
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
        Margin="4,5,4,4" />

    </Grid>


  </Border>
</ControlTemplate>

<Page>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!-- VisualState to be triggered when window width is >=720 effective pixels -->
                        <AdaptiveTrigger MinWindowWidth="720"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="myPanel.Orientation" Value="Horizontal"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel x:Name="myPanel" Orientation="Vertical">
            <TextBlock x:Name="myTextBlock" MaxLines="5" Style="{ThemeResource BodyTextBlockStyle}"/>
        </StackPanel>
    </Grid>
</Page>

注釈

VisualState 要素は、常に XAML マークアップの VisualStateGroup 親内に含まれている必要があります。 VisualStateGroup には暗黙的なコレクション プロパティ States があるため、各 VisualState を VisualStateGroup 親の直接の子要素として配置できます。 次に例を示します。

<VisualStateGroup x:Name="CommonStates">
   <VisualState x:Name="Normal"/>
   <VisualState x:Name="PointerOver">...</VisualState>
<!-- do not need explicit VisualStateGroups.States property element, States is the XAML content property-->
</VisualStateGroup>

StateTriggers を使用する場合は、トリガーが自動的に有効になるように、ルートの最初の子の下で VisualStateGroup が宣言されていることを確認します。

既定の状態

x:Name 属性を持ち、ストーリーボードでは何も指定しない VisualState を定義することは有効で一般的です。 このような VisualState では、既定のテンプレートに存在する値が使用されるため、これは便利です。 その後、 GoToState 呼び出しから空の状態を具体的に要求できます。 空の状態が現在の状態になると、同じ VisualStateGroup から以前のビジュアル状態によって行われたテンプレート プロパティに対するすべての変更が取り消されます。 表示状態にグループを使用する方法の詳細については、「表示状態の ストーリーボード付きアニメーション」を参照してください。

StateTriggers を使用する場合、空の VisualState を作成して GoToState を呼び出す必要がなくなります。 StateTrigger の条件が満たされなくなった場合、対応する VisualState によって行われたプロパティに対するすべての変更が自動的に削除され、既定のマークアップで指定された値が有効になります。

VisualState と x:Name

GoToState メソッド (通常はコントロール コードから呼び出されます) には、現在の状態として使用する必要がある状態を VisualStateManager に通知するために stateName パラメーターが必要です。 コードからの GoToState 呼び出しを使用して手動で適用する必要がある各 VisualState に x:Name 属性を指定します。 StateTriggers を使用してマークアップから VisualState を自動的にトリガーする場合は、その VisualState に x:Name 属性を指定する必要はありません。

ビジュアル画面切り替えを使用する場合、VisualState の x:Name 属性値も VisualTransition の From または To 値によって参照されます。 この場合、名前は 、VisualTransition が間の中間値を提供する状態を識別します。

VisualState に指定する x:Name 属性値 は、VisualState が存在するコントロール テンプレート XAML 内で一意である必要があります。 状態名のスコープは、 VisualStateGroup ごとにスコープ設定されるだけでなく、テンプレート内のすべてのビジュアル状態にスコープ設定されます。 たとえば、同じテンプレート XAML で "Focused" という名前の 2 つの異なる状態を定義することはできません (異なるグループに存在する場合でも)。

表示状態またはビジュアル状態グループに名前を付けるには、 x:Name 属性 を使用する必要があります。未修正の属性 "Name" は機能しません。 VisualState と VisualStateGroup はそれぞれ Name プロパティを持っていますが、これらは読み取り専用です。 この Name プロパティは、XAML からの設定ではなく、実行時にコントロール テンプレートのコンテンツを調べるためにコードを使用する高度なシナリオに存在します。

既存のコントロールのコントロール テンプレートを置き換える

アプリ UI でコントロールを使用しているアプリ開発者は、 Control.Template プロパティを別の値に設定することで、コントロール テンプレートを置き換えることができます。 または、そのコントロールの暗黙的なスタイル キーを使用する新しいスタイルを宣言することで、テンプレートを置き換えることができます。 これらの概念の詳細については、「 クイック スタート: コントロール テンプレート」を参照してください。

コントロール テンプレートを置き換える場合は、XAML で元のコントロール テンプレートの VisualStateManager.VisualStateGroups コンテンツから既存のすべての名前付き VisualState 要素を再現することが重要です。 (変更していない) コントロール コードが GoToState を呼び出しています。 これらの名前を持つ状態は、コントロール テンプレートに存在する必要があります。 不足している VisualState の要求では例外はスローされませんが、多くの場合、コントロールは視覚的な状態のままになり、ユーザーにとって混乱を招く可能性があります。 たとえば、 CheckBox コントロールに "Checked" という名前の VisualState を指定しない場合、ユーザーがコントロールを選択しても視覚的なフィードバックは表示されません。 ユーザーは、チェックされた CheckBox とチェックされていない CheckBox を区別するために、視覚的に異なるものがあることを期待 します。 そのため、アプリ開発者側のビジュアル状態を再現できないと、コントロールがユーザーに壊れているように見えます。

Microsoft Visual Studio などの IDE を使用する場合、コントロール テンプレートを置き換えるために使用するアクションには、元のテンプレート XAML のコピーから始めるオプションが用意されているため、置き換える元の VisualState 要素とその他のコントロール構成をすべて確認できます。 テンプレート のコピーから始めて、新しいテンプレートから予期される表示状態を誤って省略しないように変更することをお勧めします。

カスタム コントロールの名前付きビジュアル状態の属性

コントロール テンプレート XAML でビジュアル状態を持つカスタム コントロールを定義する場合は、コントロール クラスを属性化して、使用可能なビジュアル状態をコンシューマーに制御することを示すのがベスト プラクティスです。 これを行うには、コントロール定義コードのクラス レベルで 1 つ以上の TemplateVisualState 属性を適用します。 各属性では、状態の x:Name 属性を指定する必要があります。これは、コントロール コンシューマーがそのビジュアル状態を使用するために GoToState 呼び出しで渡す stateName 値です。 VisualState が VisualStateGroup の一部である場合は、属性値にも指定する必要があります。

コンストラクター

VisualState()

VisualState クラスの新しいインスタンスを初期化します。

プロパティ

Dispatcher	このオブジェクトが関連付けられている CoreDispatcher を取得します。 CoreDispatcher は、コードが UI 以外のスレッドによって開始された場合でも、UI スレッド上の DependencyObject にアクセスできる機能を表します。 (継承元 DependencyObject)
Name	VisualState の名前を取得します。
Setters	この VisualState が適用されたときに UIElementの外観を制御する個別のプロパティ値を定義する Setter オブジェクトのコレクションを取得します。
StateTriggers	この VisualState をいつ適用するかを示す StateTriggerBase オブジェクトのコレクションを取得します。 トリガーの一部がアクティブでない場合は、VisualState が適用されます。
Storyboard	このビジュアル状態を使用している場合に、コントロールの状態固有のプロパティ値と外観を定義する ストーリーボード を取得または設定します。

メソッド

ClearValue(DependencyProperty)	依存関係プロパティのローカル値をクリアします。 (継承元 DependencyObject)
GetAnimationBaseValue(DependencyProperty)	依存関係プロパティに対して確立された基本値を返します。これは、アニメーションがアクティブでない場合に適用されます。 (継承元 DependencyObject)
GetValue(DependencyProperty)	DependencyObject から依存関係プロパティの現在の有効な値を返します。 (継承元 DependencyObject)
ReadLocalValue(DependencyProperty)	ローカル値が設定されている場合は、依存関係プロパティのローカル値を返します。 (継承元 DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)	この DependencyObject インスタンスの特定の DependencyProperty に対する変更をリッスンするための通知関数を登録します。 (継承元 DependencyObject)
SetValue(DependencyProperty, Object)	DependencyObject の依存関係プロパティのローカル値を設定します。 (継承元 DependencyObject)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)	RegisterPropertyChangedCallback を呼び出して以前に登録した変更通知を取り消します。 (継承元 DependencyObject)

こちらもご覧ください

• DependencyObject
• VisualStateGroup
• 表示状態用にストーリーボードに設定されたアニメーション
• ストーリーボードに設定されたアニメーション
• x:Name 属性
• クイック スタート: コントロール テンプレート
• XAML コントロールとアプリのスタイル設定のサンプル
• マスター/詳細サンプル (Windows 10)