Layout in WPF Part 2 (GroupBox, Expander, Ink canvas)

 Layout in WPF Part 2 (GroupBox, Expander, Ink canvas)
Layout in WPF Part 1 (Grid, Stack and Dock)

4.                        GroupBox

When we need to create the controls in the group then we use GroupBox Layout. The drawback of group box is that it can contain only one control, so we have to create another layout inside group box.

We can assign a Header to this group by using Header Property.

For Example:-

<Window x:Class="WpfApplication2.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Tech Altum" Height="500" Width="700">

    <GroupBox Header="Example of Group Box">

        <DockPanel>

        <Button DockPanel.Dock="Left" >Left Button</Button>

        <Button DockPanel.Dock="Bottom">Bottom Button</Button>

        <Button DockPanel.Dock="Right">Right Button</Button>

        <Button DockPanel.Dock="Top">Top Button</Button>

        <Button>Extra Space</Button>

    </DockPanel>

    </GroupBox>

</Window>

The output of this code as follows:-

Figure 4

WPF Lesson 2:-Layout in WPF Part 1 (Grid, Stack and Dock)

Layout in WPF Part 1 (Grid, Stack and Dock)

In this topic we describe the layouts supported by WPF. With the help of layout we can arrange our controls in our screen according to our own way.

Following are the some layout supported by WPF

1.  Grid Layout

The Grid layout arranges control in WPF in a tabular format which means in the form of Row and Column. It works same as we use table Tag in HTML.

We define Row in Grid Layout in WPF by using RowDefinition and Column by using ColumnDefinition.

For Example:-

We need 4 rows and 2 columns in Grid Layout. The code for this are as follows:-

<Window x:Class="WpfApplication2.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Tech Altum" Height="500" Width="700">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition/>

            <RowDefinition/>

            <RowDefinition/>

            <RowDefinition/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition/>

            <ColumnDefinition/>

        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.Column="0” >Enter your Name</Label>

        <Label Grid.Row="1" Grid.Column="0” >Enter your Password</Label>

        <Label Grid.Row="2" Grid.Column="0” >Re-Type your Password</Label>

        <TextBox Grid.Row="0" Grid.Column="1" />

        <TextBox Grid.Row="1" Grid.Column="1" />

        <TextBox Grid.Row="2" Grid.Column="1" />

        <Button Grid.Row="3" Grid.Column="1">Submit your DATA</Button>

    </Grid>

</Window>