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
can add an Accordion Control by referencing the following DLL in the Toolkit
we can add it in Expression Blend.
adding the Accordion, we need to add AccordionItem also. Add two of
Expression Blend doesn't support designing.
we would go back to Visual Studio, perhaps there we will be able to!
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.
you see above I have added several controls.
The following is the XAML
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
public partial class Window1 : Window
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;
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.
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.