11

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

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

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

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

理想的には、極端に遅くなることを避けるために、コントロールを複製または再作成するのではなく、再配置する必要があります。

4

3 に答える 3

21

これを行う最も簡単な方法は、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、現時点ではその正確な構文を思い出せません。

于 2012-12-27T17:54:21.097 に答える
3

WPFのUWPフレーバーを使用している場合は、次を使用できますAdaptiveTrigger。

<AdaptiveTrigger MinWindowWidth="720" MinWindowHeight="900" />
于 2016-06-07T10:02:44.823 に答える
1

このようなことをするために私が知っている唯一の方法はコードであり、カスタムレイアウトを作成する必要があります。これを行う最も簡単な方法は、Panelから継承する新しいクラスを作成し、MeasureOverrideとArrangeOverrideを実装することです。私は以前にカスタムレイアウトを行ったことがありますが、すべてのケースで機能させるにはかなり大きな苦痛になる可能性があります。あなたがグーグル「wpfカスタムレイアウト」なら、あなたは最初にいくつかの良い例を得るでしょう。あなたが望むすべての機能を考えると、あなたは間違いなくあなたのためにあなたの仕事を切り取るでしょう。添付されたプロパティを調べて、xamlに注釈を付けて、さまざまなサイズで何を含めるべきかをコードに理解させることをお勧めします。

于 2012-12-24T19:21:31.043 に答える