UWPアプリで画面をプログラム的に適応させる方法は？

Question

私は、UWPアプリケーションでどのようにプログラム適応的な画面を作成する方法を見つけようとしていますが、関連するアイディアを得ることはできません。

Answer 1

アダプティブトリガは、アプリケーションのサイズに基づいてレイアウトを変更する最適なソリューションです。例については、https://www.microsoft.com/en-gb/developers/articles/week03aug15/designing-with-adaptive-triggers-for-windows-10/を参照してください。

二つのボタンのための簡単な例：アプリが600個のピクセルよりも広い

<Grid> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState x:Name="Narrow"> 
      </VisualState> 
      <VisualState x:Name="Wide"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="600" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="TestButton2.Visibility" Value="Visible" /> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <StackPanel> 
     <Button x:Name="TestButton" Content="Test button" /> 
     <Button x:Name="TestButton2" Content="Test button" Visibility="Collapsed" /> 
    </StackPanel> 
</Grid> 

たら、第二ボタンが見えるようになります。

他のアプローチ

あなたは、ユーザーがページのサイズを変更するたびに発射されるPageさんSizeChangedイベントを、使用してサイズ変更に反応してページのレイアウトを変更することができます。しかしこれはきれいなアプローチではなく、組み込みの適応トリガを使用する方がはるかに適しています。

//in the page's constructor wire-up the SizeChanged event 
this.SizeChanged += MainPage_SizeChanged;  

private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e) 
{ 
    if (e.NewSize.Width < 768) 
    { 
     //some layout changes 
    } 
    else if (e.NewSize.Width < 1024) 
    { 
     //some layout changes 
    } 
    else 
    { 
     //etc. 
    } 
} 

また、手動でコードからページの現在のVisualStateを切り替えることができます。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="CustomGroup"> 
      <VisualState x:Name="ShowButtonState" /> 
      <VisualState x:Name="HideButtonState"> 
       <VisualState.Setters> 
        <Setter Target="TestButton.Visibility" Value="Collapsed" /> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Button x:Name="TestButton" Content="Test button" /> 
</Grid> 

をし、コード内の状態を切り替える：：

まずXAMLで、いくつかのVisualStatesを定義

if (someCondition) 
{ 
    VisualStateManager.GoToState(this, "HideButtonState", false); 
}    
else 
{ 
    VisualStateManager.GoToState(this, "ShowButtonState", false); 
}