VisualState クラス

定義

public ref class VisualState sealed : DependencyObject

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

[Microsoft.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
[Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.WinUIContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
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

属性

ContentPropertyAttribute ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

例

この例では、"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 を使用する場合、GoToState を呼び出すために空のVisualStateを作成する必要がなくなりました。 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 コントロール テンプレート」を参照してください。

コントロール テンプレートを置き換えるときは、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 の一部である場合は、属性値にも指定する必要があります。

こちらもご覧ください

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