WPF сетка и поля содержимого ячеек

Question

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

Я поместил две метки в сетке, оба в одном столбце, но в соседних строках:

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="UntitledProject8.Window1"
x:Name="Window"
Title="Window1"
Width="200" Height="200">

<Grid x:Name="LayoutRoot">
    <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Height="100"/>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Label Grid.Row="0" Content="1.23" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
    <Label Grid.Row="1" Content="45" FontSize="48" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</Grid>

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

Теперь, это близко к тому, что я хочу, но мне нужен фактический текст метки в строке 1, чтобы он был ближе к тексту метки в строке ноль. Для этого я установил поле метки в строке 1 на отрицательное значение:

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="UntitledProject8.Window1"
x:Name="Window"
Title="Window1"
Width="200" Height="200">

<Grid x:Name="LayoutRoot">
    <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Height="100"/>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Label Grid.Row="0" Content="1.23" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
    <Label Grid.Row="1" Content="45" FontSize="48" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,-20,0,0"/>
</Grid>

Это правильный способ сделать это? Конечно, мои примеры, приведенные выше, упрощены, но по мере того, как содержимое сетки увеличивается и усложняется (например, включая другие контейнеры компоновки), задает разные значения для полей управления, чтобы правильно расположить соседние ячейки ближе или дальше друг от друга?

Я немного обеспокоен, поскольку стараюсь изо всех сил избегать жесткого кодирования любых типов «дизайнерских» значений, как я делал при работе с WinForms (например, установка точных координат для местоположения и значения для размеров), и хотел бы пусть менеджер по макету просто позаботится об этом. Тем не менее, похоже, что установка поля - единственный путь.

Спасибо за помощь:)

Answer 1

Это выглядит хорошо! Единственное, что меня застало врасплох, это -20 для верхнего поля (вместо 20 для нижнего, что должно делать то же самое), но я бы изменил это только для ясности.

Главное, на что стоит обратить внимание, это контейнер, который Grid определенно подойдет для вас. Еще одной особенностью этого является то, что при растяжении сетки расстояние между вашими элементами будет пропорционально увеличиваться (вероятно, в любом случае, что вы хотите). Единственная слабость Сетки в том, что она не самая эффективная. Главным образом потому, что вы можете сделать с ним так много.

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

Что касается поля, то да, наряду с установкой ширины и высоты, это стандартные способы задания расстояния.