cuadrícula dentro de la red en XAML

Question

Quiero tener childGrid en la segunda columna de parentGrid (en chilGrid Quiero tener dos columnas: en primer lugar para las etiquetas, segundo para textboxs)

¿Cómo puedo hacer algo así? He intentado el siguiente código:

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

Answer 1

Sobre la base de su código, simplemente preparada una ligera:

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

Tenga en cuenta que ColumnDefinition no tienen una altura - tienen una anchura . También necesita definir ColumnDefinitions y RowDefinitions por separado: los tiene mezclados en su cuadrícula externa. Eliminé las RowDefinitions de la cuadrícula externa porque parece que no las estás usando. Su cuadrícula interna tiene dos columnas y cuatro filas.

Answer 2

Phenevo, he hecho el diseño de XAML UI extensamente este año. Pruébelo, puede migrar fácilmente el código a una ventana o a un control de usuario. Codifiqué por colores las cuadrículas y los paneles para que pudieras afirmar su diseño en tiempo real: elimina los parámetros de fondo cuando estés satisfecho.

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

Answer 3

Puede que le sea útil. Intente pegar esto en una página usando Kaxaml y jugando con los diversos parámetros de los objetos en la rejilla exterior. Me parece que usar Kaxaml para prototipos y experimentar con diseños XAML es indispensable.

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