Customize Expander Control In WPF

Creating a WPF Project

Fire up Visual Studio 2008, create a Blank Visual Studio Solution, and name it as CustomExpander.



Let's add an Expander control.



It would be difficult to customize the Expander in Visual Studio 2008, so let's fire up Expression Blend 3 and open the solution.



As you see in the above figure, we have opened the solution in Expression Blend 3 and we have started editing the template for Expander Control.

Let's keep the styles in App.xaml file.



As you see in above figure, we have given a name for the style, that is PlusMinusExpanderStyle. And we are saving the style in Application that is App.xaml.

Now you must have the idea about the style after the given name as PlusMinus, yes you are right we will have the Plus sign when the Expander is not expanded and Minus sign when the expander is expanded.



After adding the style, it would open for edit mode. Now if you see the above figure you can easily understand that we have the above elements that construct an Expander control.

The "HeaderSite" is a ToggleButton.



The above image shows the default style resources associated with the Expander control. You can actually see four different styles, such as:

• Expander Right Header Style
• Expander Up Header Style
• Expander Left Header Style
• Expander Down Header Style

When the expander is expanded the arrow goes down, so at that time the style is ExpanderDownHeaderStyle, and the vice versa, that is, when the expander is not expanded the arrows goes up, and the style is ExpanderUpHeaderStyle.

So we got our two styles that we need to change. We don't have to create new style and do all the animation; we can use these existing styles and modify it.

First we would select the ExpanderDownHeaderStyle and modify it.



The above image displays the structure of the HeaderSite ToggleButton when customized.

Now zoom in to a bit larger view and modify the arrow, which is a Path element.



As you see in above figure we have changed the Path, and given a Red solid color.

We would do the same for "ExpanderUpHeaderStyle", but we would add another Path element as we need another Path to make a Plus symbol.



The above figure displays the style is being checked when it is applied, and now we would customize this style.



The structure of this ToggleButton is the same as the other but we have a different Path here, let's change this to something we want to do.



As you see in above figure we have added one more path and changed the color of the Paths to Green. And now it is looking like a Plus symbol.

Now if you run the application with the styles implemented, you would see the expander is not expanding to display the Minus symbol.



That is because the Setter property is not being set. Now we need to change it, we can do it both ways with the help of Triggers in Expression Blend or we can do it in XAML itself.

Let's try the XAML, go to the style "ExpanderUpHeaderStyle" and add the marked lines as displayed below:



As you can see the Stroke of the arrow is made Red when it is true.

Now let's have some content inside of the Expander control and test the custom style:



Hope this article helps.