Creating a WPF Project
Fire up Visual Studio 2008, create a Blank
Visual Studio Solution, and name it as CustomExpander.
add an Expander control.
would be difficult to customize the Expander in Visual Studio 2008, so let's
fire up Expression Blend 3 and open the solution.
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.
the styles in App.xaml file.
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
Now you must have the idea about the style after the given name
as Plus Minus, yes you are right we will have the Plus sign when the Expander is
not expanded and Minus sign when the expander is expanded.
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
The "HeaderSite" is a Toggle Button.
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.
above image displays the structure of the HeaderSite ToggleButton when
Now zoom in to a bit larger view and modify the arrow, which
is a Path element.
you see in above figure we have changed the Path, and given a Red solid
We would do the same for "ExpanderUpHeaderStyle", but we would add
another Path element as we need another Path to make a Plus symbol.
above figure displays the style is being checked when it is applied, and now we
would customize this style.
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.
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.
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:
Code view of the above image
you can see the Stroke of the arrow is made Red when it is true.
let's have some content inside of the Expander control and test the custom
You can also download sample project used in above example.
this article helps.