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

Question

我正在使用AvalonDock开发一个供我们的开发人员和QA内部使用的工具。我正在研究主题中提供的VS2010样式的自定义版本。这种风格还不够像VS2010，让我对它感到满意。我已经做了几乎所有的颜色和图像更改，我只是注意到，当页签超过标题区域的容量时，DocumentPane中的标签不会像VS2010那样滚动。

因为我在我的项目中有完整的样式，所以我找到了应用样式的区域。我在广告的周围放置了一个ScrollViewer :DocumentTabPanel，我想我可以以某种方式改变水平滚动条的样式，这样标签的左右两边都会有一个箭头。

这个是可能的吗？

​

​

这是在我的基础修改后的样式，但没有对滚动查看器进行任何修改：

    <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，并在按下两个RepeatButtons时手动滚动内容是最容易的。

我最初使用的代码可以在here中找到，但基本思想是覆盖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>