1

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

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

grdDetailsTop 有 3 列，其中左侧是带有边框的图像，中间应该是成员代码：'TextBox'，下面应该是家庭代码：'TextBox'，最后我想在下面放置 Balance：'TextBox'

我尝试的方法是，我在第一列中有 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>

截屏

4

1 回答 1

1

您缺少VerticalAlignment = "Top"on that TextBlock，因此默认情况下Stretch，它将在可用垂直空间中居中显示文本。如果您设置该属性，您会看到它向上移动以与TextBoxes同一StackPanel.

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

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

于 2013-03-02T19:35:56.923 回答