次の方法で共有

VisualState クラス

  • リファレンス

定義

名前空間:
Microsoft.UI.Xaml
編集

UI 要素が特定の状態にある場合の視覚的な外観を表します。 ビジュアル状態では 、セッター または ストーリーボード を使用して、 が定義されているページまたはコントロール テンプレート内の UI プロパティを 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です。 コードからの呼び出しを使用して手動で適用する必要があるそれぞれに VisualStatex:Name 属性をGoToState指定します。 StateTriggers を使用してマークアップから を自動的にトリガーVisualStateする場合は、その VisualState で x:Name 属性を指定する必要はありません。

視覚的な画面切り替えを使用する場合、 の VisualStatex: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 属性を指定する必要があります。これは stateName 、コントロール コンシューマーがそのビジュアル状態を使用するために GoToState 呼び出しで渡す値です。 VisualStateが VisualStateGroup の一部である場合は、属性値にも指定する必要があります。

コンストラクター

VisualState()

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

プロパティ

Dispatcher

常に Windows アプリ SDK アプリで を返しますnull。 代わりに DispatcherQueue を使用してください。

(継承元 DependencyObject)
DispatcherQueue

このオブジェクトが DispatcherQueue 関連付けられている を取得します。 は DispatcherQueue 、コードが 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)

適用対象

こちらもご覧ください