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

Question

В XAML у нас обычно есть макет <Grid>, который содержит разные элементы. Как мне выровнять элемент управления в одной ячейке сетки с элементом управления в другой ячейке, как показано ниже?

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

 <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".5*"/>
        <ColumnDefinition Width=".5*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column ="0">
        <TextBox x:Name="name" Height="50"/>
        <Label Content="John"/>
    </StackPanel>
    <StackPanel Grid.Column ="2">
        <RadioButton Content="Option1"/>
    </StackPanel>
</Grid>

Результат ниже, что уродливо:

введите описание изображения здесь

В этом случае я просто хочу, чтобы option1 был выровнен по центру с TextBox (у которого есть настраиваемая высота).

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

Должен ли я использовать привязку к t ie напрямую? Есть ли способ лучше? Еще один способ, о котором я могу думать, - это продолжать создавать сетки внутри сеток, но, похоже, это будет слишком сложно для этой простой вещи?

Answer 1

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

Answer 2

Три варианта.

Первый - дополню @zar: я использую привязку размера вместо явного присвоения значения размеру.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".5*"/>
        <ColumnDefinition Width=".5*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column ="0">
        <TextBox x:Name="name" Height="50"/>
        <Label Content="John"/>
    </StackPanel>
    <StackPanel Grid.Column="1" VerticalAlignment="Top">
        <Border BorderBrush="{x:Null}" Height="{Binding ActualHeight, ElementName=name, Mode=OneWay}">
            <RadioButton Content="Option1" Margin="10,0,0,0" VerticalAlignment="Center"/>
        </Border>
    </StackPanel>
</Grid>

Второй - Я реализую предложение @Mark Feldman: удалить StaskPanel и добавить линии в сетку.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".5*"/>
        <ColumnDefinition Width=".5*"/>
    </Grid.ColumnDefinitions>
    <TextBox x:Name="name" Height="50"/>
    <Label Content="John"
           Grid.Row="1"/>
    <RadioButton Content="Option1" Margin="10,0,0,0" VerticalAlignment="Center"
                 Grid.Column="1"/>
</Grid>

Третий - аналог первого, но без Граница.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".5*"/>
        <ColumnDefinition Width=".5*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column ="0">
        <TextBox x:Name="name" Height="50"/>
        <Label Content="John"/>
    </StackPanel>
    <StackPanel Grid.Column="1" VerticalAlignment="Top">
        <RadioButton Content="Option1" Margin="10,0,0,0" VerticalAlignment="Center" VerticalContentAlignment="Center"
                     Height="{Binding ActualHeight, ElementName=name, Mode=OneWay}"/>
    </StackPanel>
</Grid>

Answer 3

Следующее помогло, просто оберните <RadioButton> в <Border>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".5*"/>
        <ColumnDefinition Width=".5*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column ="0">
        <TextBox x:Name="name" Height="50"/>
        <Label Content="John"/>
    </StackPanel>
    <StackPanel Grid.Column="1" VerticalAlignment="Top">
        <Border BorderBrush="{x:Null}" Height="50">
            <RadioButton Content="Option1" Margin="10,0,0,0" VerticalAlignment="Center"/>
        </Border>
    </StackPanel>
</Grid>

Этот ответ помог.

Теперь результат:

введите описание изображения здесь