Как сделать WPF Window Отзывчивым

Я использую выражение Blend и только начинаю с WPF.

Я пытаюсь создать окно, реагирующее на окно, которое может размещать несколько гридов и будет изменено по размеру окна до минимальной ширины.

Это будет выглядеть так:

enter image description here

Мой код:

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

Я пробовал 2 вещи здесь Один Margin, а другой - "Выравнивание" с Width и Height.

Не уверен, что решит мою цель, а во-вторых, ответит ли он на размер экрана или нет.

Я читаю о динамической сетке с помощью *, но это, похоже, не работает здесь.

Спасибо,

Ответы

Ответ 1

Вы не используете сетку правильно.

В сетках WPF есть свойство, которое позволяет устанавливать столбцы и строки. Затем вы должны поместить элементы внутри сетки и установить, в какой строке/столбце они должны идти.

Конечно, вы можете иметь сетки внутри сетки и т.д.

Затем вы можете играть с помощью Width = "2 *" и т.д., чтобы сделать столбцы больше или меньше, чем другие, "реагировать".

Приведенный ниже код должен дать вам что-то "похожее" на то, что вы пытаетесь достичь.

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

Вы можете играть с "*" и "Auto" для ширины и высоты столбца и строк, "*" всегда определяется как "процент" ширины или высоты текущего окна. Если у вас есть один столбец с "*", а другой с "2 *" , тот с "2 *" будет в два раза больше, чем тот, который имеет только "*", что сделает разделение 2/3 1/3.

"Авто" означает, что он примет "меньшую ширину или высоту, которая позволяет отображать внутреннюю часть столбца".

Ответ 2

Вы можете использовать несколько столбцов и несколько строк этого примера использования в качестве начальной загрузки, вы можете определить новый элемент управления с атрибутом grid.row или gird.column.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Button Content="Button" Grid.Column="1" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="75"/>
    <Button Content="Button" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="75"/>
</Grid>