.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> WPF >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Expander in WPF

Posted By:Syed Shakeer Hussain       Posted Date: January 26, 2011    Points: 75    Category: WPF    URL: http://www.dotnetspark.com  

In this Article you will learn how to create an Expander and ow to use it in WPF
 

Expander in WPF

The Expander control is like a GroupBox but with the additional feature to collapse and expand its content. It derives from HeaderedContentControl so it has a Header property to set the header content, and a Content property for the expandable content.

It has a IsExpanded property to get and set if the expander is in expanded or collapsed state.

In collapsed state the expander takes only the space needed by the header. In expanded state it takes the size of header and content together.

Creating Expander Control .Xaml  

 

Expander can be created by using Expander Element.

 

<Expander Header="Click here to see Image" Width="250" Foreground="Blue" >            

                   

Expander>

 

Header Property: Header Property is used for setting the content or text of a Expander Element.

 

<Expander Header="Expander Header Text">            

                   

Expander>

 

 Creating Image in Expander Element:-

 

<Window x:Class="ExpanderWPF.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>

        <StackPanel Background="AntiqueWhite">

          <Expander Header="Click here to see Image" Width="250"  

              Foreground="Blue">             

           <Image Source="G:\ImageName.jpg" Width="200"/>                              

         Expander>

        StackPanel>

    Grid>

Window>

By default the Expander Bullet button FlowDirection is LeftToRight.You can set the Expander Bullet direction to Right by setting FlowDirection Property to RightToLeft.

 

<Expander Header="Click here to see Image"  

    FlowDirection="RightToLeft">    

             

 

Below is the Image of FlowDirection="RightToLeft"

 

 

Below is the Image When you click the Expander control.

 

 

Setting ScrollViewer in Expander Control.

 

You can set the ScrollBar in Expander Control by using ScrollViewer Element as follows

        

<Expander Header="Click here to see Image" Width="250"   

 Foreground="Blue">                 

                  

    <ScrollViewer Height="150">

              

        <Image Source="G:\ImageName.jpg" Width="200"/>

                  

    ScrollViewer>               

              

Expander>

 

Below is the Image of Expander with ScrollViewer.

 

 

 

Thanks for reading my article!

Shakeer

 

 


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend