将标签和组合框放在一起

Posted 2021-04-02

我有三个标签和组合框。看演示。

每个标签和相应的Combobox彼此​​相邻。

我使用Grid将行分成几列。然后将Label和Combobox放入每列。然而，即使我设置了HorizontalAlignment = "Left"，他们也不是紧挨着。

如果我设置保证金来调整头寸。它温和地运作。当我调整用户控件的大小时，形状发生了变化。我想要响应式UI，但边缘值是硬编码的。

并且第一个标签应该在要求的左侧。那么最好的方法是什么？

编辑代码

<Window x:Class="WpfApp2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp2"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid Height="35">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="10" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="10" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="10" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="10" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="10" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="10" />
    </Grid.ColumnDefinitions>
    <Label Grid.Column="1" Content="Label1:" />
    <ComboBox Grid.Column="3" />
    <Label Grid.Column="5" Content="Label2:" />
    <ComboBox Grid.Column="7" />
    <Label Grid.Column="9" Content="Label3:" />
    <ComboBox Grid.Column="11" />
</Grid>

答案

只需使用auto作为标签的列，使用*作为组合框：

 <Grid Height="35">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Label Grid.Column="0" Content="Label1:" />
    <ComboBox Grid.Column="1"  Margin="0,0,10,0"/>
    <Label Grid.Column="2" Content="Label2:" />
    <ComboBox Grid.Column="3" Margin="0,0,10,0" />
    <Label Grid.Column="4" Content="Label3:" />
    <ComboBox Grid.Column="5" Margin="0,0,10,0"/>
</Grid>

如果你没有你的组合框填充剩余空间使用HorizantalAlignement：

  <ComboBox Grid.Column="1"  Width="100" HorizontalAlignment="Left"/>