Well, I'm not too crazy about how this looks...it just doesn't blend with the way my app looks. So I set about to customize it.Turns out that expander is a ToggleButton. The ToggleButton has one default event "IsChecked=True". When IsChecked is true the default ToggleButton changes from a "+" to a "-". Easy enough. I changed the graphics of this to a simple triangle that points to the right by default and rotate it pointing downward when IsChecked is true. The result looks like this:
Ok, this looks better to me. But I notice something funny. The click on the ToggleButton ONLY seems to register if I click on the graphic area of the button; meaning I have to click on the thin line of the triangle itself to expand it. I can't even click in the center for it to work! This resulted it having to try to click on the line multiple times for it to register the click and expand. This won't do.The Fix
I filled in the triangle with a color to confirm that this is really the case. Sure enough, I can click on the filled-in center and it works. I don't like this solution though because I don't want to change my original design just to make it work. So I decide to enlarge the clickable area by wrapping the Path object (the triangle) in a Grid. I expand the grid so it's slightly larger than the triangle.
This alone won't work. So I give the grid a background color and change the Opacity (the Alpha channel) of the color to zero. This works perfectly. Now I don't have to click right on the triangle but can click anywhere in the general area.
