WPF布局问题

Question

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

右栏有一个更复杂的地方，我有一个tabcontrol启动。然后我的TabItem和里面，我有我的主网格，然后里面，我有2个网格。哪些是grdDetailsTop，然后是grdDetailsBottom。

grdDetailsTop有3列，左边是一个带有边框的图片，中间应该是会员代码：'TextBox'，在那之下应该是家庭代码：'TextBox'，然后最后在那下面我想要摆放平衡：'TextBox'

我试过的方式是，我有grdDetailsTop网格，第一列有3列，我放置了一个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都保留下来，您需要扩大列，以便它们可以合适，缩小TextBoxes的大小或设置宽度Auto，因此它会自动将其自身的大小设置为其内容。如果看一下它，则需要使用TextBlocks 2和3的175个单元，其余TextBlocks只剩下25个单元该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，我会推荐使用Grid与ColumnDefinitions和RowDefinitions组织此类布局中的项目。 Grid提供了更高级别的灵活性，并允许项目根据系统字体大小自动调整大小，用户调整视图的大小和其他控制因素。如果您设置固定的高度/宽度，则会失去灵活性。再次，我不知道你是需求，所以也许这对你来说是最好的解决方案，但在大多数情况下，我强烈推荐使用Grid。