如何使用以 WPF 应用程序为中心的按钮创建全角工具栏？

Question

我有一个用 c# 编写的 WPF 应用程序。我需要创建一个具有全宽背景的工具栏，其中工具栏按钮位于中间。

这是我的XAML 代码

<ToolBarPanel ToolBarTray.IsLocked="True"
              Style="{StaticResource ContentRoot}">

    <ToolBar VerticalAlignment="Center"
             HorizontalAlignment="Center"
             Loaded="ToolBar_Loaded"
             MinWidth="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToolBarTray}}, Path=ActualWidth}">

        <StackPanel Orientation="Horizontal">
            <Button VerticalAlignment="Center"
                    Command="{Binding StepBackward}"
                    ToolTipService.ToolTip="Go to previous page"
                    ToolTipService.Placement="Mouse"
                    Height="32">

                <fa:FontAwesome Icon="StepBackward"
                                FontSize="18" />
            </Button>

            <Button VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    Command="{Binding Backward}"
                    ToolTipService.ToolTip="Go to first page"
                    ToolTipService.Placement="Mouse"
                    Height="32">

                <fa:FontAwesome Icon="Backward"
                                FontSize="18" />
            </Button>

            <TextBox Text="{Binding PageNumber}"
                     Width="50"
                     TextAlignment="Center"
                     VerticalAlignment="Center"
                     Padding="0, 4"
                     IsReadOnly="True"
                     ToolTipService.ToolTip="Current selected page"
                     ToolTipService.Placement="Mouse"
                     Height="32" />

            <Label Content="{Binding OfPageCount}"
                   Padding="5"
                   Height="32" />

            <Button VerticalAlignment="Center"
                    Command="{Binding Forward}"
                    ToolTipService.ToolTip="Go to last page"
                    ToolTipService.Placement="Mouse"
                    Height="32">

                <fa:FontAwesome Icon="Forward"
                                FontSize="18" />
            </Button>

            <Button VerticalAlignment="Center"
                    Command="{Binding StepForward}"
                    ToolTipService.ToolTip="Go to next page"
                    ToolTipService.Placement="Mouse"
                    Height="32">

                <fa:FontAwesome Icon="StepForward"
                                FontSize="18" />
            </Button>

            <ComboBox ItemsSource="{Binding PageSizes}"
                      SelectedItem="{Binding SelectedPageSize, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                      DisplayMemberPath="Text"
                      SelectedValuePath="Value"
                      VerticalAlignment="Center"
                      HorizontalAlignment="Center"
                      HorizontalContentAlignment="Center"
                      Width="75"
                      Padding="0, 5"
                      ToolTipService.ToolTip="Show selected amount of records per page"
                      ToolTipService.Placement="Mouse"
                      Height="32" />



            <ComboBox ItemsSource="{Binding Pages}"
                      SelectedItem="{Binding SelectedPage, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                      DisplayMemberPath="Text"
                      SelectedValuePath="Value"
                      VerticalAlignment="Center"
                      HorizontalAlignment="Center"
                      HorizontalContentAlignment="Center"
                      Width="75"
                      Padding="0, 5"
                      ToolTipService.ToolTip="Go to selected page"
                      ToolTipService.Placement="Mouse"
                      Height="32" />


            <Label Content="{Binding OfItemCount}"
                   Padding="5"
                   Height="32" />

        </StackPanel>
    </ToolBar>
</ToolBarPanel>

我的代码将中心的按钮显示为已用，但背景“ToolBarPanel”并没有按照需要一直延伸到我的屏幕上。

如何拉伸工具栏上的背景？

Answer 1

这是来自another SO question的解决方案

     <!-- ... -->
     <ToolBar VerticalAlignment="Center"
         HorizontalAlignment="Stretch"
         MinWidth="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToolBarTray}}, Path=ActualWidth}">

            <ToolBar.Resources>
                <Style TargetType="{x:Type DockPanel}">
                    <Setter Property="HorizontalAlignment" Value="Center" />
                </Style>
            </ToolBar.Resources>

            <StackPanel Orientation="Horizontal">
     <!-- ... -->

为了使它工作，我必须更改 ToolBar 的 HorizontalAlignment 并将其设置为 Stretch 并添加 DockPanel 样式覆盖。

如果您甚至不使用DockPanel 样式，为什么要更改样式？ default WPF ToolBar style 使用一个，所以我们的代码覆盖了这个内部 DockPanel 以确保我们的内容居中。请注意，此样式覆盖将应用于您的ToolBar 子级中的所有DockPanel，现在您不使用任何，但如果您有一天添加一个，您可能希望将其HorizontalAlignment 显式设置为@987654333 @ 或删除 DockPanel 样式覆盖并创建自己的 ToolBar 样式（灵感来自默认样式），并将 DockPanel HorizontalAlignment 设置为 Center。