如何更改 Treeview 项目切换外观

Question

我正在使用 WPF 制作一个简单的程序。我对 XAML 和 WPF 还很陌生。我想更改折叠和展开 TreeView 的 + 按钮。

我试过为Tree View中的Tree View Item设置不同的样式，但没有成功。以下是我设法写的内容。我有带 TreeView 的 Stackpanel。我使用我的第一个 TreeView 项目作为我的主树。

            <StackPanel>
                <TreeView x:Name="MainTree" FontSize="13" HorizontalAlignment="Left"
                               BorderThickness="0" VerticalAlignment="Top" Height="400" Width="200">
                    <TreeViewItem x:Name="TreeParent" FontSize="15" Header="Categories" >

                        <TreeViewItem Header="{Binding CategoryName}" />

                    </TreeViewItem>
                </TreeView>
            </StackPanel>
        </StackPanel>

我想将按钮更改为箭头，而不是 + 号。

Answer 1

默认 Windows 'Aero' 样式是箭头。其控件模板 XAML 如下所示：

<Window.Resources>
    <ResourceDictionary>

        <PathGeometry x:Key="TreeArrow">
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure IsFilled="True"
                        StartPoint="0 0"
                        IsClosed="True">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <LineSegment Point="0 6"/>
                                <LineSegment Point="6 0"/>
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>

        <Style x:Key="ExpandCollapseToggleStyle"
       TargetType="{x:Type ToggleButton}">
            <Setter Property="Focusable"
            Value="False"/>
            <Setter Property="Width"
            Value="16"/>
            <Setter Property="Height"
            Value="16"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border Width="16"
                        Height="16"
                        Background="Transparent"
                        Padding="5,5,5,5">
                            <Path x:Name="ExpandPath"
                          Fill="Transparent"
                          Stroke="#FF989898"
                          Data="{StaticResource TreeArrow}">
                                <Path.RenderTransform>
                                    <RotateTransform Angle="135"
                                             CenterX="3"
                                             CenterY="3"/>
                                </Path.RenderTransform>
                            </Path>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver"
                             Value="True">
                                <Setter TargetName="ExpandPath"
                                Property="Stroke"
                                Value="#FF1BBBFA"/>
                                <Setter TargetName="ExpandPath"
                                Property="Fill"
                                Value="Transparent"/>
                            </Trigger>

                            <Trigger Property="IsChecked"
                             Value="True">
                                <Setter TargetName="ExpandPath"
                                Property="RenderTransform">
                                    <Setter.Value>
                                        <RotateTransform Angle="180"
                                                 CenterX="3"
                                                 CenterY="3"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter TargetName="ExpandPath"
                                Property="Fill"
                                Value="#FF595959"/>
                                <Setter TargetName="ExpandPath"
                                Property="Stroke"
                                Value="#FF262626"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="TreeViewItemFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="{x:Type TreeViewItem}"
       TargetType="{x:Type TreeViewItem}">
            <Setter Property="Background"
            Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment"
            Value="{Binding Path=HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment"
            Value="{Binding Path=VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Padding"
            Value="1,0,0,0"/>
            <Setter Property="Foreground"
            Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="FocusVisualStyle"
            Value="{StaticResource TreeViewItemFocusVisual}"/>
            <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"
                                  Style="{StaticResource ExpandCollapseToggleStyle}"
                                  IsChecked="{Binding Path=IsExpanded,RelativeSource={RelativeSource TemplatedParent}}"
                                  ClickMode="Press"/>
                            <Border Name="Bd"
                            Grid.Column="1"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}"
                            SnapsToDevicePixels="true">
                                <ContentPresenter x:Name="PART_Header"
                                          ContentSource="Header"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                            <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>
                            <Trigger Property="IsSelected"
                             Value="true">
                                <Setter TargetName="Bd"
                                Property="Background"
                                Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                <Setter Property="Foreground"
                                Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected"
                                       Value="true"/>
                                    <Condition Property="IsSelectionActive"
                                       Value="false"/>
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Bd"
                                Property="Background"
                                Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                                <Setter Property="Foreground"
                                Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled"
                             Value="false">
                                <Setter Property="Foreground"
                                Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="VirtualizingStackPanel.IsVirtualizing"
             Value="true">
                    <Setter Property="ItemsPanel">
                        <Setter.Value>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel/>
                            </ItemsPanelTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

    </ResourceDictionary>
</Window.Resources>

拿上面那一大块XAML； <Window.Resources> 和 </Window.Resources> 之间的所有内容，并将其放在 Window.xaml 文件的顶部（或您使用 TreeView 的任何地方）。这将覆盖 TreeView 的默认样式，并将其替换为带有箭头而不是加号的样式。

它产生的结果如下所示：

如何更改 Treeview 项目切换外观

How do I change a Treeview item toggle appeareance

wpf

treeview

treeviewitem

wpf-style