Windows Ripresa universale del design reattivo

Question

Quindi, ho appena iniziato a lavorare di nuovo con le app di Windows e ci sono alcune cose che non riesco a lavorare come voglio (probabilmente perché non ho trovato nessun video di Channel9 di esempio copro il mio caso).

A partire da this article, ho deciso che la tecnica di "riposizionamento" è quella che si adatta alla mia app quando si passa da uno schermo grande a uno più piccolo.

Quello che ho fatto utilizza un StackPanel e cambiando il suo orientamento utilizzando due AdaptiveTrigger s (uno per 0 larghezza e un'altra per 720, in base alla tabella here).

Questo tipo funziona ma ci sono alcuni problemi che illustrerò con alcuni brutti screenshot di modifica della vernice.

Questo è ciò che accade quando sono nella situazione BigScreen, dove c'è spazio sufficiente per avere A e B sulla stessa riga. Il problema qui è che B dovrebbe occupare tutta la larghezza rimanente, coprendo tutta la parte blu.

Il secondo problema è legato al ridimensionamento. Quando non c'è abbastanza spazio, la parte verde viene tagliata invece di essere ridimensionata (puoi vedere che il bordo destro è scomparso). Ciò non è accaduto prima di utilizzare lo StackPanel per rendere il layout reattivo.

Infine, quando siamo nella situazione SmallScreen, modifiche dell'orientamento essere verticali e abbiamo lo stesso problema come il primo: Altezza della parte verde non riempie lo schermo.

Ecco il XAML usata per la pagina:

<Page 
    x:Class="Page" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:WifiAnalyzerFinal.Views" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:mvvm="using:Mvvm" 
    mc:Ignorable="d">   

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="SmallScreen"> 
      <VisualState> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="0"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="StackPanel.Orientation" 
          Value="Vertical"/> 
       </VisualState.Setters> 
      </VisualState> 
      </VisualStateGroup> 
      <VisualStateGroup x:Name="BigScreen"> 
      <VisualState> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="720"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="StackPanel.Orientation" 
          Value="Horizontal"/> 
        <Setter Target="Rect.Width" 
          Value="200"/> 
         <Setter Target="Rect.Height" 
          Value="Auto"/> 
        </VisualState.Setters> 
      </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <StackPanel Orientation="Vertical" 
        Background="Blue" 
        x:Name="StackPanel"> 
      <Rectangle Fill="Red" 
         Height="50" 
         x:Name="Rect" 
         Width="Auto"/> 
      <ListView ItemsSource="{Binding Stuff}" 
         HorizontalAlignment="Stretch" 
         HorizontalContentAlignment="Stretch" 
         VerticalAlignment="Stretch" 
         Background="Green" 
         Width="Auto" 
         BorderBrush="DarkGreen" 
         BorderThickness="5" 
         Padding="5"> 
       <ListView.ItemContainerStyle> 
        <Style TargetType="ListViewItem"> 
         <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
         <Setter Property="Margin" Value="0,0,0,5"/> 
        </Style> 
       </ListView.ItemContainerStyle> 
      </ListView> 
     </StackPanel> 
    </Grid> 
</Page> 

Si prega di notare che senza la StackPanel la parte verde si inserisce nella pagina come dovrebbe, che copre tutta l'area disponibile. Sfortunatamente non sono riuscito a trovare una soluzione migliore perché non c'è un campione che ci indichi come implementare questa tecnica. Ho anche provato a utilizzare il nuovo RelativePanel ma sembra che lo Setter di AdaptiveTrigger non funzioni con proprietà associate come RelativePanel.RightOf.

C'è qualcuno che ha avuto successo sta applicando questa tecnica senza dover usare code-behind?

EDIT:

Ho ottenuto questo funzionamento utilizzando un Grid con 2 righe e 2 colonne, con il AdaptiveTrigger spostando tutto il contenuto da riga a colonna e viceversa.

Answer 1

È possibile modificare i valori delle proprietà RelativePanel collegati attraverso incastonatori.La sintassi è questa:

<Setter Target="SomeXAMLObject.(RelativePanel.RightOf)" Value="SomeOtherXAMLObject" /> 

Answer 2

Perché non si tenta di utilizzare griglia (invece di StackPanel) e definire righe utilizzando dimensioni proporzionali come:

`<Grid> 
<Grid.RowDefinitions> 
    <RowDefinition width="2*"/> 
    <RowDefinition width="3*"/> 
    <RowDefinition width="1*"/> 
</Grid.RowDefinitions> 
</Grid>`