设置 WPF ScrollViewer 的样式，使其看起来像 VS2010 选项卡滚动条

Question

我正在使用 AvalonDock 开发一个供我们的开发人员和 QA 内部使用的工具。我正在开发主题中提供的 VS2010 样式的自定义版本。这种风格的功能不够像 VS2010 那样让我满意。我已经完成了几乎所有的颜色和图像更改，我只是注意到当选项卡数量超出标题区域的容纳范围时，DocumentPane 中的选项卡不会像 VS2010 那样滚动。

由于我的项目中有完整的样式，因此我找到了应用样式的区域。我在 ad:DocumentTabPanel 周围放置了一个 ScrollViewer，认为我可以以某种方式重新设置水平滚动条的样式，以便选项卡的左侧和右侧都有一个箭头。

这可能吗？

这是我基本修改后的样式，但未对滚动查看器进行任何修改：

    <Style x:Key="{x:Type ad:DocumentPane}" TargetType="{x:Type ad:DocumentPane}">
    <Setter Property="Background" Value="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DefaultBackgroundBrush}}}"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ad:DocumentPane}" >
                <ControlTemplate.Resources>
                    <ContextMenu x:Key="DocumentsListMenu" StaysOpen="True"  />
                </ControlTemplate.Resources>
                <Border 
                    Background="{TemplateBinding Background}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Border x:Name="PART_Header" 
                            Grid.Row="0" 
                            Focusable="False" 
                            >
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="18"/>
                                </Grid.ColumnDefinitions>
                                <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" CanContentScroll="True">

                                        <ad:DocumentTabPanel 
                                          x:Name="paneTabsPanel" 
                                          Panel.ZIndex ="1" 
                                          IsItemsHost="True" 
                                          TabItemStyle="{StaticResource CustomDocumentTabItemStyle}"/>

                                </ScrollViewer>
                                <Button x:Name="PART_ShowContextMenuButton" 
                                        Grid.Column="2"
                                        Width="15" Height="15" 
                                        Style="{StaticResource PaneHeaderCommandStyle}">
                                    <Image x:Name="ShowContextMenuIcon" Source="pack://application:,,,/Images/Dev2010/PinMenu.png" Width="13" Height="13" Stretch="None"/>
                                </Button>
                            </Grid>
                        </Border>
                        <Grid Grid.Row="1">
                            <Border 
                                x:Name="topBorder"
                                Height="4"
                                Background="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBorder}}}" 
                                CornerRadius="2,2,0,0" 
                                VerticalAlignment="Top"
                                HorizontalAlignment="Stretch"
                                >
                            </Border>
                            <Border
                                x:Name="bottomBorder"
                                Height="4"
                                Background="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBorder}}}" 
                                CornerRadius="0,0,2,2" 
                                VerticalAlignment="Bottom"
                                HorizontalAlignment="Stretch"
                                >
                            </Border>
                            <ContentPresenter 
                                    Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem.Content}"
                                    Margin="0,4,0,4"
                                    KeyboardNavigation.TabNavigation="Local"
                                    KeyboardNavigation.DirectionalNavigation="Contained"
                                    KeyboardNavigation.TabIndex="1"
                                    />
                        </Grid>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>                        
                    <Trigger Property="HasItems" Value="False">
                        <Setter Property="Visibility" Value="Hidden"/>
                    </Trigger>
                    <Trigger Property="ShowHeader" Value="False">
                        <Setter Property="Visibility" Value="Collapsed" TargetName="PART_Header" />
                    </Trigger>
                    <!--<DataTrigger Binding="{Binding Path=IsMainDocumentPane, RelativeSource={RelativeSource Self}}" Value="True">
                        <Setter Property="Source" Value="pack://application:,,,/Images/Dev2010/PinDockMenu.png" TargetName="ShowContextMenuIcon"/>
                    </DataTrigger>-->

                                                <Trigger Property="ContainsActiveDocument" Value="True">
                                                    <Setter Property="Background" 
                                Value="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBorderSelected}}}" 
                                TargetName="topBorder"/>
                                                    <Setter Property="Background" 
                                Value="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBorderSelected}}}" 
                                TargetName="bottomBorder"/>
                                                </Trigger>

                                                <Trigger Property="ContainsActiveContent" Value="True">
                                                    <Setter Property="Background" 
                                Value="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBorderSelectedActivated}}}" 
                                TargetName="topBorder"/>
                                                    <Setter Property="Background" 
                                Value="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBorderSelectedActivated}}}" 
                                TargetName="bottomBorder"/>
                                                </Trigger>

                                                <EventTrigger RoutedEvent="Window.Loaded">
                                                    <BeginStoryboard>
                                                        <Storyboard>
                                                            <DoubleAnimation
                                    Storyboard.TargetProperty="Opacity"
                                    From="0" To="1"  Duration="0:0:0.200" />
                                                        </Storyboard>
                                                    </BeginStoryboard>
                                                </EventTrigger>
                                                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

我过去做过类似的事情，发现最简单的方法是隐藏 ScrollViewer 的 ScrollBar，并在按下两个 RepeatButton 时手动滚动内容。

我最初开始使用的代码可以在此处找到，但基本思想是覆盖 ScrollViewer 的模板，使其看起来像这样：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <RepeatButton Grid.Column="0" Command="ScrollBar.PageLeftCommand" Content="<" />
    <RepeatButton Grid.Column="2" Command="ScrollBar.PageRightCommand" Content=">" />

    <ScrollContentPresenter Grid.Column="1" Content="{TemplateBinding ScrollViewer.Content}"/>
</Grid>