Expander Control use in WPF

In this article, We will see how to use Expander Control in WPF.

The Expander Control is like GroupBox. We will use StackPanel control and RadioButton in this example. An Expander control provides a way to provide content in an expandable area that resembles a window and includes a header. The Expander Control is the simple control. We will use Standard Expander Control and Popup Window Expander Control in this article.

Example:- The Standard Expander Control explain in this example.

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Expander HorizontalAlignment="Left" Header="Standard Expander"
                  VerticalAlignment="Top" ExpandDirection="Down" Width="278" Height="200"
Foreground="Blue">
                <StackPanel Grid.Row="1"  Margin="10,5,0,0">
                    <RadioButton Content="http://www.c-sharpcorner.com"
Foreground="Red"/>
                    <RadioButton Content="http://www.dotnetheaven.com" Foreground="Red"/>
                    <RadioButton Content="http://www.dbtalks.com" Foreground="Red"/>
                    <RadioButton Content="http://www.interviewcorner.com"
Foreground="Red"/>
                </StackPanel>
            </Expander>           
        </Grid>
    </Grid>
</Window>

Deign:-  

Output:-

The Expander Control use in WPF with Popup window. Getting the Expander control Content to look like a real Popup window or ToolTip is super easy in WPF.  I added a 'DropShadowBitmapEffect' to Grid control that lays out the Expander control's expanded content.

Example:-  

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>       
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>          
            <Canvas Panel.ZIndex="99">
                <Expander HorizontalAlignment="Left" Header="PopUp Window Expander"
                      VerticalAlignment="Top" ExpandDirection="Down" Width="225"
Foreground="Blue">
                    <Grid Background="Cornsilk">
                        <Grid.BitmapEffect>
                            <DropShadowBitmapEffect />
                        </Grid.BitmapEffect>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition />
                        </Grid.RowDefinitions>                      
                        <StackPanel Grid.Row="1" Margin="10,5,0,0">
                            <RadioButton Content="http://www.c-sharpcorner.com"
Foreground="Red"/>
                            <RadioButton Content="http://www.vbdotnetheaven.com"
Foreground="Red"/>
                            <RadioButton Content="http://www.dbtalks.com"
Foreground="Red"/>
                            <RadioButton Content="http://www.interviewcorner.com"
Foreground="Red"/>
                        </StackPanel>
                    </Grid>
                </Expander>
            </Canvas>
        </Grid>
    </Grid>
</Window>

Output:-

 I hope you found this article useful.