WPF Wrappanel 很好地对齐文本块和文本框

Question

我已经敲了几个小时，试图弄清楚如何让我的文本块和文本框在 Wrappanel 中对齐。我已经尝试了可以​​在 stackoverflow 上找到的所有内容，但事实是在我的第一个 WPF 应用程序中，我很难弄清楚。

这篇文章详细描述了我想要实现的目标，但我无法使用此处概述的步骤使其工作：http://badecho.com/2012/07/wpf-grid-like-wrappanels/

这是我目前所拥有的：

<TabControl HorizontalAlignment="Left" 
    Margin="10,150,0,10"
    VerticalAlignment="Top">
<TabItem Header="Repairs">

<Grid Margin="0,0,10,0">

    <WrapPanel Grid.IsSharedSizeScope="True" Orientation="Horizontal" Margin="0,10,10,10">
        <TextBlock TextWrapping="WrapWithOverflow" Margin="20, 5, 0, 20">
         Regular Paid Hours
        </TextBlock>
        <TextBox Margin="20, 0, 10, 20" Width="45"></TextBox>

        <TextBlock TextWrapping="WrapWithOverflow" Margin="20, 5, 0, 20">
         Overtime Hours
        </TextBlock>
        <TextBox Margin="20, 0, 10, 20" Width="45"></TextBox>

        <TextBlock TextWrapping="WrapWithOverflow" Margin="20, 5, 0, 20">
         Repair Labor
        </TextBlock>
        <TextBox Margin="20, 0, 10, 20" Width="45"></TextBox>\

        <!-- There are a lot more -->  
    </WrapPanel>

    <DataGrid AutoGenerateColumns="False" ColumnHeaderStyle="{StaticResource lowCase}" Margin="20,180,10,70" Name="dtGrid" HorizontalAlignment="Left" CanUserResizeRows="False" ItemsSource="{Binding}" VerticalAlignment="Top" GridLinesVisibility="All">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Path=Location}" Header="Location"/>
            <DataGridTextColumn Binding="{Binding Path=Date, StringFormat ='MM-dd-yy'}" Header="Date"/>
            <DataGridTextColumn Binding="{Binding Path=RegularPaidHours}" Header="Regular Repair Hours"/>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

我想要实现的目标：调整窗口大小时应该对齐文本框，并且数据网格应该向下移动以适合所有文本块和文本框。我错过了什么？

有人可以给我一个愚蠢的解决方案吗？如果有一个简单的修复方法，我将不胜感激。

Answer 1

这是一种使用隐式样式和HeaderedContentControls 的方法。您可以在ControlTemplate 中设置边距、宽度等。我把它留得很简单。默认情况下，“InputCol”单元格将水平拉伸其内容，但您可以在示例中看到如何为特定控件取消它。容器上的“SharedSizeGroup”和“IsSharedSizeScope”是使所有标签具有相同宽度但不超过所需宽度的魔法。

<Window.Resources>
    <Style TargetType="WrapPanel" x:Key="WrapForm">
        <Setter Property="Orientation" Value="Horizontal" />
        <Setter Property="Grid.IsSharedSizeScope" Value="True" />
        <Style.Resources>
            <!-- Implicit style for all HeaderedContentControls -->
            <Style TargetType="HeaderedContentControl">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="HeaderedContentControl">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" SharedSizeGroup="LabelCol" />
                                    <ColumnDefinition Width="120" SharedSizeGroup="InputCol" />
                                </Grid.ColumnDefinitions>
                                <Label
                                    VerticalContentAlignment="Top"
                                    Grid.Column="0"
                                    Content="{TemplateBinding Header}" 
                                    />
                                <ContentControl
                                    VerticalContentAlignment="Top"
                                    Grid.Column="1"
                                    Content="{TemplateBinding Content}"
                                    />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Style.Resources>
    </Style>
</Window.Resources>
<Grid>
    <WrapPanel Style="{StaticResource WrapForm}">
        <HeaderedContentControl Header="Regular Paid Hours">
            <TextBox />
        </HeaderedContentControl>
        <HeaderedContentControl Header="Overtime Hours">
            <TextBox />
        </HeaderedContentControl>
        <HeaderedContentControl Header="Repair Labor">
            <ComboBox HorizontalAlignment="Left" />
        </HeaderedContentControl>
        <HeaderedContentControl Header="This One Has Two">
            <StackPanel Orientation="Vertical">
                <CheckBox>One Thing</CheckBox>
                <CheckBox>Or Another</CheckBox>
            </StackPanel>
        </HeaderedContentControl>
    </WrapPanel>
</Grid>

更新

简单的两行网格布局：

<Grid>
    <Grid.RowDefinitions>
        <!-- 
        This 2* + 1* means "divide the grid vertically into three equal parts,
        and give two of them to row zero and one of them to row one". 
        You could give them both Height="*" and it'll be divided evenly, or 
        make one of them Height="Auto" and it'll get the height it takes up, 
        while the other one will get all the remainder. 
        -->
        <RowDefinition Height="2*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <ScrollViewer
        Grid.Row="0"
        >
        <WrapPanel 
            Style="{StaticResource WrapForm}"
            >
            <HeaderedContentControl Header="Regular Paid Hours">
                <TextBox />
            </HeaderedContentControl>
            <HeaderedContentControl Header="Overtime Hours">
                <TextBox />
            </HeaderedContentControl>
            <HeaderedContentControl Header="Repair Labor">
                <ComboBox HorizontalAlignment="Left" />
            </HeaderedContentControl>
            <HeaderedContentControl Header="This One Has Two">
                <StackPanel Orientation="Vertical">
                    <CheckBox>One Thing</CheckBox>
                    <CheckBox>Or Another</CheckBox>
                </StackPanel>
            </HeaderedContentControl>
        </WrapPanel>
    </ScrollViewer>
    <DataGrid
        Grid.Row="0">
        <!-- stuff -->
    </DataGrid>
</Grid>

这里的 Grid 是 Window 中的主要 Grid。可能需要一些技巧才能以您想要的方式获得它。