zoukankan      html  css  js  c++  java
  • 把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:

    
    

     image  - Expanded Icon

    
    

    image  - Collapsed Icon

    
    

    We’d like to change those to:

    
    

    image - Collapsed Icon

    
    

    image  - 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”.

    
    

    image

    
    

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

    
    

    image

    
    

    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”.

    
    

    image

    
    
    
    
    

    Here’s what we see:

    
    

    image

    
    
    
    
    

    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.

    
    

    image

    
    
    
    
    

    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.

    
    

    image

    
    
    
    
    

    And here’s what we see:

    
    

    image

    
    
    
    
    

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

    
    

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

    
    
    
    
    

    First, I’ll draw a whole ellipse.

    
    

    image

    
    

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

    
    

    image

    
    

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

    
    

    image

    
    

    And we’ll get this path:

    
    

    image

    
    

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

    
    

    image

    
    
    
    
    

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

    
    

    image

    
    

    becomes

    
    

    image

    
    
    
    
    

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

    
    

    image

    
    
    
    
    

    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.

    
    

    image

    
    

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

    
    

    image

    
    
    
    
    

    Now if we run our sample:

    
    

    image



     

  • 相关阅读:
    C语言学习_C如何在一个文件里调用另一个源文件中的函数
    C语言学习_include<>与include""的区别
    C语言学习_一个简单程序的解释与C学习方法概括
    python_list和tuple互转
    C语言学习_恶搞小程序
    Linux命令(基础1)
    Linux基础配置
    面向对象知识补充1
    linux系统centOS在虚拟机下的自定义安装
    sql注入
  • 原文地址:https://www.cnblogs.com/yinxiangpei/p/2616547.html
Copyright © 2011-2022 走看看