问题根源 #

当前TreeView的操作按钮会随节点缩进偏移，无法实现全局右对齐，核心原因是TreeViewItem的默认模板中，内容区域会继承节点的缩进值，导致嵌套层级的按钮跟着缩进，无法对齐到TreeView的最右侧边缘。

解决方案 #

重写TreeViewItem的ControlTemplate，将操作按钮区域从缩进的内容区中分离出来，使其直接绑定到TreeView的右侧边缘，不受节点缩进影响。

具体代码修改 #

1. 替换TreeViewItem的样式（包含重写模板）

在UserControl.Resources中添加完整的TreeViewItem样式，替换原有的ItemContainerStyle：

<Style TargetType="TreeViewItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TreeViewItem">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <!-- 展开/折叠按钮 -->
                    <ToggleButton x:Name="Expander" 
                                  Style="{StaticResource ExpandCollapseToggleStyle}"
                                  IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
                                  ClickMode="Press"/>

                    <!-- 目录名称区域（带缩进逻辑） -->
                    <Border x:Name="Bd" 
                            Grid.Column="1"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}">
                        <ContentPresenter x:Name="PART_Header"
                                          ContentSource="Header"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>

                    <!-- 全局右对齐的操作按钮区 -->
                    <StackPanel x:Name="ButtonPanel"
                                Grid.Column="2"
                                Orientation="Horizontal"
                                VerticalAlignment="Center"
                                Margin="0,0,5,0">
                        <Button Style="{StaticResource IconButtonStyle}"
                                Command="{Binding DataContext.NewDirCommand, RelativeSource={RelativeSource AncestorType=TreeView}}"
                                CommandParameter="{Binding}">
                            <Image Source="pack://application:,,,/GeoRoad.UI.Net8;component/Resources/icons8-add-48.png" Width="16" Height="16"/>
                        </Button>
                        <Button Style="{StaticResource IconButtonStyle}"
                                Command="{Binding DataContext.RenameCommand, RelativeSource={RelativeSource AncestorType=TreeView}}"
                                CommandParameter="{Binding}">
                            <Image Source="pack://application:,,,/GeoRoad.UI.Net8;component/Resources/icons8-rename-48.png" Width="16" Height="16"/>
                        </Button>
                        <Button Style="{StaticResource IconButtonStyle}"
                                Command="{Binding DataContext.DeleteDirCommand, RelativeSource={RelativeSource AncestorType=TreeView}}"
                                CommandParameter="{Binding}">
                            <Image Source="pack://application:,,,/GeoRoad.UI.Net8;component/Resources/icons8-delete-48.png" Width="16" Height="16"/>
                        </Button>
                    </StackPanel>

                    <!-- 子节点容器（保持原有缩进层级） -->
                    <ItemsPresenter x:Name="ItemsHost"
                                    Grid.Column="1"
                                    Grid.ColumnSpan="2"
                                    Margin="19,0,0,0"/>
                </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="Collapsed"/>
                    </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.InactiveSelectionHighlightBrushKey}}"/>
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}"/>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

2. 添加展开/折叠按钮基础样式

如果项目中没有默认的展开折叠按钮样式，在UserControl.Resources中补充：

<Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Width" Value="19"/>
    <Setter Property="Height" Value="13"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border Width="19" Height="13" Background="Transparent">
                    <Path x:Name="ExpandPath"
                          HorizontalAlignment="Left"
                          VerticalAlignment="Center"
                          Fill="Black"
                          Data="M 0 0 L 0 6 L 6 0 Z">
                        <Path.RenderTransform>
                            <RotateTransform Angle="135" CenterX="3" CenterY="3"/>
                        </Path.RenderTransform>
                    </Path>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="ExpandPath" Property="RenderTransform">
                            <Setter.Value>
                                <RotateTransform Angle="225" CenterX="3" CenterY="3"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

3. 简化HierarchicalDataTemplate

因为按钮已经移到TreeViewItem模板中，原模板只需保留目录内容：

<HierarchicalDataTemplate ItemsSource="{Binding Children}">
    <StackPanel Orientation="Horizontal">
        <Image Width="16" Height="16" Margin="0,0,5,0"
               Source="{Binding Type, Converter={StaticResource DirTypeToIconConverter}}"/>
        <TextBlock Text="{Binding Name}" VerticalAlignment="Center"/>
    </StackPanel>
</HierarchicalDataTemplate>

实现逻辑说明 #

• 将TreeViewItem的布局拆分为三列：展开按钮列、目录内容列、操作按钮列
• 操作按钮列直接对齐到Grid最右侧，完全脱离节点缩进逻辑
• 子节点容器ItemsPresenter跨列显示，保留原有嵌套层级的缩进效果

内容的提问来源于stack exchange，提问作者sendreams