Как быстро выровнять элементы управления в окне WPF?

Question

Я заметил, что дизайнер WPF очень плохо справляется с выравниванием элементов управления по сравнению с конструктором Windows Forms.

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

Кроме того, я не могу выровнять кнопку по меткам. Линия привязки помещает кнопку на несколько пикселей влево по сравнению с текстами меток.

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

альтернативный текст http://img520.imageshack.us/img520/4843/wpfdesigneralignment.png

Знаете ли вы быстрый способ выравнивания элементов управления в окнах WPF?

Answer 1

Используйте Grid для разметки ваших элементов управления, затем убедитесь, что у вас нет каких-либо отступов на элементах управления ... если, конечно, вы не хотите добавить отступы и убедитесь, что они все четные.

Быстрый поиск в Google вернул базовое руководство:

Введение в WPF Grid Control

Answer 2

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

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" SizeToContent="WidthAndHeight">
    <Window.Resources>
        <Style x:Key="ControlStyle" TargetType="Control">
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
        <Style BasedOn="{StaticResource ControlStyle}" TargetType="Label">
            <Setter Property="Margin" Value="-4,0,0,0"/>
        </Style>
        <Style BasedOn="{StaticResource ControlStyle}" TargetType="TextBox">
            <Setter Property="Width" Value="120"/>
        </Style>
        <Style BasedOn="{StaticResource ControlStyle}" TargetType="Button">
            <Setter Property="MinWidth" Value="70"/>
        </Style>
        <Style TargetType="Grid">
            <Setter Property="Margin" Value="10,10,10,10"/>
        </Style>
        <Style x:Key="SeparatorColumn" TargetType="ColumnDefinition">
            <Setter Property="Width" Value="10"/>
        </Style>
        <Style x:Key="SeparatorRow" TargetType="RowDefinition">
            <Setter Property="Height" Value="3"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Style="{StaticResource SeparatorColumn}"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Style="{StaticResource SeparatorRow}"/>
            <RowDefinition/>
            <RowDefinition Style="{StaticResource SeparatorRow}"/>
            <RowDefinition/>
            <RowDefinition Style="{StaticResource SeparatorRow}"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Grid.Column="0">Label:</Label>
        <TextBox Grid.Row="0" Grid.Column="2">TextBox</TextBox>
        <Label Grid.Row="2" Grid.Column="0">Label:</Label>
        <TextBox Grid.Row="2" Grid.Column="2">TextBox</TextBox>
        <Button Grid.Row="4" Grid.ColumnSpan="3">Button</Button>
        <Label Grid.Row="6" Grid.Column="0">Label:</Label>
        <TextBox Grid.Row="6" Grid.Column="2">TextBox</TextBox>
    </Grid>
</Window>

Answer 3

Используйте соответствующий элемент управления Panel (StackPanel, DockPanel и т. Д.) Для требуемого выравнивания, а не используйте сетку по умолчанию. Элемент управления Grid позволяет легко перетаскивать элементы управления в окно, куда вы хотите (не будучи настолько неструктурированным, как Canvas), но не делает никаких предположений о том, какой тип макета вы на самом деле пытаетесь создать.

Если макет, который вы пытаетесь создать, на самом деле представляет собой «сетку» (или таблицу, например строки и столбцы), я предлагаю использовать элемент управления UniformGrid (для равномерно расположенных строк и столбцов) или сетку с высота / ширина, заданная для каждой строки / столбца, и поля для всех элементов, для которых установлено значение 0 (чтобы полностью заполнить его ячейку).

Answer 4

Я написал пользовательскую панель, которая выполняет «макет формы» (группы из двух столбцов, все метки одинакового размера, все контролируют одинаковый размер, все выровнено и т. Д.), Она находится в моем блоге по адресу: http://www.nbdtech.com/Blog/archive/2010/07/27/easy-form-layout-in-wpf-part-1-ndash-introducing-formpanel.aspx

Он предназначен для быстрого и простого использования при редактировании XAML, я даже не пробовал его в конструкторе.

Answer 5

Лучший способ - использовать Grid или DockPanel.
В большинстве случаев поля не требуются.