wpf XAML 中网格内的网格

Grid inside Grid in XAML

提问by user278618

I want to have a childGrid in second column of parentGrid (in childGrid I want to have two columns: first for label, second for textbox)

我想在 parentGrid 的第二列中有一个 childGrid（在 childGrid 中我想有两列：第一列用于标签，第二列用于文本框）

How can I do Something like that? I tried the following code:

我怎么能做这样的事情？我尝试了以下代码：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Height="*"/>
        <ColumnDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.ColumnDefinitions>
    <Grid Grid.Column=1>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Height="*"/>
            <ColumnDefinition Height="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
    </Grid>
</Grid>

回答by slugster

Based on your code, just fixed up a little:

根据您的代码，只需稍微修复一下：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition  />
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
    </Grid>
</Grid>

Note that ColumnDefinitiondon't have a Height- they have a Width. You also need to define the ColumnDefinitions and RowDefinitions separately - you have them mixed together in your outer grid. I removed the RowDefinitions from the outer grid because you don't appear to be using them. Your inner grid has two columns and four rows.

请注意，ColumnDefinition没有Height- 它们有Width。您还需要分别定义 ColumnDefinitions 和 RowDefinitions - 在外部网格中将它们混合在一起。我从外部网格中删除了 RowDefinitions，因为您似乎没有使用它们。您的内部网格有两列四行。

回答by Robert Rossney

You might find this useful. Try pasting this into a page using Kaxaml and playing around with the various parameters of the objects in the outer Grid. I find using Kaxaml for prototyping and experimenting with XAML layouts indispensable.

您可能会发现这很有用。尝试使用 Kaxaml 将其粘贴到页面中，并尝试使用外部 Grid 中对象的各种参数。我发现使用 Kaxaml 进行原型设计和试验 XAML 布局是必不可少的。

<Grid>  
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition/>
    <RowDefinition/>
  </Grid.RowDefinitions>

  <!-- 
     When I'm composing grids in XAML, I group things together by type, not by where
     they live in the grid.  This turns out to make a lot of maintenance tasks
     easier.

     Also, since Grid.Row and Grid.Column default to 0, a lot of people (and tools)
     omit them if that's their value.  Not me.  It lets me quickly check to make
     sure that content is where I think it is, just by looking at how it's organized
     in the XAML.
  -->

  <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Background="Lavender" Padding="10" HorizontalAlignment="Stretch">Here's the first row of the outer grid.</TextBlock>
  <TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Background="Lavender" Padding="10" HorizontalAlignment="Stretch">Here's the third row of the outer grid.</TextBlock>

  <TextBlock Grid.Row="1" Grid.Column="0" Background="AliceBlue" Padding="10">Here's the first column of the second row.</TextBlock>

  <Grid Grid.Row="1" Grid.Column="1">
    <Grid.ColumnDefinitions>
      <!--
         This part's pretty important.  Setting up the SharedSizeGroups for these
         two columns keeps the labels and text boxes neatly arranged irrespective of
         their length.
      -->
      <ColumnDefinition SharedSizeGroup="Label"/>
      <ColumnDefinition SharedSizeGroup="TextBox"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>

    <Label Grid.Row="0" Grid.Column="0">First label</Label>
    <Label Grid.Row="1" Grid.Column="0">Second label</Label>
    <Label Grid.Row="2" Grid.Column="0">Third label, containing unusually long content</Label>

    <TextBox Grid.Row="0" Grid.Column="1">First text box, containing unusually long content</TextBox>
    <TextBox Grid.Row="1" Grid.Column="1">Second text box</TextBox>
    <TextBox Grid.Row="2" Grid.Column="1">Third text box</TextBox>

  </Grid>

</Grid>

回答by Hardryv

Phenevo, I've done XAML UI design extensively this year. Try this out, you can easily migrate the code to either a Window or a UserControl. I color-coded the grids and panels so that you could affirm their layout in real time -- blow away the background parameters when you're satisfied.

Phenevo，我今年做了大量的 XAML UI 设计。试试这个，您可以轻松地将代码迁移到 Window 或 UserControl。我对网格和面板进行了颜色编码，以便您可以实时确认它们的布局——当您满意时，将背景参数吹走。

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="UatControlLibrary.sampleChilGrid"
    x:Name="UserControl"
    MinWidth="400"
    MinHeight="300"
    Width="auto"
    Height="auto">
    <Grid
        x:Name="LayoutRoot">
        <Grid
            x:Name="parentGrid"
            Width="auto"
            Height="auto"
            Background="Red">
            <Grid.ColumnDefinitions>
                <ColumnDefinition
                    Width="1*" />
                <ColumnDefinition
                    Width="1*" />
            </Grid.ColumnDefinitions>
            <Grid
                x:Name="chilGrid"
                Width="auto"
                Height="auto"
                Background="Black"
                Grid.Column="1"
                Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition
                        Width="1*" />
                    <ColumnDefinition
                        Width="1*" />
                </Grid.ColumnDefinitions>
                <StackPanel
                    x:Name="stkpnlLabels"
                    Background="White"
                    Grid.Column="0"
                    Grid.Row="0" />
                <StackPanel
                    x:Name="stkpnlTextboxes"
                    Background="Blue"
                    Grid.Column="1"
                    Grid.Row="0" />
            </Grid>
        </Grid>
    </Grid>
</UserControl>

回答by zar

It might come a little confusing how to put controls in sub grids. Here is an example.

如何在子网格中放置控件可能会让人有点困惑。这是一个例子。

We have 3 * 3 cell grid. And then center cell is further divided in 3 rows where each row has a button.

我们有 3 * 3 单元格。然后中心单元格进一步分为 3 行，每行都有一个按钮。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="1" Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
            <Button Grid.Row="0" Content="Button1"/>
            <Button Grid.Row="1" Content="Button2"/>
            <Button Grid.Row="2" Content="Button3"/>
    </Grid>
</Grid>

Result:

结果：