如何与同一屏幕中的控件对齐？

Posted 2023-03-05

【中文标题】如何与同一屏幕中的控件对齐？

【英文标题】：How to align to a control in the same screen?

【发布时间】：2020-10-31 17:10:23

【问题描述】：

在 XAML 中，我们通常有 <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 ="2">
        <RadioButton Content="Option1"/>
    </StackPanel>
</Grid>

结果如下，很丑：

在这种情况下，我只想让 option1 与 TextBox 居中对齐（它确实具有自定义高度）。

我可以使用边距将其带到所需的位置，但这有点硬编码，不太 WPFish。

我应该使用绑定直接绑定它们吗？有没有更好的办法？我能想到的另一种方法是在网格中继续制作网格，但对于这个简单的事情来说，这似乎过于复杂了？

【参考方案1】：

尝试将它们都放在另一个 Grid 或水平 StackPanel 中，然后将其放在其中一个父 Grid 单元格中。

【参考方案2】：

下面的伎俩，基本上将<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>

这个answer 帮助了。

现在结果是：

【参考方案3】：

三种变体。

第一个 - 我将补充@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>