如何更改Treeview项目切换外观

时间:2019-04-05 07:55:23

标签: wpf treeview treeviewitem wpf-style

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

image

我尝试为树视图中的树视图项设置不同的样式,但是没有成功。以下是我要写的内容。我有一个带有TreeView的Stackpanels。我将第一个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>

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

1 个答案:

答案 0 :(得分:0)

默认的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的默认样式,并将其替换为带有箭头而不是加号的样式。

它产生如下结果:

enter image description here