Arrange the children for Grid : Grid « Windows Presentation Foundation « C# / C Sharp

1. C# / C Sharp
2. Windows Presentation Foundation
3. Grid

Arrange the children for Grid

        

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  Title="About WPF" 
  Background="OrangeRed">
    <Grid Background="LightBlue">
      <!-- Define four rows: -->
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
      </Grid.RowDefinitions>
    
      <!-- Define two columns: -->
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>
    
      <Label    Grid.Row="0" Grid.Column="0" Background="Blue" Foreground="White" HorizontalContentAlignment="Center"
                Grid.ColumnSpan="2">Start Page</Label>
      <GroupBox Grid.Row="1" Grid.Column="0" Background="White" Header="Recent Projects">...</GroupBox>
      <GroupBox Grid.Row="2" Grid.Column="0" Background="White" Header="Getting Started">...</GroupBox>
      <GroupBox Grid.Row="3" Grid.Column="0" Background="White" Header="Headlines">...</GroupBox>
      <GroupBox Grid.Row="1" Grid.Column="1" Background="White" Header="Online Articles" Grid.RowSpan="3">
        <ListBox>
          <ListBoxItem>Article #1</ListBoxItem>
          <ListBoxItem>Article #2</ListBoxItem>
          <ListBoxItem>Article #3</ListBoxItem>
          <ListBoxItem>Article #4</ListBoxItem>
        </ListBox>
      </GroupBox>
    </Grid>


</Window>

   
    
    
    
    
    
    
    
  

Related examples in the same category

1.	GridSplitter Example
2.	GridSplitter as Entire Column or Row
3.	ColumnDefinition.Width=Auto
4.	ColumnDefinition.Width=*
5.	Grid With Splitter
6.	Bind to Grid Width and Height
7.	Simple Grid.xaml
8.	Use Grid to layout a Calendar
9.	Grid with Rectangle and GeometryDrawing
10.	Set Grid Row and Column for a Button
11.	Arrange UI Elements in a Grid
12.	Grid with Column Definition and Row definition
13.	Align Ellipses along with Grid
14.	Use GridSplitter
15.	Define rows / columns for Grid
16.	Using Grid.ColumnSpan
17.	Set Grid Row Height and Column Width to Auto
18.	Mixing row height styles
19.	Show Grid Lines
20.	Multiple Items in a Grid Cell
21.	Grid in ScrollViewer
22.	Margin vs Padding and Grid
23.	Without Panel.ZIndex
24.	Panel.ZIndex
25.	Stretched GridSplitter
26.	Window with Grid
27.	Set Row Height and column Width for Grid
28.	Set Row and Column Index when Adding Buttons to Grid
29.	Put more than one Object to one Grid Cell
30.	Set Column and Row index when adding Controls to a Grid
31.	Nested Grid
32.	Shared Size Group
33.	Empty RowDefinition and ColumnDefinition
34.	Grid Splitter and Alignment
35.	Use the Grid element to create a standard user interface (UI) dialog box.
36.	Place and size rectangles and ellipses in Grid cells
37.	Use Image as the Grid background
38.	Automatic Width and Height
39.	Grid with SharedSizeGroup
40.	Layout a Form with StackPanel and Grid
41.	Clear All Columns
42.	Clear All Rows
43.	Remove One Column
44.	Remove One Row
45.	The current number of Columns
46.	The current number of Rows
47.	Remove 5 Columns with ColumnDefinitions.RemoveRange
48.	Remove 5 Row with RowDefinitions.RemoveRange
49.	Contains Row
50.	Contains Column?
51.	Insert Row
52.	Insert Column
53.	Is Grid ReadOnly
54.	Grid mouse down event
55.	Grid Preview mouse down event
56.	Setting Grid row heights in code
57.	Layout Controls with Grid in code
58.	Set control to specific row and column in code
59.	Show Grid lines in code
60.	Programmatically use the positioning methods of Grid
61.	Add a ColumnDefinition to Grid
62.	Add a RowDefinition to Grid
63.	Grid PreviewMouseDown action and MouseDown action
64.	Grid MouseLeftButtonDown action and PreviewMouseLeftButtonDown action