Grid inside Grid in XAML - wpf

Question

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

Answer 1

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 ColumnDefinition don'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.

Answer 2

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

Answer 3

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

Answer 4

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