Как правильно задавать выравнивание для графических компонентов в WPF?

Question

[Nik Faraday]

Здравствуйте!

Нужно решить несколько задач в направлении WPF (Мой основной стек asp.net) и не могу никак разобраться с графической частью. Есть у меня форма куда я кинул кнопку и к ней применились стандартные отступы. Скрин ниже:


И получается вот такой вот результат:


Есть ли способ сделать адаптивный дизайн, как это можно сделать в том же html/css и как тут правильно делать алигменты, маргины и т.д.?

UPD: Хочу для теста сделать что-то ал-ля страницы авторизации/регистрации я непонимаю как адекватно натянуть грид и закинуть туда компоненты (КонтролЫ (Элементы управления) вроде бы называются). На сколько строк/колонок нужно разбить сам грид если, допустим, хочу туда ещё какой-то навбар кинуть.

Пересмотрел несколько видео, прочитал парочку статей, нет информации о каких-то конвенциях или соглашениях относительно того, как правильно делать макеты

Answer 1

[Вячеслав Золотов]

тынц, только там пример на C#, но GUI лучше в xaml верстать.
Ну и забудьте про дизайнер, в нём вёрстка кривая получается

Comments

[Nik Faraday]

Так я и через xaml делаю, просто я не очень понимаю к каким сторонами привязывать элементы. К примеру, на скринах, что я кинул в вопросе, чётко видно, что алигменты могут просто "зажевать" кусок элемента. Как с этим борятся и что делают?

[Вячеслав Золотов]

Так я и через xaml делаю

Вы скинули скрин дизайнера, если есть вопросы по вёрстке в xaml фреймворках принято выкладывать xaml код.

просто я не очень понимаю к каким сторонами привязывать элементы.

Здесь обычная табличная вёрстка. Для позиционирования контрола по вертикали свойство VerticalAligment, там указывается как его размещать. Аналогично с HorizontalAligment Например, VerticalAligment = top, HorizontalAligment = left - элемент будет в верхнем левом углу родительского контролла

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

Это маржин или падинг элемент жуют, судя по дизайнеру и цифрам.

Как с этим борятся и что делают?

Если в двух словах - не делать вёрстку на маргинах и падингах, да и вообще жёсткие размеры указывать по минимуму. Использовать гриды, различные панели, списки.

[Nik Faraday]

Вячеслав Золотов, на сколько строк/колонок принято разбирать грид? Допустим, я сделал что-то типа такого:

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition> <!-- 1 -->
            <ColumnDefinition></ColumnDefinition> <!-- 2 -->
            <ColumnDefinition></ColumnDefinition> <!-- 3 -->
            <ColumnDefinition></ColumnDefinition> <!-- 4 -->
            <ColumnDefinition></ColumnDefinition> <!-- 5 -->
            <ColumnDefinition></ColumnDefinition> <!-- 6 -->
            <ColumnDefinition></ColumnDefinition> <!-- 7 -->
            <ColumnDefinition></ColumnDefinition> <!-- 8 -->
            <ColumnDefinition></ColumnDefinition> <!-- 9 -->
            <ColumnDefinition></ColumnDefinition> <!-- 10 -->
            <ColumnDefinition></ColumnDefinition> <!-- 11 -->
            <ColumnDefinition></ColumnDefinition> <!-- 12 -->
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition> <!-- 1 -->
            <RowDefinition></RowDefinition> <!-- 2 -->
            <RowDefinition></RowDefinition> <!-- 3 -->
            <RowDefinition></RowDefinition> <!-- 4 -->
            <RowDefinition></RowDefinition> <!-- 5 -->
            <RowDefinition></RowDefinition> <!-- 6 -->
            <RowDefinition></RowDefinition> <!-- 7 -->
            <RowDefinition></RowDefinition> <!-- 8 -->
            <RowDefinition></RowDefinition> <!-- 9 -->
            <RowDefinition></RowDefinition> <!-- 10 -->
            <RowDefinition></RowDefinition> <!-- 11 -->
            <RowDefinition></RowDefinition> <!-- 12 -->
        </Grid.RowDefinitions>

        <Grid Grid.Column="0" Grid.Row="0"  Grid.ColumnSpan="12">
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition> <!-- 1 -->
                <ColumnDefinition></ColumnDefinition> <!-- 2 -->
                <ColumnDefinition></ColumnDefinition> <!-- 3 -->
                <ColumnDefinition></ColumnDefinition> <!-- 4 Center -->
                <ColumnDefinition></ColumnDefinition> <!-- 5 -->
                <ColumnDefinition></ColumnDefinition> <!-- 6 -->
                <ColumnDefinition></ColumnDefinition> <!-- 7 -->
            </Grid.ColumnDefinitions>

            <Label FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="2">Main</Label>
            <Label FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="3">Coins</Label>
            <Label FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="4">Converter</Label>
        </Grid>
        <Grid x:Name="BodyGrid" Grid.Column="0" Grid.ColumnSpan="12" Grid.Row="1" Grid.RowSpan="11">
            <Frame  Background="Gray"/>
        </Grid>
    </Grid>

Считается ли это нормальной xaml разметкой?

[Вячеслав Золотов]

Nik Faraday,

на сколько строк/колонок принято разбирать грид?

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

Считается ли это нормальной xaml разметкой?

Без контекста применения выглядит, конечно, странно.
Не очень понятно зачем тут грид в гриде, если заголовок грида три лейбла содержит и строки постоянно объединяются.

<Grid x:Name="BodyGrid" Grid.Column="0" Grid.ColumnSpan="12" Grid.Row="1" Grid.RowSpan="11">

Это тоже не понятно зачем.Можно сделать две строки в гриде

<Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition> <!-- 1 -->
            <RowDefinition Height="*"></RowDefinition> <!-- 2 -->
        </Grid.RowDefinitions>

в первой строчке, её размер высчитывается по контенту, кинуть StackPanel, а в него лейблы
во второй

<Frame  Background="Gray" Grid.Row = 1 Grid.Column=0 VerticalAligment=stretch HorizontalAligment="stretch"/>

тогда размер фрейма будет резиновый и зависеть от размеров грида.

[Nik Faraday]

Вячеслав Золотов, Спасибо