Come posso creare un layout adattivo in WPF?

Question

Un sito Web può essere progettato per adattarsi a schermi di dimensioni inferiori utilizzando le query multimediali. Ad esempio, tre colonne su uno schermo ampio, una colonna su un telefono a bassa risoluzione.

Esiste una tecnica simile per WPF per regolare il layout in base allo spazio dello schermo disponibile o alle dimensioni del controllo padre?

Ad esempio, mi piacerebbe avere 3 colonne visualizzate orizzontalmente su uno schermo grande, ma visualizzate verticalmente su uno schermo più piccolo. Idealmente, mi piacerebbe formulare layout come questo: "Se la larghezza di questo controllo è inferiore a 400 punti, riordina questi controlli in questo modo."

Come è possibile creare un progetto adattivo come questo in WPF? Cioè, definire diversi layout per i controlli per dimensioni di controllo genitori specifiche?

Idealmente i controlli devono essere riorganizzati anziché duplicati o ricreati, per evitare di essere estremamente lenti.

Answer 1

Il modo più semplice per farlo è con DataTriggers e un Converter per verificare se il valore associato è maggiore o minore di un parametro.

Ciò consentirà di regolare facilmente i setter di stile in base a un valore associato. Ad esempio, è possibile utilizzare

<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> 

Nel caso in cui si dispone di un layout più complesso con molti pezzi che cambiano in base qualche valore innescata, è possibile sostituire intere modelli con il trigger invece di solo singole proprietà

<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> 

Credo che si possa anche associare all'oggetto SystemParameters per utilizzare ulteriori informazioni sull'applicazione nei propri binding, sebbene al momento non riesca a ricordare la sintassi esatta per esso.

Answer 2

L'unico modo in cui so di fare qualcosa di simile è in codice, e devi creare un layout personalizzato. Il modo più semplice per farlo è creare una nuova classe che erediti da Panel e implementare MeasureOverride e ArrangeOverride. Ho già fatto dei layout personalizzati e possono finire per essere un problema piuttosto grande per lavorare in tutti i casi. Se tu "Google wpf layout personalizzato" avrai alcuni buoni esempi per iniziare. Con tutte le funzionalità che desideri, avrai sicuramente il tuo lavoro da fare per te. Probabilmente vorrai dare un'occhiata alle proprietà allegate per vedere come mettere le annotazioni in xaml per dare al tuo codice un'idea di cosa dovrebbe essere incluso nelle diverse dimensioni.

Answer 3

Se si utilizza il sapore UWP di WPF, allora si potrebbe utilizzare AdaptiveTrigger:

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