2010-07-06 32 views
8

我想有childGrid在parentGrid的第二列内网格(我想在chilGrid有两列:第一为标签,第二个用于textboxs)电网在XAML

我怎么可以做这样的事情?我尝试下面的代码:

<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> 

回答

17

基于您的代码,就搞掂了一点:

<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> 

注意ColumnDefinition没有高度 - 他们有一个宽度。您还需要分别定义ColumnDefinitions和RowDefinitions - 将它们混合在外部网格中。我从外部网格中删除了RowDefinitions,因为您似乎没有使用它们。你的内部网格有两列和四行。

1

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> 
6

您可能会觉得这很有用。尝试使用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>