I want to change the icon of the expander control's toggle button icon to "+" and "-" instead of an arrow... I have tried doing the same with Blend... But I am unable to do that. Can anyone help in acheiving this...
You'll need to edit templates a couple of layers deep.
1) In Blend, select the Expander > Edit Template > Edit a Copy
This will create an Expander Style, but will open the "Expander Template" inside the Style.
2) Open the DockPanel and locate the "HeaderSite" ToggleButton. Again, select Edit Template > Edit a Copy.
This will create a ToggleButton Style and open the "ToggleButton Template" for editing.
3) Open the Grid inside the Border and locate the "arrow" and "circle" paths. You will need to replace these with the desired graphics.
What I am uncertain of at the moment is what causes the arrow to flip. I assumed it would have been Visual State, but they don't appear to be set in the template. That being said, my guess is that you will want to use Visual States to control which image you are showing at what time. Since this is a ToggleButton, check out the Checked and Unchecked states.
EDIT: The HeaderSite ToggleButton IsChecked property in the Expander Template is driving the flipping of the arrow. Its value is template bound to the parent's IsExpanded property. The ToggleButton Style has a ControlTemplate Trigger that overrides the Data property of the arrow Path when IsChecked is True.
If you replace the arrow property, as you want to do, you'll need to replace this functionality. I still think Visual States would be preferable to the ControlTemplate Trigger.