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.
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"
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.
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.
Summary
In this article you learned about Expander
control and its ExpandDirection property.