Windows 10開発-アダプティブUI

ユニバーサルWindowsプラットフォーム（UWP）アプリケーションは多くの異なるデバイスで実行でき、各デバイスには独自の入力形式、画面解像度、DPI密度、およびその他の固有の特性があります。

Windows 10では、新しいユニバーサルコントロール、レイアウトパネル、およびツールを使用して、アプリケーションを実行できるデバイスにUIを簡単に適合させることができます。たとえば、UWPアプリケーションがデスクトップコンピューター、モバイルデバイス、またはタブレットで実行されている場合、UIを調整して、さまざまな画面解像度、画面サイズ、DPI密度を活用できます。

Windows 10では、次の機能を使用してUIを複数のデバイスに簡単にターゲット設定できます-

ユニバーサルコントロールとレイアウトパネルを使用して、さまざまな画面解像度と画面サイズに合わせてUIを強化できます。
一般的な入力処理により、タッチパッド、ペン、マウス、キーボード、またはMicrosoft Xboxコントローラーなどのコントローラーを介して入力を受け取ることができます。
ツールを使用して、さまざまな画面解像度に適応できるアプリケーションUIを設計できます。
適応スケーリングは、デバイス間の解像度とDPIの違いに合わせて調整します。

Windows 10では、アプリケーションを任意の方法で簡単に配置、サイズ変更、および配置できます。また、ユーザーがアプリケーションを希望どおりに使用するための柔軟性をユーザーに提供します。 Windows 10では、UWPアプリケーションにレスポンシブテクニックを実装するさまざまな方法があるため、画面やウィンドウのサイズに関係なく、見栄えがよくなります。

VisualStateManager

Windows 10では、 VisualStateManager クラスには、UWPアプリケーションでレスポンシブデザインを実装できる2つの新しいメカニズムがあります。新しい VisualState.StateTriggers を使用すると、開発者はウィンドウの高さやウィンドウの幅などの特定の条件を確認でき、 VisualState.Setters APIはこれらの特定の条件に応じて視覚状態を定義します。

スタックパネルにいくつかのコントロールが追加されている以下の例を見てみましょう。

<Page
   x:Class = "UWPAdaptiveUI.MainPage"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "using:UWPAdaptiveUI"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d">

   <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 Text = "Windows 10 Tutorials: Text block 1. "
            Style = "{ThemeResource BodyTextBlockStyle}"/>

         <TextBlock Text = "Windows 10 Tutorials: Text block 2. "
            Style = "{ThemeResource BodyTextBlockStyle}"/>

         <TextBlock Text = "Windows 10 Tutorials: Text block 3. "
            Style = "{ThemeResource BodyTextBlockStyle}"/>

      </StackPanel>

   </Grid>

</Page>

*VisualStateManager* は、ウィンドウの幅に基づいてスタックパネルの向きを調整します。 幅が720以上の場合、方向は水平になります。そうでない場合、垂直のままになります。 上記のコードをコンパイルして実行すると、次のウィンドウが表示されます。このウィンドウには、垂直方向に3つのテキストブロックが含まれています。

ビジュアルステートマネージャー

上記のウィンドウの幅を変更すると、次のウィンドウが表示されます-

視覚状態マネージャーのサイズ変更

これで、テキストブロックが水平方向に並んでいることがわかります。

相対パネル

*RelativePanel* を使用して、要素間の空間的な関係を表現することでUI要素をレイアウトできます。 いくつかの長方形が相対パネルで作成される例を見てみましょう。

<Page
   x:Class = "UWPAdaptiveUI.MainPage"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "using:UWPAdaptiveUI"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d">

   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">

      <VisualStateManager.VisualStateGroups>

         <VisualStateGroup>

            <VisualState>

               <VisualState.StateTriggers>
                  <AdaptiveTrigger MinWindowWidth = "720"/>
               </VisualState.StateTriggers>

               <VisualState.Setters>
                  <Setter Target = "GreenRect.(RelativePanel.RightOf)"
                     Value = "BlueRect"/>
                  <Setter Target = "GreenRect.(RelativePanel.AlignRightWithPanel)"
                     Value = "True"/>
               </VisualState.Setters>

            </VisualState>

         </VisualStateGroup>

      </VisualStateManager.VisualStateGroups>

      <RelativePanel BorderBrush = "Gray" BorderThickness = "10">
         <Rectangle x:Name = "RedRect" Fill = "Red" MinHeight = "100"
            MinWidth = "100"/>

         <Rectangle x:Name = "BlueRect" Fill = "Blue" MinHeight = "100"
            MinWidth = "100" RelativePanel.RightOf = "RedRect"/>

         <!-- Width is not set on the green and yellow rectangles.
            It's determined by the RelativePanel properties. -->

         <Rectangle x:Name = "GreenRect" Fill = "Green" MinHeight = "100"
            RelativePanel.Below = "BlueRect" RelativePanel.AlignLeftWith = "RedRect"
            RelativePanel.AlignRightWith = "BlueRect"/>

         <Rectangle Fill = "Yellow" MinHeight = "100" RelativePanel.Below = "GreenRect"
            RelativePanel.AlignLeftWith = "BlueRect"
            RelativePanel.AlignRightWithPanel = "True"/>

      </RelativePanel>

   </Grid>

</Page>

上記のコードをコンパイルして実行すると、次のウィンドウが表示されます。

UWP Adaptive UI

上記のウィンドウのサイズを変更すると、下に示すように、緑色の長方形が青色の長方形の左側の一番上の行で調整されていることがわかります。

UWP Adaptive UI Rectangle

Windows10-development-adaptive-ui

Windows 10開発-アダプティブUI

VisualStateManager

相対パネル