wpf - 如何在 wpf 中锚定文本框？

Question

我有一个带有标签的窗口。在其中一个选项卡上，我的布局如下所示。 (其实比较复杂，我一行有4个文本框，而且行数更多。)怎样才能让第3个文本框有标签的宽度+上面文本框的宽度，也就是要它们是否正确对齐？问题是当我在其中输入文本时，WPF 会扩大第三个文本框。对大小使用硬编码数字违背了 WPF 的全部目的。我在 Windows 窗体中这样做的速度比在 WPF 中快 10 倍。

有没有更好的方法，而不是为每组连续的小文本框使用一个网格，不得不从网格中跳过大的文本框，因为把它们放在里面会弄乱一切。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="{x:Type Label}">
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="3"/>
        </Style>
        <Style x:Key="SmallTextBox" TargetType="{x:Type TextBox}"
               BasedOn="{StaticResource {x:Type TextBox}}">
            <Setter Property="Width" Value="50"/>
        </Style>
    </Window.Resources>

    <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left"
                Width="{Binding ElementName=grid,Path=ActualWidth}"
                Grid.IsSharedSizeScope="True">
        <Grid Name="grid" HorizontalAlignment="Left">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="c1"/>
                <ColumnDefinition Width="Auto" SharedSizeGroup="c2"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Label Content="Foo:"/>
            <TextBox Grid.Column="1" Style="{StaticResource SmallTextBox}"/>
            <Label Grid.Row="1" Content="Foobar:"/>
            <TextBox Grid.Row="1" Grid.Column="1"
                     Style="{StaticResource SmallTextBox}"/>
        </Grid>

        <TextBox Grid.Row="1"/>

        <Grid Name="grid2" HorizontalAlignment="Left">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="c1"/>
                <ColumnDefinition Width="Auto" SharedSizeGroup="c2"/>
            </Grid.ColumnDefinitions>

            <Label Content="Bar:"/>
            <TextBox Grid.Column="1" Style="{StaticResource SmallTextBox}"/>
        </Grid>
    </StackPanel>
</Window>

编辑:这是基于 Julien Lebosquain 回答的解决方案:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="{x:Type Label}">
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="3"/>
        </Style>
        <Style x:Key="SmallTextBox" TargetType="{x:Type TextBox}"
               BasedOn="{StaticResource {x:Type TextBox}}">
            <Setter Property="Width" Value="50"/>
        </Style>
    </Window.Resources>

    <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left"
                Width="{Binding ElementName=grid,Path=ActualWidth}">
        <Grid Name="grid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Label Content="Foo:"/>
            <TextBox Grid.Column="1" Style="{StaticResource SmallTextBox}"/>
            <Label Grid.Row="1" Content="Foobar:"/>
            <TextBox Grid.Row="1" Grid.Column="1"
                     Style="{StaticResource SmallTextBox}"/>
            <TextBox Grid.Row="2" Grid.ColumnSpan="2"/>
            <Label Grid.Row="3" Content="Bar:"/>
            <TextBox Grid.Row="3" Grid.Column="1"
                     Style="{StaticResource SmallTextBox}"/>
        </Grid>
    </StackPanel>
</Window>

Answer 1

我想你把它弄反了。它不是把所有东西都搞砸的最大的文本框。事实上，小文本框具有固定大小，这使得它们的行为不像最大的文本框。你在这里有一个矛盾:使用堆栈面板意味着“占用我 child 的宽度”，Width=Auto具有相同的行为，但您不希望堆栈面板增长。

在可视化树的较高位置，您需要指定宽度或使用其大小行为是占据整个空间的控件，例如 Grid。

就个人而言，我会选择这个解决方案:

仅使用一个内部网格，小文本框不再具有固定大小，大文本框具有 Grid.ColumnSpan="2" .

申请 Width="Auto"到第一列和Width="*"到第二个。

替换现有的StackPanel与 Grid使第一列固定或星号大小(以便在调整窗口大小时它会缩放)。将您的内部网格放在第一列中。