Windows10開発-アダプティブUI

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

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

Windows 10では、次の機能を使用してUIを複数のデバイスに簡単にターゲティングできます-

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

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

VisualStateManager

Windows 10では、 VisualStateManagerクラスには2つの新しいメカニズムがあり、UWPアプリケーションにレスポンシブデザインを実装できます。新しい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>

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

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