none
WPF中TreeView节点图标如何替换?点击控件时出现聚焦框(黑边)如何去掉? RRS feed

答案

  •  

    ->点击控件时出现聚焦框(黑边)如何去掉

       去掉黑边我知道的有3个方法:1个是把FocusVisualStyle设置透明

                                        2个是把 <Setter Property="FocusVisualStyle" Value="{x:Null}"/> 这个在设置DataGrid的模板的时候会遇到一些问题,尽量不要在DataGrid模板里面使用

                                        3个是 <Setter Property="Focusable" Value="False"/>但是这个不适合设置TreeView的节点,如果这样设置后会导致节点无法被选中!


    ->TreeView替换图标

      你这个应该可以在样式的触发器里面写,绑定IsExpand这个属性应该就可以了


    • 已标记为答案 MaJiXiang 2011年3月22日 2:11
    • 取消答案标记 MaJiXiang 2011年3月22日 2:11
    • 已标记为答案 MaJiXiang 2011年3月22日 5:36
    2011年3月22日 1:42
  • 对于这个问题,我觉得cuiweifu已经给出了解决方案,就是重写你TreeViewItem的模板,然后按照andy-zl说的,用触发器去控制图标的显示和隐藏。

    如果你还要再详细一点,那么就是给你完成代码了:

    <Style x:Key="styleTreeViewExpandCollapse" TargetType="{x:Type ToggleButton}">

        <Setter Property="OverridesDefaultStyle" Value="True"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type ToggleButton}">

                    <Image x:Name="image" Source="Your Icon Uri" />

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsChecked" Value="true">

                            <Setter TargetName="image" Property="Source" Value="Your Icon Uri" />

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <Style TargetType="{x:Type TreeViewItem}">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type TreeViewItem}">

                    <Grid>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition MinWidth="19" Width="Auto"/>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="*"/>

                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto"/>

                            <RowDefinition/>

                        </Grid.RowDefinitions>

                        <ToggleButton x:Name="Expander" Grid.Column="0" Style="{StaticResource styleTreeViewExpandCollapse}" IsChecked="{Binding Path=IsExpanded,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" Width="16" Height="16"/>

                        <ContentPresenter x:Name="PART_Header" Grid.Column="1" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>

                        <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>

                    </Grid>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsExpanded" Value="false">

                            <Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed"/>

                        </Trigger>

                        <Trigger Property="HasItems" Value="false">

                            <Setter TargetName="Expander" Property="Visibility" Value="Hidden"/>

                        </Trigger>

                        <MultiTrigger>

                            <MultiTrigger.Conditions>

                                <Condition Property="HasHeader" Value="false"/>

                                <Condition Property="Width" Value="Auto"/>

                            </MultiTrigger.Conditions>

                            <Setter TargetName="PART_Header" Property="MinWidth" Value="75"/>

                        </MultiTrigger>

                        <MultiTrigger>

                            <MultiTrigger.Conditions>

                                <Condition Property="HasHeader" Value="false"/>

                                <Condition Property="Height" Value="Auto"/>

                            </MultiTrigger.Conditions>

                            <Setter TargetName="PART_Header" Property="MinHeight" Value="19"/>

                        </MultiTrigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    将上面的代码放到resource里面,就可以让你的TreeView的Icon改变(我加粗的地方是放你自己的图片的地方)。

    如果你想让固定的TreeView改变,那么就在Style里面加X:Key。

     

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • 已标记为答案 MaJiXiang 2011年3月22日 5:36
    2011年3月22日 5:16
    版主

全部回复

  • 要重写控件的模板!

     

    2011年3月22日 1:34
  •  

    ->点击控件时出现聚焦框(黑边)如何去掉

       去掉黑边我知道的有3个方法:1个是把FocusVisualStyle设置透明

                                        2个是把 <Setter Property="FocusVisualStyle" Value="{x:Null}"/> 这个在设置DataGrid的模板的时候会遇到一些问题,尽量不要在DataGrid模板里面使用

                                        3个是 <Setter Property="Focusable" Value="False"/>但是这个不适合设置TreeView的节点,如果这样设置后会导致节点无法被选中!


    ->TreeView替换图标

      你这个应该可以在样式的触发器里面写,绑定IsExpand这个属性应该就可以了


    • 已标记为答案 MaJiXiang 2011年3月22日 2:11
    • 取消答案标记 MaJiXiang 2011年3月22日 2:11
    • 已标记为答案 MaJiXiang 2011年3月22日 5:36
    2011年3月22日 1:42
  • 非常感谢andy-zl的回答,我已经解决黑边问题,可是关于TreeView节点图标替换能再说详细些吗?谢谢~
    • 已标记为答案 MaJiXiang 2011年3月22日 5:36
    • 取消答案标记 MaJiXiang 2011年3月22日 5:36
    2011年3月22日 2:09
  • 对于这个问题,我觉得cuiweifu已经给出了解决方案,就是重写你TreeViewItem的模板,然后按照andy-zl说的,用触发器去控制图标的显示和隐藏。

    如果你还要再详细一点,那么就是给你完成代码了:

    <Style x:Key="styleTreeViewExpandCollapse" TargetType="{x:Type ToggleButton}">

        <Setter Property="OverridesDefaultStyle" Value="True"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type ToggleButton}">

                    <Image x:Name="image" Source="Your Icon Uri" />

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsChecked" Value="true">

                            <Setter TargetName="image" Property="Source" Value="Your Icon Uri" />

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <Style TargetType="{x:Type TreeViewItem}">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type TreeViewItem}">

                    <Grid>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition MinWidth="19" Width="Auto"/>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="*"/>

                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto"/>

                            <RowDefinition/>

                        </Grid.RowDefinitions>

                        <ToggleButton x:Name="Expander" Grid.Column="0" Style="{StaticResource styleTreeViewExpandCollapse}" IsChecked="{Binding Path=IsExpanded,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" Width="16" Height="16"/>

                        <ContentPresenter x:Name="PART_Header" Grid.Column="1" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>

                        <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>

                    </Grid>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsExpanded" Value="false">

                            <Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed"/>

                        </Trigger>

                        <Trigger Property="HasItems" Value="false">

                            <Setter TargetName="Expander" Property="Visibility" Value="Hidden"/>

                        </Trigger>

                        <MultiTrigger>

                            <MultiTrigger.Conditions>

                                <Condition Property="HasHeader" Value="false"/>

                                <Condition Property="Width" Value="Auto"/>

                            </MultiTrigger.Conditions>

                            <Setter TargetName="PART_Header" Property="MinWidth" Value="75"/>

                        </MultiTrigger>

                        <MultiTrigger>

                            <MultiTrigger.Conditions>

                                <Condition Property="HasHeader" Value="false"/>

                                <Condition Property="Height" Value="Auto"/>

                            </MultiTrigger.Conditions>

                            <Setter TargetName="PART_Header" Property="MinHeight" Value="19"/>

                        </MultiTrigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    将上面的代码放到resource里面,就可以让你的TreeView的Icon改变(我加粗的地方是放你自己的图片的地方)。

    如果你想让固定的TreeView改变,那么就在Style里面加X:Key。

     

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • 已标记为答案 MaJiXiang 2011年3月22日 5:36
    2011年3月22日 5:16
    版主
  •   引用此样式后发现无法选中TreeView items内容。
    2011年3月22日 6:21
  • 这个是参考,你要根据这个去写自己的Style。

     


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2011年3月22日 6:30
    版主