WPF: Grid

This entry is part 9 of 54 in the series Learn WPF

If you create a WPF application using Visual Studio, Visual Studio will first create a Grid control for us.

Grid, together with StackPanel are indeed commonly used.  Here in the cell, I have put some text inside the cell using TextBlock.

I have used margin to create some padding between the text and the cells.

Notice that we first create the columns and the rows using Grid.ColumnDefinitions and Grid.RowDefinitions and we put the TextBlock inside the cell specified by Grid.Row and Grid.Column.

It is possible to span the column using Grid.ColumnSpan.

<Window x:Class="Grid.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="300" Height="350">
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />

        <TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0" Margin="10,10">2005 Products Shipped</TextBlock>
        <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0" Margin="10,10">Quarter 1</TextBlock>
        <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1" Margin="10,10">Quarter 2</TextBlock>
        <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2" Margin="10,10">Quarter 3</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="0" Margin="10,10">50000</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="1" Margin="10,10">100000</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="2" Margin="10,10">150000</TextBlock>
        <TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="3" Margin="10,10">Total Units: 300000</TextBlock>



Series Navigation<< WPF: StackPanel
WPF: Static Resource >>

Leave a comment

Leave a Reply