Проблемы форматирования WPF - автоматическое растяжение и изменение размера?

Question

Я очень новичок в WPF и XAML. Я пытаюсь разработать базовую форму ввода данных. Я использовал панель стека, содержащую еще четыре панели стека, чтобы получить нужный макет. Возможно, сетка была бы лучше для этого, я не уверен.

А вот код XAML, который его генерирует:

<Window x:Class="Test1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="224" Width="536.762">
    <StackPanel Height="Auto" Name="stackPanel1" Width="Auto" Orientation="Horizontal">
        <StackPanel Height="Auto" Name="stackPanel2" Width="Auto">
            <Label Height="Auto" Name="label1" Width="Auto">Patient Name:</Label>
            <Label Height="Auto" Name="label2" Width="Auto">Physician:</Label>
            <Label Height="Auto" Name="label3" Width="Auto">Insurance:</Label>
            <Label Height="Auto" Name="label4" Width="Auto">Therapy Goals:</Label>
        </StackPanel>
        <StackPanel Height="Auto" Name="stackPanel3" Width="Auto">
            <TextBox Height="Auto" Name="textBox1" Width="Auto" Padding="3" Margin="1" />
            <TextBox Height="Auto" Name="textBox2" Width="Auto" Padding="3" Margin="1" />
            <TextBox Height="Auto" Name="textBox3" Width="Auto" Padding="3" Margin="1" />
            <TextBox Height="Auto" Name="textBox4" Width="Auto" Padding="3" Margin="1" />
        </StackPanel>
        <StackPanel Height="Auto" Name="stackPanel4" Width="Auto">
            <Label Height="Auto" Name="label5" Width="Auto">Date:</Label>
            <Label Height="Auto" Name="label6" Width="Auto">Patient Phone:</Label>
            <Label Height="Auto" Name="label7" Width="Auto">Facility:</Label>
            <Label Height="Auto" Name="label8" Width="Auto">Referring Physician:</Label>
        </StackPanel>
        <StackPanel Height="Auto" Name="stackPanel5" Width="Auto">
            <TextBox Height="Auto" Name="textBox5" Width="Auto" Padding="3" Margin="1" />
            <TextBox Height="Auto" Name="textBox6" Width="Auto" Padding="3" Margin="1" />
            <TextBox Height="Auto" Name="textBox7" Width="Auto" Padding="3" Margin="1" />
            <TextBox Height="Auto" Name="textBox8" Width="Auto" Padding="3" Margin="1" />
        </StackPanel>
    </StackPanel>
</Window>

Я действительно хочу, чтобы текстовые поля растягивались одинаково, чтобы заполнить пространство по горизонтали. Я также хотел бы, чтобы элементы управления в каждой вертикальной стековой панели равномерно распределялись при изменении размера окна по вертикали.

Answer 1

StackPanel всегда выравнивает свои дочерние элементы по верхнему или левому краю в зависимости от его ориентации. Похоже, что вы хотите, чтобы UniformGrid, где ваша внешняя StackPanel. Попробуйте это:

<Window>
    <UniformGrid Name="stackPanel1" Rows="1">
        <StackPanel Name="stackPanel2">
           ...
        </StackPanel>
        <StackPanel Name="stackPanel3">
           ...
        </StackPanel>
        <StackPanel Name="stackPanel4">
           ...
        </StackPanel>
        <StackPanel Name="stackPanel5">
           ...
        </StackPanel>
    </UniformGrid>
</Window>

Обратите внимание, что вам не нужно устанавливать ширину = авто или высоту = авто, это подразумевается.

Но вы правы, что Grid, вероятно, лучше (даже если XAML уродлив), потому что в этой конфигурации макета ваши метки могут легко выйти из выравнивания с текстовыми полями. Вы можете попробовать что-то вроде этого тоже ...

<UniformGrid Rows="1">

    <Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Label Grid.Row="0" Grid.Column="0" Content="Field 1" />
        <TextBox Grid.Row="0" Grid.Column="1" />


        <Label Grid.Row="1" Grid.Column="0" Content="Field 2" />
        <TextBox Grid.Row="1" Grid.Column="1" />


        <Label Grid.Row="2" Grid.Column="0" Content="Field 3" />
        <TextBox Grid.Row="2" Grid.Column="1" />

    </Grid>

    <Grid /> <!-- repeat above -->

    <Grid /> <!-- etc... -->

</UniformGrid>

Answer 2

Снимая слова Джоша, если вам требуется, чтобы элементы управления также заполняли пространство по вертикали, вы можете определить ряды «заполнителя пространства», чтобы также распределить элементы управления по вертикали. Вот некоторый XAML, который демонстрирует это (я добавил поля, чтобы выдвинуть метки из границы окна).

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Label Grid.Column="0" Grid.Row="0" Margin="5">Patient Name:</Label>
    <TextBox Grid.Column="1" Grid.Row="0" Margin="5" />
    <Label Grid.Column="0" Grid.Row="2" Margin="5">Physician:</Label>
    <TextBox Grid.Column="1" Grid.Row="2" Margin="5" />
    <Label Grid.Column="0" Grid.Row="4" Margin="5">Insurance:</Label>
    <TextBox Grid.Column="1" Grid.Row="4" Margin="5" />
    <Label Grid.Column="0" Grid.Row="6" Margin="5">Therapy Goals:</Label>
    <TextBox Grid.Column="1" Grid.Row="6" Margin="5" />
    <Label Grid.Column="2" Grid.Row="0" Margin="5">Date:</Label>
    <TextBox Grid.Column="3" Grid.Row="0" Margin="5" />
    <Label Grid.Column="2" Grid.Row="2" Margin="5">Patient Phone:</Label>
    <TextBox Grid.Column="3" Grid.Row="2" Margin="5" />
    <Label Grid.Column="2" Grid.Row="4" Margin="5">Facility:</Label>
    <TextBox Grid.Column="3" Grid.Row="4" Margin="5" />
    <Label Grid.Column="2" Grid.Row="6" Margin="5">Referring Physician:</Label>
    <TextBox Grid.Column="3" Grid.Row="6" Margin="5" />
</Grid>