Come rendere una finestra WPF reattiva

Question

Sto utilizzando Blend Expression e appena iniziato con WPF.

Sto provando a creare una finestra sensibile alla finestra che può ospitare più griglie e verrà ridimensionata in base alla dimensione della finestra con una larghezza minima.

Sarà come:

My Code So Far:

<Window x:Class="Blend.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" WindowState="Maximized"> 
<Grid> 
<Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
       Padding="5" HorizontalAlignment="Left" Margin="20,10,0,0" 
       VerticalAlignment="Top" Height="211.5" Width="484.5"> 
<Grid Background="#FFEDF3F8"> 

</Grid> 
</Border> 
<Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
    Padding="5" Margin="523.333,10,16.334,283.5"> 
    <Grid Background="#FFEDF3F8"/> 
</Border> 
<Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
    Padding="5" Margin="21.333,234,16.334,144"> 
    <Grid Background="#FFEDF3F8"/> 
</Border> 
<Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
    Padding="5" Margin="21.333,372,16.334,31.5"> 
    <Grid Background="#FFEDF3F8"/> 
</Border> 
<Button Content="Button" HorizontalAlignment="Left" Margin="626.833,478.5,0,0" 
VerticalAlignment="Top" Width="49" Background="#FF00458C"/> 
<Button Content="Button" HorizontalAlignment="Left" Margin="693.166,478.5,0,0" 
VerticalAlignment="Top" Width="49" Background="#FF00458C"/> 
</Grid> 
</Window> 

ho provato 2 cose qui Uno è Margin e altro sta usando 'allineamenti' con Width e Height .

Non sono sicuro che risolverà il mio scopo e in secondo luogo risponderà alle dimensioni dello schermo o meno.

Ho letto di Dynamic Grid usando * ma sembra che non funzioni qui.

Grazie,

Answer 1

Non stai utilizzando la griglia in modo corretto.

Le griglie WPF hanno una proprietà che consente di impostare colonne e righe. Quindi, inseriresti elementi nella griglia e stabilirai in quale riga/colonna dovrebbero andare.

Ovviamente è possibile avere griglie all'interno della griglia e così via.

È quindi possibile giocare con la larghezza = "2 *" e cose simili per rendere le colonne più grandi o più piccole delle altre, "in modo reattivo".

Il codice seguente dovrebbe darti qualcosa di "simile" a quello che cerchi di ottenere.

<Grid> 

    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="2*" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 

    <Grid.RowDefinitions> 
     <RowDefinition /> 
     <RowDefinition /> 
     <RowDefinition /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 

    <Grid Grid.Row="0" 
      Grid.Column="0" 
      Background="Red" /> 

    <Grid Grid.Row="0" 
      Grid.Column="1" 
      Background="Blue" /> 

    <Grid Grid.Row="1" 
      Grid.Column="0" 
      Grid.ColumnSpan="2" 
      Background="Violet" /> 

    <Grid Grid.Row="2" 
      Grid.Column="0" 
      Grid.ColumnSpan="2" 
      Background="Green" /> 

    <StackPanel Grid.Row="3" 
       Grid.ColumnSpan="2" 
       Orientation="Horizontal"> 
     <Button>OK</Button> 
     <Button>Cancel</Button> 
    </StackPanel> 
</Grid> 

Si può giocare con "*" e "Auto" per la larghezza e l'altezza della colonna e le righe, "*" è sempre definito come una "percentuale" di larghezza o altezza delle finestre attuali. Se hai una colonna con "*" e un'altra con "2 *", quella con "2 *" sarà due volte più grande di quella con solo "*", che creerà una separazione di 2/3 1/3.

"Auto" significa che prenderà "la larghezza o l'altezza inferiore che consente di mostrare l'interno della colonna".