2010-07-06 19 views
8

Voglio avere childGrid nella seconda colonna della parentGrid (in chilGrid voglio avere due colonne: in primo luogo per le etichette, secondo per textboxs)griglia all'interno Griglia in XAML

Come posso fare qualcosa di simile? Ho provato il seguente codice:

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

risposta

17

Sulla base di codice, appena sistemato un po ':

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

noti che ColumnDefinition non hanno un Altezza - hanno una larghezza . Devi inoltre definire ColumnDefinitions e RowDefinitions separatamente: li hai mescolati insieme nella tua griglia esterna. Ho rimosso le RowDefinitions dalla griglia esterna perché non sembra che le stiate usando. La tua griglia interna ha due colonne e quattro righe.

1

Phenevo, ho eseguito estesamente l'interfaccia utente XAML quest'anno. Prova questo, puoi facilmente migrare il codice a una finestra oa un UserControl. Ho codificato a colori le griglie e i pannelli in modo da poter affermare il loro layout in tempo reale, spazzando via i parametri di sfondo quando sei soddisfatto.

<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

Potrebbe risultare utile. Prova ad incollare questo in una pagina usando Kaxaml e giocando con i vari parametri degli oggetti nella Griglia esterna. Trovo indispensabile l'utilizzo di Kaxaml per la prototipazione e la sperimentazione con i layout 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>