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

5.                        Expander

Expander is a layout in which we can add control and expand it when we need. When have less space in our application then we can use expander layout. We can assign the expand direction either down, up, left or right. At the time of expander creation we can assign IsExpanded property true or false. It has the same drawback as GroupBox that it can contain only one control.

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

    <Expander IsExpanded="False" ExpandDirection="Down" Header="Expand To See the Content">

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

    </Expander>

</Window>

The output is as follows:-

Figure 5

When you click on expander it will show the content.

6.                        Ink canvas

Ink canvas allows us to directly write on our screen we write in paint with free hand. This is the one the most important layout introduced in the WPF. If we want to create application where we want to allow user to write something on scree directly then we can use ink canvas.

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

   

    <InkCanvas></InkCanvas>

</Window>

The output of it as follows:-

Figure 6