把silverlight treeview 节点前面的小三角换成自定义的图片

那个小三角是 TreeViewItem 中的一个部件，
名为 ExpanderButton ，类型为 ToggleButton ，功能：用于展开 TreeView 控件的 ToggleButton。
 
很遗憾 TreeViewItem 似乎没有单独把设置这个ExpanderButton的Style公开出来，
所以要改就只能为整个 TreeViewItem 指定Style了。

更改为：

  <ToggleButton x:Name="ExpanderButton"  IsTabStop="False" TabNavigation="Once" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <ToggleButton.Template>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid x:Name="Root" Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <!--<VisualState x:Name="MouseOver">
                                    <Storyboard>                                        
                                        <ColorAnimation Duration="0" Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="(Path.Stroke).Color" To="#FF1BBBFA"/>
                                    </Storyboard>
                                </VisualState>-->
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To=".7"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Unchecked">
                                  <Storyboard>

                                        <DoubleAnimation Duration="0" Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity" To="1"/>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="Opacity" To="0"/>
                                    </Storyboard>
                             </VisualState>

                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="Opacity" To="1"/>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity" To="0"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid HorizontalAlignment="Right" Margin="2 2 5 2">
                            <Image x:Name="UncheckedVisual" Opacity="0"  Source="a.jpg" ></Image>
                            <Image x:Name="CheckedVisual" Opacity="1" Source="b.jpg" ></Image>
                            <!--<Path x:Name="UncheckedVisual" Fill="#FFFFFFFF" Stroke="#FF989898" StrokeLineJoin="Miter" StrokeThickness="1" Height="9" HorizontalAlignment="Right" VerticalAlignment="Center" Width="6" Data="M 0,0 L 0,9 L 5,4.5 Z"/>
                            <Path x:Name="CheckedVisual" Fill="#FF262626" StrokeLineJoin="Miter" Height="6" HorizontalAlignment="Center" VerticalAlignment="Center" Width="6" Opacity="0" Data="M 6,0 L 6,6 L 0,6 Z"/>-->
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>

具体的操作方式：

Changing Visual States – Changing the Collapsed and Extended Visual States

Looking at this last Print screen a bit more closely we can see It uses to types of Icons:

   - Expanded Icon

  - Collapsed Icon

We’d like to change those to:

 - Collapsed Icon

  - Expanded Icon

 

In order to do that, we’ll have to edit the Template of the TreeViewItem generated by the TreeView.

To do that, we’ll change the TreeView ItemContainerStyle that gets applied on to each generated TreeViewItem.

We’ll select the TreeView, go to “Object –> Edit Other Styles –> Edit ItemContainerStyle –> Edit Copy”.

And we’ll call the new Style “AlienItemStyle”.

Next, we’ll need to drill into editing the template for the TreeViewItems.

We’ll do that through “Edit Template –> Edit Controls Parts (Template) –> Edit Template”.

 

Here’s what we see:

 

There are a few VisualStateManager states here. And we’ve got a template that has a few visual elements in it.

One of those is the Expander button.

 

In order to change the TreeViewItem Icons we’ll need to edit the Template for the ExpanderButotn.

Right Click on the ExpanderButton –> Edit Template –> Edit Template.

 

And here’s what we see:

 

Apparently, the TreeViewItem ExpanderButton has two visuals: “CheckedVisual”   and “UncheckedVisual”  .

We’ll need to replace those with our new Visuals.

 

First, I’ll draw a whole ellipse.

And on top of it I’ll draw a rectangle.

I’ll select the Ellipse with the Rectangle. Right Click –> Combine –> Subtract.

And we’ll get this path:

I’ll repeat the process and we’ll also get this path:

 

Now, In XAML we’ll cut & paste the names of “CheckedVisual” and “UncheckedVisual” to these new elements.

becomes

 

Next, we’ll delete the old CheckVisual and UncheckedVisual and place our new ones into the correct position.

 

Now, one last thing we have to change before this runs, is making sure the “UncheckedVisual” is hidden during the “Checked” state.

We’ll go the the “Checked” state.

Select the “UncheckedVisual” and set it’s opacity to 0.

 

Now if we run our sample: