WPF 布局问题

Question

我不知道我做错了什么我有一个 2 列和 3 行的网格。在左栏中，我有一个文本块和文本框以及一个列表框，这些都很好。

右栏变得有点复杂，我有一个 tabcontrol 开始。然后是我的 TabItem，在里面我有我的主网格，然后在里面我有 2 个网格。分别是 grdDetailsTop 和 grdDetailsBottom。

grdDetailsTop 有 3 列，其中左侧是带有边框的图像，中间应该是 Member Code: 'TextBox' ，下面应该是 Family Code: 'TextBox' ，最后我想在下面放置 Balance ： '文本框'

我尝试的方法是，我在第一列中有 3 列的 grdDetailsTop Grid，我放置了一个 groupbox，在里面我有一个 stackpanel。

第二列是我遇到问题的地方，我放置了一个 Stackpanel，其方向为 Horizo​​ntal 和 grid.Column="1"，但我的文本块在没有我告诉他们的情况下进入第三列。抱歉解释不好，但代码已发布，希望您能提供帮助。另外，我使用不同面板的原因是我可以在 grdDetailsTop 的每一列周围放置一个边框。

谢谢

    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20*"></ColumnDefinition>
            <ColumnDefinition Width="70*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition Height="5*"></RowDefinition>
            <RowDefinition Height="100*"></RowDefinition>
        </Grid.RowDefinitions>

            <TextBlock Text="Search Member" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"></TextBlock>
            <TextBlock Text="Member Details" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"></TextBlock>
            <TextBox Name="txtMEMSearch" Background="Orange" Grid.Column="0" Grid.Row="1"></TextBox>
            <ListBox Name="lstSearchMembers" Grid.Row="2"
                     BorderBrush="Black" DisplayMemberPath="Name"
                     ItemsSource="{Binding ElementName=bindingToObject,
                                           Path=Clients}" />


        <TabControl Name="mainTabControl" Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Margin="5">
            <TabItem Header="Member Details" Name="memDetailTab">
                <Grid Name="mainTabGrid">
                    <Grid Name="grdDetailsTop" Height="175" VerticalAlignment="Top">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="150"></ColumnDefinition>
                            <ColumnDefinition Width="200"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>

                        <GroupBox Header="Picture">
                            <StackPanel>
                                <Image Height="125" Width="125"></Image>
                            </StackPanel>
                        </GroupBox>


*************PROBLEM AREA******************

                        <StackPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
                            <TextBlock
                                VerticalAlignment="Top"
                                Margin="5"
                                Height="25">Member Code:</TextBlock>
                            <TextBlock
                                VerticalAlignment="Top"
                                Margin="5"
                                Width="75"
                                Height="25"></TextBlock>

                            <TextBlock
                                Margin="5"
                                Height="25"
                                Width="100">Family Code:</TextBlock>

                            <TextBlock
                                Margin="5"
                                Width="75"
                                Height="25"></TextBlock>

                            <TextBlock
                                VerticalAlignment="Bottom"
                                Margin="5"
                                Height="25"
                                Width="100">Balance Due:</TextBlock>

                            <TextBlock
                                Margin="5"
                                VerticalAlignment="Bottom"
                                Width="75"
                                Height="25"></TextBlock>
                        </StackPanel>  

******************************************                                                   
                    </Grid>

                    <Grid Name="grdDetailsBottom">                   
                    </Grid>                  
                </Grid>
          </TabItem>
        </TabControl>         
    </Grid>
</Page>

Answer 1

您在TextBlock 上缺少VerticalAlignment = "Top"，因此，它默认为Stretch，它将使文本在可用的垂直空间中居中。如果您设置该属性，您会看到它向上移动以与同一 StackPanel 中的另一个 TextBoxes 保持一致。

实际上并没有将 TextBox 移动到下一列，而是定义了它所在列的固定宽度（在本例中，第 1 列的宽度为 200）。但是该列的内容（StackPanel 的宽度超过 200 个单位，因此它们推入下一个网格列。要将所有 TextBoxes 保留在第 1 列中，您要么需要加宽列，因此它们可以适应，缩小TextBoxes 的大小或设置宽度Auto，这样它就会自动调整大小以适应其内容。如果你看一下，你会占用175 个单位，TextBlocks 2 和 3，离开StackPanel 中的其余 TextBlocks 只有 25 个单位。空间不足。

<StackPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
  <TextBlock VerticalAlignment="Top" Margin="5" Height="25">Member Code:</TextBlock>
  <TextBlock VerticalAlignment="Top" Margin="5" Width="75" Height="25"></TextBlock>
  <TextBlock VerticalAlignment="Top" Margin="5" Height="25" Width="100">Family Code:</TextBlock>
  ... other text boxes ...
</StackPanel>

这将解决垂直布局问题，但不能解决水平布局问题。这需要更改网格列的大小或内容的大小。

根据您在下面的评论，我相信您正在寻找WrapPanel，它会在空间不足时自动将项目换行到下一行（水平或垂直）。

<WrapPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
  <TextBlock VerticalAlignment="Top" Margin="5" Height="25">Member Code:</TextBlock>
  <TextBlock VerticalAlignment="Top" Margin="5" Width="75" Height="25"></TextBlock>
  <TextBlock VerticalAlignment="Top" Margin="5" Height="25" Width="100">Family Code:</TextBlock>
  ... other text boxes ...
</WrapPanel>

这种布局当然看起来更好。但是 - 我不知道您的具体要求，但是我建议不要使用具有固定边距和大小的 WrapPanel，而是使用 Grid 和 ColumnDefinitions 和 RowDefinitions 来组织此类布局中的项目。 Grid 提供了更高级别的灵活性，并允许项目根据系统字体大小、用户调整视图大小以及其他不受您控制的因素自动调整大小。如果您设置固定的高度/宽度，您将失去这种灵活性。再说一次，我不知道你的要求，所以也许这对你来说是最好的解决方案，但在大多数情况下，我强烈推荐Grid。