How to align to a control in the same screen? - wpf

Question

In XAML, we typically have <Grid> layout which contains different elements. How do I align a control in one cell of grid to a control in a different cell like below?
(This used to be rather common in traditional applications where controls maybe in different group boxes etc but we still want to align them horizontally in one plane)
<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>
The result is below which is ugly:
In this case, I just want to option1 to aligned centered with the TextBox (which does have custom height).
I can use margins to bring it to the desired position but that's kind of hard coded and not too WPFish.
Should I use binding to tie them directly? Is there a better way? Another way I can think of is to keep making grids within grids but seems like that will over complicate for this simple thing?

Answer 1

Try putting them both in another Grid or a horizontal StackPanel, and put that in one of the parent Grid cells.

Answer 2

The following did the trick, basically wrap the <RadioButton> around in <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>
This answer helped.
Now the result is:

Answer 3

Three variants.
The first - I will supplement #zar: I use size binding instead of explicitly assigning a value to the size.
<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>
Second - I am implementing #Mark Feldman proposal: Delete StaskPanel and add lines to the grid.
<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>
The third - analogous to the first, but without the 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">
<RadioButton Content="Option1" Margin="10,0,0,0" VerticalAlignment="Center" VerticalContentAlignment="Center"
Height="{Binding ActualHeight, ElementName=name, Mode=OneWay}"/>
</StackPanel>
</Grid>