Как изменить внешний вид элемента Treeview?

Question

Я делаю простую программу с использованием WPF.Я довольно новичок в XAML и WPF.Я хочу изменить кнопку +, которая сворачивает и расширяет TreeView.

Я пытался установить различные стили для элемента Tree View в Tree View, но безуспешно.Ниже то, что мне удалось написать.У меня есть Stackpanels с TreeView.Я использую свой первый элемент 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 и заменит его тем, у которого вместо знака плюс есть стрелка.

Он дает результаты, которые выглядят следующим образом: