WPF Expander and ExpandDirection Property in VB.NET

In this article we demonstrate on what is Expander and its ExpandDirection property.
  • 3326
 

Introduction

In this article I am going to explain about the Expander control and its ExpandDirection property in WPF. The Expander control is like a GroupBox but with the additional features to collapse and expand its content. Exapnder is a Nifty control that will allow you to show and hide the controls you placed on it. We can place the Expander anywhere on our page and embed any content inside the DropDown area. The Expander control is derived from HeaderedContentControl so it has a header property to set the HeaderContent, and a Content property for the expandable content. You can see the Expander control in below image.

expender1.gif
 

How to set the Direction of the Expanded Content Area of Expander

The ExpandDirection Property gets or sets the Direction in which the content would Expand. We can set the direction of the Expanded content area of the Expander in one of the four Direction Down, Up, Left, Right by this property of the Expander. The Default value of the ExpandDirection Property is ExpandDirection.Down

Other Properties of Expander

  • IsExpanded:- The Default value of the IsExpanded Property is False. If the content window is Expanded the value of the property is true;otherwise False.

  • Header:- Header property of the Expander control gets the content of the Header Part.

  • Name:- This property gets the Name of the Expander control.

  • Height:- This property specifies the Height of the Object in Pixel.

  • IsEnabled:- This property specifies whether a control can accept user input or not.

You can see the Properties of Expander control in below Image.

expender3.gif
 

Getting Started

We are discussing as an example that how to use Expander control and its ExpandDirection property in WPF.

When we Drag the controls and sets all the properties our window will look like below.

expander2.gif
 

This is my XAML code

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="278" Width="353" Background
="Black" >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="190"/>
            <ColumnDefinition Width="140"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
<
StackPanel Grid.Column="0" Grid.Row="0" >
            <Expander Name="myFirstExpander" Background="SkyBlue"
HorizontalAlignment="Left" Header="My First Expander" 
ExpandDirection="Down" IsExpanded="True" Width="139" Height="71">
                <TextBlock TextWrapping="Wrap">
                        Expander Example
                
</TextBlock> 
            
</Expander>
        </StackPanel>
        <StackPanel Grid.Column="1" Grid.Row="0" >
            <TextBlock Margin="0, 10, 3, 3" FontSize="12" TextWrapping="Wrap" Foreground="White"Height="70"
Width="131" >
Check to change the ExpandDirection property on My First Expander
            
</TextBlock>
            <StackPanel >
                <RadioButton Name="MyExpandDown" Margin="0,10,0,10" 
IsChecked="True"
Checked="ChangeExpandDirection"
GroupName="ExpandDirectionProperty" Foreground="White" Height="20"Width="124">                     
                    Expand Down
                
</RadioButton>
                <RadioButton Name="MyExpandUp" Margin="0,0,0,10"
Checked="ChangeExpandDirection"
GroupName="ExpandDirectionProperty" Foreground="White" Height="18" Width="121">
                    Expand Up
                
</RadioButton>
                <RadioButton Name="MyExpandLeft" Margin="0,0,0,10"
Checked="ChangeExpandDirection"
GroupName="ExpandDirectionProperty" Foreground="White" Height="19" Width="120">
                    Expand Left
                
</RadioButton>
                <RadioButton Name="MyExpandRight" Margin="0,0,0,10"
Checked="ChangeExpandDirection"
GroupName="ExpandDirectionProperty" Foreground="White" Height="20" Width="119">
                    Expand Right
                
</RadioButton>
            </StackPanel>
        </StackPanel>
</
Grid>
</
Window>

The NameSpaces which I have used are shown Below.

Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Media
Imports System.Windows.Navigation
Imports System.Windows.Shapes

This is my xaml.vb code

   
 
Private Sub ChangeExpandDirection(sender As Object, e As RoutedEventArgs)
        If CType(MyExpandDown.IsChecked, [Boolean]Then
            myFirstExpander.ExpandDirection = ExpandDirection.Down
        ElseIf CType(MyExpandUp.IsChecked, [Boolean]Then
            myFirstExpander.ExpandDirection = ExpandDirection.Up
        ElseIf CType(MyExpandLeft.IsChecked, [Boolean]Then
            myFirstExpander.ExpandDirection = ExpandDirection.Left
        ElseIf CType(MyExpandRight.IsChecked, [Boolean]Then
            myFirstExpander.ExpandDirection = ExpandDirection.Right
        End If
        myFirstExpander.IsExpanded = True
    End 
Sub

When we Run the application the window will look like this.

expander4.gif
 

When we select the Expand Down Radio Button. The Window will look like Below.

expender4.gif

When we select the Expand Up Radio Button. The Window will look like Below.

expander5.gif
 

Like Above we can also select the Expand Left and Expand Right Radio Button to see the Changes.

Summary

In this article you learned about Expander control and its ExpandDirection property.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.