WPF Expander and ExpandDirection Property in VB.NET
In this article we demonstrate on what is Expander and its ExpandDirection property.
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.
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
Title="MainWindow" Height="278" Width="353" Background="Black" >
<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">
<StackPanel Grid.Column="1" Grid.Row="0" >
<TextBlock Margin="0, 10, 3, 3" FontSize="12" TextWrapping="Wrap" Foreground="White"Height="70"
Check to change the ExpandDirection property on My First Expander
<RadioButton Name="MyExpandDown" Margin="0,10,0,10"
GroupName="ExpandDirectionProperty" Foreground="White" Height="20"Width="124">
<RadioButton Name="MyExpandUp" Margin="0,0,0,10"
GroupName="ExpandDirectionProperty" Foreground="White" Height="18" Width="121">
<RadioButton Name="MyExpandLeft" Margin="0,0,0,10"
GroupName="ExpandDirectionProperty" Foreground="White" Height="19" Width="120">
<RadioButton Name="MyExpandRight" Margin="0,0,0,10"
GroupName="ExpandDirectionProperty" Foreground="White" Height="20" Width="119">
The NameSpaces which I have used are shown Below.
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
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.