WPF Expander Using VB.NET

WPF Expander control that has a collapse window with a header that displays the content. Namespace for Expander control is system.windows.control and its exist in presentationframework.dll assembly.
  • 3379

Introduction

Here is a WPF Expander control that has a collapse window with a header that displays the content. Namespace for Expander control is system.windows.control and its exist in presentationframework.dll assembly. Expander is a very useful control in WPF, We can use more than Expander in a page. IExpander once expanded It cannot be collapsed on the design window unless we close the form and will open again. Sets the Expander control's height to auto it will provide the good design time experience. The height of the Expander will then be calculated by the content of the Expander's Header. Expander control is like a Groupbox but with the additional features to collapse and expend it. WPF is advance technology used in .NET, By this we can create more intractive application in .NET. And Expander is a interesting control in WPF. When we add or drag and drop a Expander to the page the code in XAML will look like this.

<Expander ClipToBounds="False" Height="116" Width="479" Name="Expander1" >
 content
</Expander>

When we add or drag and drop a Expander will look like this on main window.

image1.png

Adding controls inside Expander

When we add some controls inside the Expander the code will look like this.

<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="350" Width
="525">
<
Grid>
<
Expander Height="289" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Expander1" 
VerticalAlignment
="Top" Width="142" Header="NAME" Background="#FF5DD805">
<
Grid Background="#FFC29CEF">
<
Label Content="Dwayne" Height="28" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Label1" 
VerticalAlignment
="Top" Width="55" Background="#FFDEBCBC" />
<
Label Content="Brad" Height="28" HorizontalAlignment="Left" Margin="10,48,0,0" Name="Label2" 
VerticalAlignment
="Top" Background="#FFDBC681" />
<
Label Content="Nicholas" Height="28" HorizontalAlignment="Left" Margin="10,86,0,0" 
Name
="Label3" VerticalAlignment="Top" Background="#FFAAE54C" />
<
Label Content="Rusty" Height="28" HorizontalAlignment="Left" Margin="10,124,0,0" 
Name
="Label4" VerticalAlignment="Top" Background="#FF82D0F2" />
<
Label Content="Leo" Height="28" HorizontalAlignment="Left" Margin="10,162,0,0" 
Name
="Label5" VerticalAlignment="Top" Background="#FFFFE65A" />
<
Label Content="Bruce" Height="28" HorizontalAlignment="Left" 
Margin
="10,200,0,0" Name="Label6" VerticalAlignment="Top" Background="#FFE88F8F" />
</
Grid>
</
Expander>
</
Grid>

image2.png

Background Style of Expander and controls

Expander background and controls background will be set by the use of background property.

image3.png
 

Expander with TabControl and ListBox 

There is a TabControl and ListBox used with Expander. When we add TabControl and ListBox to the page the code in XAML will look like this.

Code 

<Grid Width="1042">
<
Grid.RowDefinitions>
<
RowDefinition Height="106*" />
<
RowDefinition Height="0*" />
<
RowDefinition Height="89*" />
<
RowDefinition Height="246*" />
</
Grid.RowDefinitions>
<
TabControl Margin="12,12,526,26" Grid.RowSpan="3">
<
TabItem Header="MOVIES" Background="#FF48D8A9" BorderBrush="#FFE81E23">
<
Expander ClipToBounds="False" Height="116" Width="479" Name="Expander1" Background="#FF3DE27C">
<
ListBox>
<
Label Content="Troy" Height="28" Name="Label4" Margin="0,25,0,72"/>
<
Label Content="Robinhood" Height="28" Name="Label5" Margin="0,29,0,70"/>
</
ListBox>
</
Expander>
</
TabItem>
<
TabItem Header="SIZE" HorizontalAlignment="Left" Name="TabItem1" VerticalAlignment="Top"><Grid>
<
Expander ClipToBounds="False" Height="116" Width="479" Name="Expander2" Background="#FFE85959">
<
ListBox>
<
Label Content="1028KB" Height="28" Name="Label1" Margin="0,25,0,72" />
<
Label Content="1245Kb" Height="28" HorizontalAlignment="Left" Name="Label2" 
VerticalAlignment
="Top" Margin="0,55,0,0" />
</
ListBox>
</
Expander>
</
Grid>
</
TabItem>
</
TabControl>
</
Grid
>

The output for this code. In this code we used two TabControl, When we click on the first Tab it will show the output like this.


image4.png
 

When we click on the second Tab it will show the output like this.

image5.png
 

I hope this article will help you to create an Expander in different ways.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.