如何将WPF-UI标题栏TrailingContent固定在左侧？

问题描述 #

我正在使用WPF-UI（Lepo）库，希望将TitleBar.TrailingContent区域内的所有按钮及图标移至标题栏左侧。当前XAML代码如下：

<ui:TitleBar x:Name="TitleBar"
             Title="KONSAR"
             CloseWindowByDoubleClickOnIcon="True"
             Grid.Row="0">

    <ui:TitleBar.TrailingContent>
        <StackPanel Orientation="Horizontal"
                    VerticalAlignment="Center"
                    WindowChrome.IsHitTestVisibleInChrome="True">

            <Button Content="File" Style="{StaticResource Button Style}"/>
            <Button Content="Approve" Style="{StaticResource Button Style}"/>
            <Button Content="Compile(F5)" Style="{StaticResource Button Style}"/>
            <Button Content="Command Generator" Style="{StaticResource Button Style}"/>

            <ui:Button Appearance="Transparent"
                       BorderThickness="0"
                       ToolTip="Settings"
                       Icon="{ui:SymbolIcon Settings24}"/>

            <ToggleButton x:Name="AvatarToggle"
                          Focusable="False"
                          Background="Transparent"
                          BorderThickness="0">
                <Border Width="30" Height="30"
                        CornerRadius="15"
                        Background="#33393A"
                        BorderBrush="#55FFFFFF"
                        BorderThickness="1">
                    <Grid>
                        <ui:SymbolIcon Symbol="Person24"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"/>
                    </Grid>
                </Border>
            </ToggleButton>

        </StackPanel>
    </ui:TitleBar.TrailingContent>
</ui:TitleBar>

WPF-UI默认将TrailingContent右对齐，尝试用占位控件将其推至左侧，但窗口调整大小时元素会回到右侧，该方法无效。需要了解如何强制TitleBar.TrailingContent保持左对齐，是否有可定制对齐方式的属性、样式重写或模板修改方案。

解决方案 #

1. 重写TitleBar的ControlTemplate（推荐） #

WPF-UI的TitleBar默认模板中，承载TrailingContent的ContentPresenter是右对齐的，重写模板修改其对齐方式是最可靠的方案：

步骤：创建自定义样式

将以下样式添加到你的资源字典（如App.xaml或页面资源），它基于默认TitleBar样式修改了TrailingContent的对齐：

<Style TargetType="{x:Type ui:TitleBar}" BasedOn="{StaticResource {x:Type ui:TitleBar}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ui:TitleBar}">
                <Grid Background="{TemplateBinding Background}"
                      Height="{TemplateBinding Height}">
                    <!-- 窗口图标按钮 -->
                    <Button x:Name="PART_IconButton"
                            Margin="8,0"
                            Width="32"
                            Height="32"
                            Background="Transparent"
                            BorderThickness="0"
                            WindowChrome.IsHitTestVisibleInChrome="True">
                        <ui:SymbolIcon x:Name="PART_Icon"
                                       Symbol="{TemplateBinding Icon}"
                                       Foreground="{TemplateBinding Foreground}"/>
                    </Button>

                    <!-- 标题文本区域 -->
                    <ContentPresenter x:Name="PART_TitlePresenter"
                                      Margin="48,0,0,0"
                                      VerticalAlignment="Center"
                                      Content="{TemplateBinding Title}"
                                      ContentTemplate="{TemplateBinding TitleTemplate}"
                                      RecognizesAccessKey="True"
                                      WindowChrome.IsHitTestVisibleInChrome="True"/>

                    <!-- 修改TrailingContent容器的对齐方式为Left -->
                    <ContentPresenter x:Name="PART_TrailingContentPresenter"
                                      Margin="180,0,0,0" <!-- 调整margin避免覆盖标题/图标 -->
                                      HorizontalAlignment="Left"
                                      VerticalAlignment="Center"
                                      Content="{TemplateBinding TrailingContent}"
                                      ContentTemplate="{TemplateBinding TrailingContentTemplate}"
                                      WindowChrome.IsHitTestVisibleInChrome="True"/>

                    <!-- 窗口控制按钮组 -->
                    <StackPanel x:Name="PART_WindowButtonsContainer"
                                Margin="0,0,8,0"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center"
                                Orientation="Horizontal"
                                WindowChrome.IsHitTestVisibleInChrome="True">
                        <ui:WindowButton x:Name="PART_MinimizeButton"
                                         Style="{StaticResource WindowButtonStyle}"
                                         Symbol="ChevronDown24"/>
                        <ui:WindowButton x:Name="PART_MaximizeButton"
                                         Style="{StaticResource WindowButtonStyle}"
                                         Symbol="Square24"/>
                        <ui:WindowButton x:Name="PART_RestoreButton"
                                         Style="{StaticResource WindowButtonStyle}"
                                         Symbol="Restore24"/>
                        <ui:WindowButton x:Name="PART_CloseButton"
                                         Style="{StaticResource WindowButtonStyle}"
                                         Symbol="Close24"/>
                    </StackPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

• 核心修改：将PART_TrailingContentPresenter的HorizontalAlignment从默认的Right改为Left，并调整Margin避免与图标、标题文本重叠。
• 效果：TrailingContent内的元素会永久左对齐，窗口调整大小时不会偏移。

2. 调整TrailingContent的外层容器（简易方案） #

如果不想重写完整模板，可尝试在TrailingContent外层嵌套Grid，让内容占据标题栏宽度并左对齐：

<ui:TitleBar.TrailingContent>
    <Grid HorizontalAlignment="Stretch">
        <StackPanel Orientation="Horizontal"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Left"
                    Margin="48,0,0,0" <!-- 避开图标区域 -->
                    WindowChrome.IsHitTestVisibleInChrome="True">
            <!-- 你的按钮和图标元素 -->
        </StackPanel>
    </Grid>
</ui:TitleBar.TrailingContent>

• 注意：该方案仅在默认模板允许TrailingContent容器填充标题栏宽度时生效。如果默认模板中TrailingContentPresenter是固定宽度或右对齐，此方法可能无效，此时仍需使用模板重写方案。

内容的提问来源于stack exchange，提问作者2월32일