C# - Grids in WPF

Details: Written by Frode Meek; Parent Category: Datorer; Category: Programmering; Published: 13 May 2020; Created: 13 May 2020; Last Updated: 13 May 2020; Hits: 604

After(a lot of time after(more acurately 2020.04.13)) making the application I wrote about in this article(My first C# Application), I found out that I had to get control of the grids and the positioning classes/utilities, like StackPanels and DockPanels, to get the controls positioned where you want/expect them. You will see the whole example at the end. I just have to talk a little bit about it.

What I did was to start out with a 3x3 grid. I did this in XAML. In most cases this simplifies the code, and is good enough for the application. But It started out like this:

<Grid x:Name="gridMain3x3">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="colOne" />
            <!--Make second column 2/3 of the width-->
            <ColumnDefinition x:Name="colTwo" Width="2*"/>
            <ColumnDefinition x:Name="colThree" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <!--Make first row 2/3 of the overall height-->
            <RowDefinition x:Name="rowOne" Height="2*"/>
            <RowDefinition x:Name="rowTwo" />
            <RowDefinition x:Name="rowThree" />
        </Grid.RowDefinitions>

Line 1: Create the grid
Line 2: Create Columns
Line 8: Create Rows

When these columns and rows are defined, everything will be A-OK! The system will reposition and rescale automatically. Actually a beautiful thing. Just use them to position your controls. An example is to put some controls in position (1,0)(row 1, column 0) using a StackPanel:

</Grid.RowDefinitions>
        <!--Make a stackpanel in pos (0,1) of the grid to organize elements at this position in a vertical manner -->
        <StackPanel x:Name="sp01" Grid.Row="1" Grid.Column="0" Orientation="Vertical" Background="Bisque">
            <TextBlock x:Name="txt01" Text="This text will be in position (0,1)" Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Background="AliceBlue" />
            <Button x:Name="btn01" Content="btn01" Margin="5,0,5,0"/>
            <TextBlock x:Name="txt01More" Text="Some more text in position (0,1)" Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Background="AliceBlue" />
        </StackPanel>

So I create a StackPanel at position (1,0) with a vertical orientation (All children will be placed vertically. First one on top of the next and so on)...I know that I've actually written the row and column index of the children. This is NOT necessary. You can see that in line 5, where the button is placed between the two textblocks. These controls are children of StackPanel and will be placed inside that perimeter of the StackPanel's area of definition. I think the reason for putting the row and column index of these columns was that in an early stage I did not have a StackPanel.

Another example within the 3x3 grid. Create a grid within a grid(at a row,column point):

</DockPanel>
       <Grid x:Name="gridInternal21" Grid.Column="2" Grid.Row="1" Background="Black">
            <Grid.ColumnDefinitions>
                <ColumnDefinition  Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Button x:Name="btn2100" Content="btn2100(0,0)-" Margin="3" Grid.Column="0" Grid.Row="0" />
            <Button x:Name="btn2101" Content="btn2101(0,1)-" Margin="3" Grid.Column="0" Grid.Row="1" />
            <Button x:Name="btn2111" Content="btn2111(1,1)-" Margin="3" Grid.Column="1" Grid.Row="1" />
            <Button x:Name="btn2110" Content="btn2110(1,0)-" Margin="3" Grid.Column="1" Grid.Row="0" />
            <TextBlock x:Name="txt2102" Text="txt2102 - inside internal grid"  Grid.Column="0" Grid.Row="2" Background="AntiqueWhite" Margin="3" TextWrapping="Wrap" />
            <TextBlock x:Name="txt2112" Text="txt2112 - inside internal grid"  Grid.Column="1" Grid.Row="2" Background="DarkBlue"  Margin="3"  Foreground="White" FontWeight="Bold" TextWrapping="Wrap"/>
        </Grid>

Line 2: Create a new grid(2x3, col, row)) at position (1,2), Row 1, column 2. From line 12 and out, you can see how I place Buttons and TextBlock-controls at different positions withing "the internal grid.

I'm not going to say anything more about grids. It should be clear at this point. I'm going to make another example using DockPanel since they are a little bit different from StackPanels. See below:

</StackPanel>
        <DockPanel x:Name="dp10" Grid.Column="1" Grid.Row="0" Background="CadetBlue">
            <Button x:Name="btn10" DockPanel.Dock="Top" Content="btn10" Height="20" Margin="3" />
            <Button x:Name="btn10_2" Content="btn10-2, (1,0)-bottom" Height="20" DockPanel.Dock="Bottom" Margin="3"/>
            <Button x:Name="btn10_3" Content="btn10-3 (1,0)-left" Grid.Column="1" Grid.Row="0" DockPanel.Dock="Left" Margin="3" />
            <Button x:Name="btn10_4" Content="btn10-4 (1,0)-right" DockPanel.Dock="Right"  Margin="3"/>
            <Button x:Name="btn10_5" Content="btn10-5 (1,0)-"  Margin="3"/>
        </DockPanel>

When using a DockPanel you can position the controls "top", "bottom", "left", "right". It will then try to position all other controls as best as it can through the center, compared to the controls that you have defined before. Must admit that I do not like it that much.I don't feel that I have control on the positioning..but hey..some people might.

I tried a lot of different things when it came to controls and positioning. The result was this:

This is the original size(almost) of the window. The next pic shows the application maximized in 2560x1440, and then minimized to fit the article width :

It's big, but all proportions are correct, and that's what's important.

The complete XAML-code can be seen below:

<Window x:Class="ColumnRowTest.MainWindow"
        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"
        xmlns:local="clr-namespace:ColumnRowTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <!--A Style that affects all TextBlocks-->
        <Style TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="FontFamily" Value="Comic Sans MS"/>
            <Setter Property="FontSize" Value="10"/>

        </Style>
        <Style TargetType="Button">
            <!--A Style that affects all Buttons-->
            <Setter Property="FontFamily" Value="Bookman Old Style" />
        </Style>
    </Window.Resources>
    <Grid x:Name="gridMain3x3">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="colOne" />
            <!--Make second column 2/3 of the width-->
            <ColumnDefinition x:Name="colTwo" Width="2*"/>
            <ColumnDefinition x:Name="colThree" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <!--Make first row 2/3 of the overall height-->
            <RowDefinition x:Name="rowOne" Height="2*"/>
            <RowDefinition x:Name="rowTwo" />
            <RowDefinition x:Name="rowThree" />
        </Grid.RowDefinitions>
        <!--Make a stackpanel in pos (0,1) of the grid to organize elements at this position in a vertical manner -->
        <StackPanel x:Name="sp01" Grid.Row="1" Grid.Column="0" Orientation="Vertical" Background="Bisque">
            <TextBlock x:Name="txt01" Text="This text will be in position (0,1)" VerticalAlignment="Center" HorizontalAlignment="Center" Background="AliceBlue" />
            <Button x:Name="btn01" Content="btn01" Margin="5,0,5,0"/>
            <TextBlock x:Name="txt01More" Text="Some more text in position (0,1)" Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Background="AliceBlue" />
        </StackPanel>
        <DockPanel x:Name="dp10" Grid.Column="1" Grid.Row="0" Background="CadetBlue">
            <Button x:Name="btn10" DockPanel.Dock="Top" Content="btn10" Height="20" Margin="3" />
            <Button x:Name="btn10_2" Content="btn10-2, (1,0)-bottom" Height="20" DockPanel.Dock="Bottom" Margin="3"/>
            <Button x:Name="btn10_3" Content="btn10-3 (1,0)-left" Grid.Column="1" Grid.Row="0" DockPanel.Dock="Left" Margin="3" />
            <Button x:Name="btn10_4" Content="btn10-4 (1,0)-right" DockPanel.Dock="Right"  Margin="3"/>
            <Button x:Name="btn10_5" Content="btn10-5 (1,0)-"  Margin="3"/>

        </DockPanel>

        <Grid x:Name="gridInternal21" Grid.Column="2" Grid.Row="1" Background="Black">
            <Grid.ColumnDefinitions>
                <ColumnDefinition  Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Button x:Name="btn2100" Content="btn2100(0,0)-" Margin="3" Grid.Column="0" Grid.Row="0" />
            <Button x:Name="btn2101" Content="btn2101(0,1)-" Margin="3" Grid.Column="0" Grid.Row="1" />
            <Button x:Name="btn2111" Content="btn2111(1,1)-" Margin="3" Grid.Column="1" Grid.Row="1" />
            <Button x:Name="btn2110" Content="btn2110(1,0)-" Margin="3" Grid.Column="1" Grid.Row="0" />
            <TextBlock x:Name="txt2102" Text="txt2102 - inside internal grid"  Grid.Column="0" Grid.Row="2" Background="AntiqueWhite" Margin="3" TextWrapping="Wrap" />
            <TextBlock x:Name="txt2112" Text="txt2112 - inside internal grid"  Grid.Column="1" Grid.Row="2" Background="DarkBlue"  Margin="3"  Foreground="White" FontWeight="Bold" TextWrapping="Wrap"/>
        </Grid>
        <Grid x:Name="grid00" Grid.Column="0" Grid.Row="0" Background="BurlyWood">
            <TextBlock x:Name="txt00" Text="This text will be in position (0,0)" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Aqua"/>
        </Grid>
        <Grid x:Name="grid20" Background="YellowGreen" Grid.Column="2" Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition x:Name="row0Header" Height="20" />
                <RowDefinition x:Name="row1" />
                <RowDefinition x:Name="row2" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="col0" />
                <ColumnDefinition x:Name="col1"/>
            </Grid.ColumnDefinitions>
            <TextBlock x:Name="txt20" Text="This text spans column 0 and 1" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Background="LightGray" />
            <TextBlock Text="This is some text that will have a small text and be in column 0 and row 1" Grid.Column="0" Grid.Row="1" Name="text2001" TextWrapping="Wrap" />
            <TextBlock Text="This is some text that will have a small text and be in column 1 and row 1. And this is bla bla bla" Grid.Column="1" Grid.Row="1" Name="text2011" TextWrapping="Wrap" />
            <TextBlock Text="This is some text that will have a small text and be in column 1 and row 1. And this is bla bla bla bla bla" Grid.Column="0" Grid.Row="2" Name="text2002" TextWrapping="Wrap" />
            <TextBlock Text="This is some text that will have a small text and be in column 1 and row 1. And this is bla bla bla is bla bla bla" Grid.Column="1" Grid.Row="2" Name="text2012" TextWrapping="Wrap" />
        </Grid>
        
        <Grid Background="Beige" Grid.Row="2" Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="2*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Expander Grid.Row="0" IsExpanded="False" Background="AntiqueWhite" BorderBrush="BlanchedAlmond" Margin="1" Header="Expand to see">
                <TextBlock TextWrapping="Wrap" FontSize="9">  
                    Here we can have text which can be hidden/shown using the built-in functionality of the Expander control.
                </TextBlock>
            </Expander>
            <TextBlock x:Name="txt02" Text="This text will be in position (0,2)" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>
            
        

        <ScrollViewer x:Name="scrollViewer12" Grid.Column="1" Grid.Row="2" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <Image Source="D:\Users\Frode Meek\Pictures\fo76_swimsuit.png" Stretch="None"  />
        </ScrollViewer>
        <TextBlock x:Name="txt12" Text="This text will be in position (1,2)" Grid.Column="1" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" />


        <Expander Header="Press to see picure" Grid.Column="2" Grid.Row="2">
            <Image Source="D:\Users\Frode Meek\Pictures\dr_chartrand_house.bmp" />
        </Expander>
        <Border BorderBrush="Black" Background="Cyan" BorderThickness="3" Grid.Column="1" Grid.Row="1">
            <StackPanel Background="Aqua"  x:Name="sp11" Grid.Row="1" Grid.Column="1" Margin="3,3,3,3">
            
                <TextBlock x:Name="txt11" Text="This text will be in position (1,1)" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center" />
            
        </StackPanel>
        </Border>
    </Grid>
</Window>

C# - Grids in WPF

Velkommen

5 Siste

Kategorier

Mest Lest

Nettlenker