把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: