3

Windows 10 アプリのレスポンシブ デザイン ガイドでは、レスポンシブ デザインの手法、特に特定のサイズ クラスのデザイン ブレークポイントの使用について説明しています。

特定のサイズ クラスのブレークポイントを設計する

Windows 10 エコシステム全体のデバイス ターゲットと画面サイズの数は多すぎて、それぞれの UI の最適化について心配することはできません。代わりに、320、720、および 1024 epx のいくつかのキー幅 (「ブレークポイント」とも呼ばれます) を設計することをお勧めします。

参照: https://msdn.microsoft.com/en-us/library/windows/apps/dn958435.aspx#sizeclasses

この記事では、レスポンシブ デザインとデザイン ブレークポイントの一般的な概念について説明します。HTML と CSS のメディア クエリから、これらの概念については既によく知っています。しかし、XAML でそれを行う方法がわかりません。

Windows 10 とデザイン ブレークポイントを検索しても、必要な情報が得られません。正しい方向を教えてもらえますか?

4

2 に答える 2

7

特定のサイズ クラスのデザイン ブレークポイントは単なる概念であり、懸念すべき重要なサイズを提供するための推奨事項です。Justin が述べたように、これを達成するための非常に簡単な方法の 1 つは、視覚状態トリガーを使用して、最小ウィンドウ幅に基づいて UI の変更をトリガーすることです。すぐに使用できるAdaptiveTriggerという状態トリガーがあります。他にも使用可能なオープン ソースの状態トリガーがありますが、AdaptiveTrigger は、XAML でさまざまな幅またはブレークポイントに対応するために必要なものです。非常に簡単な例を次に示します。

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="AdaptiveSizesVisualStateGroup">
        <VisualState x:Name="Large">
            <!-- VisualState to be triggered when window width is >=1024 effective pixels -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="1024" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MySplitView.IsPaneOpen" Value="True" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Medium">
            <!-- VisualState to be triggered when window width is >=720 and < 1024 effective pixels -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="720" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MySplitView.IsPaneOpen" Value="False" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Small">
            <!-- VisualState to be triggered when window width is >=320 and < 720 effective pixels -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="320" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MySplitView.IsPaneOpen" Value="False" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Minimum">
            <!-- VisualState to be triggered when window width is >=0 and < 320 effective pixels -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MySplitView.IsPaneOpen" Value="False" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

ウィンドウ幅ごとに異なる表示状態を使用したことがわかります。AdaptiveTrigger は、ウィンドウ サイズが変更されたことを実際に認識し、視覚状態グループ内の特定の視覚状態をトリガーするオブジェクトです。表示状態がアクティブになると、セッターを使用して、XAML のさまざまなターゲット オブジェクトにさまざまな値を設定します。私のコード例では、>= 1024 有効ピクセルの場合を除き、すべての幅で SplitView ペインを閉じたままにしています。

現在、AdaptiveTriggers は簡単に使用できますが、視覚的な状態ごとに多数のセッターを使用して XAML コードを乱雑にするのは非常に簡単であり、そのコードを維持するのは難しい場合があります。ダミー サンプル用に作成した XAML の量を見てください。また、電話とデスクトップの間で UI に大きな違いが必要になる可能性があるため、最善の策は、特定のデバイス ファミリ用に調整された特定の XAML ビューを作成することになる可能性があり、内部に AdaptiveTriggers を含めることもできます...

于 2015-08-15T13:58:29.820 に答える
0

上記の回答に加えて、新しいアダプティブ トリガーの簡単な紹介を以下に示します。これらを初めて使用する場合は、この例がゼロから完全に開始されるため、このリンクが役立つ場合があります。 http://jamesqquick.com/windows-10-adaptive-triggers-intro/

于 2015-08-25T21:27:07.390 に答える