WPFでアダプティブレイアウトを作成するにはどうすればよいですか？

Question

ウェブサイトは、メディアクエリを使用して小さな画面サイズに適応するように設計できます。たとえば、ワイドスクリーンの3つの列、低解像度電話の1つの列などがあります。

WPFで使用可能なスクリーンスペースまたは親コントロールのサイズに基づいてレイアウトを調整する方法はありますか？

たとえば、3つの列を大きな画面に水平に表示したいのですが、小さな画面に垂直に表示することができます。理想的には、次のようなレイアウトを作成したいと思います。「このコントロールの幅が400ポイント未満の場合は、このようにコントロールを並べ替える」

WPFでこのようなアダプティブデザインを作成するにはどうすればよいですか？つまり、特定の親コントロールのサイズに対するコントロールのレイアウトを定義しますか？

極端に遅くならないように、コントロールを複製または再作成する代わりに並べ替えるのが理想です。

Answer 1

最も簡単な方法は、DataTriggersとConverterで、バインドされた値がパラメータより大きいか小さいかをテストすることです。

これにより、バインドされた値に基づいてスタイル設定を簡単に調整できます。たとえば、あなたは、いくつかのトリガされた値に基づいて変化する多くの作品で、より複雑なレイアウトを持っている場合は

<Style x:Key="MyControlStyle"> 
    <!-- Default Values --> 
    <Setter Property="Grid.Row" Value="0" /> 
    <Setter Property="Grid.Column" Value="0" /> 
    <Style.Triggers> 
     <DataTrigger Value="True" 
        Binding="{Binding ActualHeight, ElementName=MyWindow, 
         Converter={StaticResource IsValueLessThanParameter}, 
         ConverterParameter=400}"> 
      <!-- Values to use when Trigger condition is met --> 
      <Setter Property="Grid.Row" Value="1" /> 
      <Setter Property="Grid.Column" Value="1" /> 
     </DataTrigger> 
    </Style.Triggers> 
</Style> 

を使用することができ、あなたの引き金と全体のテンプレートだけではなく個々のプロパティを置き換えることができます

<Style x:Key="MyContentControlStyle" TargetType="{x:Type ContentControl}"> 
    <Setter Property="ContentTemplate" Value="{StaticResource BigTemplate}" /> 
    <Style.Triggers> 
     <DataTrigger Value="True" 
        Binding="{Binding ActualHeight, ElementName=MyWindow, 
         Converter={StaticResource IsValueLessThanParameter}, 
         ConverterParameter=400}"> 
      <Setter Property="ContentTemplate" Value="{StaticResource LittleTemplate}" /> 
     </DataTrigger> 
    </Style.Triggers> 
</Style> 

SystemParametersオブジェクトにバインドして、バインディング内のアプリケーションに関する追加情報を使用することもできますが、今のところ正しい構文を覚えていないと思います。

Answer 2

私はこのようなことを知る唯一の方法はコードであり、カスタムレイアウトを作成する必要があります。これを行う最も簡単な方法は、Panelから継承する新しいクラスを作成し、MeasureOverrideとArrangeOverrideを実装することです。私は以前にカスタムレイアウトを行っていましたが、すべてのケースでうまくいくにはかなり大きな痛みに終わることがあります。 Googleの「wpfカスタムレイアウト」では、まずは良い例が得られます。あなたが望むすべての機能を与えられれば、間違いなくあなたの仕事を減らすことができます。あなたはおそらく、xamlにアノテーションを入れることで、さまざまなサイズに何を含めるべきかをコードに伝えるために、付属のプロパティを見たいと思うでしょう。

Answer 3

あなたがWPFのUWP風味を使用している場合、あなたはAdaptiveTriggerを使用する可能性があります：

<AdaptiveTrigger MinWindowWidth="720" MinWindowHeight="900" />