WPF Expander and ExpandDirection Property in VB.NET

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


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.


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.


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.


This is my XAML code

<Window x:Class="MainWindow"
    Title="MainWindow" Height="278" Width="353" Background
="Black" >
            <ColumnDefinition Width="190"/>
            <ColumnDefinition Width="140"/>
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
        <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
            <StackPanel >
                <RadioButton Name="MyExpandDown" Margin="0,10,0,10" 
GroupName="ExpandDirectionProperty" Foreground="White" Height="20"Width="124">                     
                    Expand Down
                <RadioButton Name="MyExpandUp" Margin="0,0,0,10"
GroupName="ExpandDirectionProperty" Foreground="White" Height="18" Width="121">
                    Expand Up
                <RadioButton Name="MyExpandLeft" Margin="0,0,0,10"
GroupName="ExpandDirectionProperty" Foreground="White" Height="19" Width="120">
                    Expand Left
                <RadioButton Name="MyExpandRight" Margin="0,0,0,10"
GroupName="ExpandDirectionProperty" Foreground="White" Height="20" Width="119">
                    Expand Right

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

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


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


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


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


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


More Articles

© 2020 DotNetHeaven. All rights reserved.