uwp
適応UI

AdaptiveTriggerを使用してUIレイアウトを変更する

UWPアプリケーションは、ウィンドウモードと複数のデバイスで実行できます。ローエンドの携帯電話から巨大なサーフェスハブ画面まで幅広い画面サイズで表示できます。相対的な配置を使用すると多くのシナリオで十分ですが、ウィンドウのサイズが大きくなると、ページのコントロールを別の場所に移動することによってレイアウトを完全に変更することは常に面白いです。

このサンプルでは、​​狭い画面では縦向きのレイアウトを使用し、ワイドスクリーンでは横向きのレイアウトを使用します。巨大なワイドスクリーンでは、アイテムのサイズも変更します。

<Border x:Name="item2"
        Background="Aquamarine"
        Width="50"
        Height="50">
    <TextBlock Text="Item 2"
               VerticalAlignment="Center"
               HorizontalAlignment="Center" />
</Border>

<Border x:Name="item3"
        Background="LightCoral"
        Width="50"
        Height="50">
    <TextBlock Text="Item 3"
               VerticalAlignment="Center"
               HorizontalAlignment="Center" />
</Border>

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>

        <VisualState x:Name="ultrawide">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="800" />
            </VisualState.StateTriggers>

            <VisualState.Setters>
                <Setter Target="mainPanel.Orientation" Value="Horizontal" />
                <Setter Target="item1.Width" Value="100" />
                <Setter Target="item1.Height" Value="100" />
                <Setter Target="item2.Width" Value="100" />
                <Setter Target="item2.Height" Value="100" />
                <Setter Target="item3.Width" Value="100" />
                <Setter Target="item3.Height" Value="100" />
            </VisualState.Setters>
        </VisualState>

        <VisualState x:Name="wide">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="600" />
            </VisualState.StateTriggers>

            <VisualState.Setters>
                <Setter Target="mainPanel.Orientation" Value="Horizontal" />
            </VisualState.Setters>
        </VisualState>

        <VisualState x:Name="narrow" />
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

ウィンドウのサイズが変更されると、現在のウィンドウの幅がAdaptiveTriggerの最小幅と比較されます。現在の幅が最小幅よりも大きいか等しい場合、トリガーがアクティブになり、対応するVisualStateが表示されます。

さまざまな状態の出力がここにあります

狭い

ワイド

ウルトラウェイド