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


Top 5 Contributors of the Month
ASPEvil
Jean Paul
satyapriyanayak
Ashutosh Jha
SP

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

 Subscribe to Articles

Accordion In WPF Toolkit Tutorial

Posted By:Diptimaya Patra       Posted Date: May 06, 2010    Points: 25    Category: WPF    URL: http://dpatra.blogspot.com  

Accordion In WPF Toolkit Tutorial. In this article we will see how we can use the control. It was very easy to handle in Silverlight though; we will see how far it is easy in WPF.
 

Introduction

Accordion is a Control added to the WPF Toolkit in February 2010 release. In this article we will see how we can use the control. It was very easy to handle in Silverlight though; we will see how far it is easy in WPF.

Creating WPF Application Project

Fire up Visual Studio 2008 and Create a WPF Application and name the project as AccordionInWPF.

AccordionFig1.gif

We can add an Accordion Control by referencing the following DLL in the Toolkit Folder.
AccordionFig2.gif

Or, we can add it in Expression Blend.

AccordionFig3.gif

After adding the Accordion, we need to add AccordionItem also. Add two of them.

Expression Blend doesn't support designing.

AccordionFig4.gif

So we would go back to Visual Studio, perhaps there we will be able to!

AccordionFig5.gif

Yes, we can add content to the AccordionItem in Visual Studio.

I realized that after adding each control to the content we have to build the project the Expression Blend is able to reload the design.

AccordionFig6.gif

As you see above I have added several controls.

The following is the XAML reference.


      
          
              
              
              
              
              


In this sample we will see how we can select another accordion item by some event in other accordion item.

Here's the thing. We will take user input from AccordionItem "User Input" and on Submit Button click event we will display the "User Info" AccordionItem.

The following code is for your reference.

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
        accItemUInfo.IsEnabled = false;
    }

    private void btnSubmit_Click(object sender, RoutedEventArgs e)
    {
        if (!string.IsNullOrEmpty(txtFN.Text) && !string.IsNullOrEmpty(txtLN.Text))
        {
            txtInfo.Text = "Welcome, " + txtFN.Text + " " + txtLN.Text;
            txtFN.Text = string.Empty;
            txtLN.Text = string.Empty;
            accItemUInfo.IsEnabled = true;
            accItemUInfo.IsSelected = true;
        }
    }
}

That's it. Run the application and give some input to the TextBoxes and Click on Submit button, you would see the User Info Accordion is selected.

AccordionFig9.gif

I am not able to change the Background color from Blue to any other color. Let me have some tweak on that.

You can also download the sample application used the above example.

Hope this article helps.

 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