none
修改ScrollViewer控件模版后,垂直滚动条行为与滚轮操作方向相反 RRS feed

  • 问题

  •  <ControlTemplate x:Key="ScrollViewerVerticalTemplate" TargetType="{x:Type ScrollViewer}">
                <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="True" CanVerticallyScroll="True" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
                    <ScrollBar HorizontalAlignment="Right" Opacity="0.9" Style="{StaticResource DefaultScrollBar}" x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter TargetName="PART_VerticalScrollBar" Property="Visibility" Value="Hidden" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="PART_VerticalScrollBar" Property="Visibility" Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>

    以上是ScrollView的控件模版,模版里面使用的样式和原生的基本相差不多,下面是使用该模版的一个简单示例:

    <Grid>
            <ScrollViewer Name="scrollViewer" ScrollViewer.VerticalScrollBarVisibility="Auto" Template="{DynamicResource ScrollViewerVerticalTemplate}">
                <TextBlock TextWrapping="Wrap">
                    <TextBlock.Text>
                        一大段文字。。。。。
                    </TextBlock.Text>
                </TextBlock>
            </ScrollViewer>
        </Grid>

    社区现在还没验证我的账户,所以正文不能包含图片,运行出来的效果是,垂直滚动条显示在文本右侧,但其中的滑块初始位置就在最下方。


    当滚轮向下时,文本正常向下滚动,但是垂直滚动条向上,反之也是这样的行为,想请问该问题出现的原因。

    2017年8月14日 1:59

答案


  • Hi 悟空无归,

    根据你DefaultScrollBar Style 的代码,确实回出现你说的问题。

    我尝试使用了下面的代码,你可以参考并修改你的代码。

    <Window.Resources>
    
            <ControlTemplate x:Key="MyScrollViewerControlTemplate" TargetType="{x:Type ScrollViewer}">
                <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Rectangle x:Name="Corner" Grid.Column="1" Fill="White" Grid.Row="1"/>
                    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
                    <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource MyScrollBarStyle}"/>
                   
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter TargetName="PART_VerticalScrollBar" Property="Visibility" Value="Hidden" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="PART_VerticalScrollBar" Property="Visibility" Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
    
            <!-- 应该在此定义资源字典条目。-->
            <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>
    
            <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                            <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Thumb}">
                            <Border Name="rectangle" Opacity="0.8" Background="Violet" CornerRadius="6" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" />
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" TargetName="rectangle" Value="Orange"/>
                                </Trigger>
                                <Trigger Property="IsDragging" Value="True">
                                    <Setter TargetName="rectangle" Property="Background" Value="Violet"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                            <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="MyScrollBarStyle" TargetType="{x:Type ScrollBar}">
                <Setter Property="Background" Value="AliceBlue"/>
                <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
                <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
    
                <Setter Property="Width" Value="6"/>
                <Setter Property="MinWidth" Value="6"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid x:Name="Bg" Background="AliceBlue" SnapsToDevicePixels="true" Width="6">
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource ScrollBarThumb}"/>
                                    </Track.Thumb>
                                </Track>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="Orientation" Value="Horizontal">
                        <Setter Property="Width" Value="Auto"/>
                        <Setter Property="MinWidth" Value="0"/>
                        <Setter Property="Height" Value="6"/>
                        <Setter Property="MinHeight" Value="6"/>
                        <Setter Property="Background" Value="AliceBlue"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ScrollBar}">
                                    <Grid x:Name="Bg" Background="AliceBlue" SnapsToDevicePixels="true">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition />
                                        </Grid.ColumnDefinitions>
                                        <Track x:Name="PART_Track"  IsEnabled="{TemplateBinding IsMouseOver}">
                                            <Track.DecreaseRepeatButton>
                                                <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                            </Track.DecreaseRepeatButton>
                                            <Track.IncreaseRepeatButton>
                                                <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                            </Track.IncreaseRepeatButton>
                                            <Track.Thumb>
                                                <Thumb Style="{StaticResource ScrollBarThumb}" />
                                            </Track.Thumb>
                                        </Track>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsEnabled" Value="false">
                                            <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
    
        </Window.Resources>
        
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="30" />
                <RowDefinition />
            </Grid.RowDefinitions>
           
            <ScrollViewer Grid.Row="1" HorizontalAlignment="Stretch" Margin="0" Name="scrollViewer1" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" 
             Template="{StaticResource MyScrollViewerControlTemplate}">
                <TextBlock TextWrapping="Wrap">
                    <TextBlock.Text>
                        一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。
                    </TextBlock.Text>
                </TextBlock>
    
            </ScrollViewer>
        </Grid>
    

    Best Regards,

    Yohann Lu


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    2017年8月14日 10:39
    版主

全部回复


  • Hi 悟空无归,

    测试你的代码之后,我发现应该是下面代码导致的问题。请讲DefaultScrollBar Style 的代码贴出来给大家参考分析下。

     <ScrollBar HorizontalAlignment="Right" Opacity="0.9" Style="{StaticResource DefaultScrollBar}" x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>


    你也可以参考下面文章如何来自定义ScrollViewer样式.

    ScrollBar 样式和模板:
    https://msdn.microsoft.com/zh-cn/library/ms742173(v=vs.110).aspx

    WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化):
    http://www.cnblogs.com/lanymy/archive/2013/05/20/3088516.html

    WPF自定义ScrollViewer:
    http://blog.csdn.net/qian_f/article/details/29876077

    注意:此回复包含对第三方万维网站点的引用。 微软正在为您提供方便的信息。 Microsoft不控制这些网站,并没有测试这些网站上发现的任何软件或信息; 因此,Microsoft不能对在那里发现的任何软件或信息的质量,安全性或适用性做任何陈述。 使用互联网上发现的任何软件都存在固有的危险,微软警告您确保在从因特网检索任何软件之前,您完全了解风险.

    Best Regards,

    Yohann Lu



    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.


    2017年8月14日 8:34
    版主
  • 您好,非常感谢您的细心解答,以下是我对ScrollViewer控件模版所使用的所有样式:

    <!--滚动条两边按钮样式-->
            <Style x:Key="ScrollBarButton" TargetType="RepeatButton">
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="HorizontalContentAlignment" Value="Center" />
                <Setter Property="Width" Value="Auto" />
                <Setter Property="Height" Value="Auto" />
                <Setter Property="Focusable" Value="False" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                            <Border Name="border" BorderThickness="1" Background="Transparent">
                                <ContentPresenter Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="border" Property="Background" Value="Aqua" />
                                </Trigger>
                                <Trigger Property="IsPressed" Value="True">
                                    <Setter TargetName="border" Property="Background" Value="Azure" />
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter TargetName="border" Property="Opacity" Value="0.5" />
                                    <Setter TargetName="border" Property="Background" Value="Beige" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <!--滑块两边按钮样式-->
            <Style x:Key="ScrollBarTransButton" TargetType="{x:Type RepeatButton}">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Focusable" Value="False" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                            <Rectangle Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <!--滚动条垂直滑块样式-->
            <Style x:Key="ScrollBarThumbVertival" TargetType="{x:Type Thumb}">
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Thumb}">
                            <Border Name="rectangle" Opacity="0.8" Background="Violet" CornerRadius="6" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" />
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" TargetName="rectangle" Value="Orange"/>
                                </Trigger>
                                <Trigger Property="IsDragging" Value="True">
                                    <Setter TargetName="rectangle" Property="Background" Value="Violet"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>       
            <!--垂直滚动条模版-->
            <ControlTemplate x:Key="ScrollBarVertical" TargetType="{x:Type ScrollBar}">
                <Grid x:Name="HorizontalRoot" Width="{TemplateBinding Width}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <!--内部背景-->
                    <Border Width="{TemplateBinding Width}" Name="BgInner" Grid.Row="1" Margin="0" Opacity="0" />
                    <!--中间滑块-->
                    <Track Name="PART_Track" Grid.Row="1">
                        <Track.DecreaseRepeatButton>
                            <RepeatButton Command="ScrollBar.PageUpCommand" IsTabStop="False" Interval="50" Style="{StaticResource ScrollBarTransButton}" />
                        </Track.DecreaseRepeatButton>
                        <Track.Thumb>
                            <Thumb Style="{StaticResource ScrollBarThumbVertival}"/>
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Command="ScrollBar.PageDownCommand" IsTabStop="False" Interval="50" Style="{StaticResource ScrollBarTransButton}" />
                        </Track.IncreaseRepeatButton>
                    </Track>
                </Grid>
            </ControlTemplate>
            <!--ScrollBar样式-->
            <Style x:Key="DefaultScrollBar" TargetType="{x:Type ScrollBar}">
                <Setter Property="OverridesDefaultStyle" Value="True"/>
                <Setter Property="SnapsToDevicePixels" Value="True"/>
                <Style.Triggers>
                    <Trigger Property="Orientation" Value="Horizontal">
                        <Setter Property="Template" Value="{StaticResource ScrollBarHorizontal}"/>
                        <Setter Property="Height" Value="12" />
                    </Trigger>
                    <Trigger Property="Orientation" Value="Vertical">
                        <Setter Property="Template" Value="{StaticResource ScrollBarVertical}"/>
                        <Setter Property="Width" Value="8" />
                    </Trigger>
                </Style.Triggers>
            </Style>
    其中我删除了对水平滚动条的定义,针对以上的xaml定义,劳您再次看看这其中是否存在导致我出现所提问题的原因。

    2017年8月14日 8:53

  • Hi 悟空无归,

    根据你DefaultScrollBar Style 的代码,确实回出现你说的问题。

    我尝试使用了下面的代码,你可以参考并修改你的代码。

    <Window.Resources>
    
            <ControlTemplate x:Key="MyScrollViewerControlTemplate" TargetType="{x:Type ScrollViewer}">
                <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Rectangle x:Name="Corner" Grid.Column="1" Fill="White" Grid.Row="1"/>
                    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
                    <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource MyScrollBarStyle}"/>
                   
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter TargetName="PART_VerticalScrollBar" Property="Visibility" Value="Hidden" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="PART_VerticalScrollBar" Property="Visibility" Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
    
            <!-- 应该在此定义资源字典条目。-->
            <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>
    
            <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                            <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Thumb}">
                            <Border Name="rectangle" Opacity="0.8" Background="Violet" CornerRadius="6" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" />
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" TargetName="rectangle" Value="Orange"/>
                                </Trigger>
                                <Trigger Property="IsDragging" Value="True">
                                    <Setter TargetName="rectangle" Property="Background" Value="Violet"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                            <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="MyScrollBarStyle" TargetType="{x:Type ScrollBar}">
                <Setter Property="Background" Value="AliceBlue"/>
                <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
                <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
    
                <Setter Property="Width" Value="6"/>
                <Setter Property="MinWidth" Value="6"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid x:Name="Bg" Background="AliceBlue" SnapsToDevicePixels="true" Width="6">
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource ScrollBarThumb}"/>
                                    </Track.Thumb>
                                </Track>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="Orientation" Value="Horizontal">
                        <Setter Property="Width" Value="Auto"/>
                        <Setter Property="MinWidth" Value="0"/>
                        <Setter Property="Height" Value="6"/>
                        <Setter Property="MinHeight" Value="6"/>
                        <Setter Property="Background" Value="AliceBlue"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ScrollBar}">
                                    <Grid x:Name="Bg" Background="AliceBlue" SnapsToDevicePixels="true">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition />
                                        </Grid.ColumnDefinitions>
                                        <Track x:Name="PART_Track"  IsEnabled="{TemplateBinding IsMouseOver}">
                                            <Track.DecreaseRepeatButton>
                                                <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                            </Track.DecreaseRepeatButton>
                                            <Track.IncreaseRepeatButton>
                                                <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                            </Track.IncreaseRepeatButton>
                                            <Track.Thumb>
                                                <Thumb Style="{StaticResource ScrollBarThumb}" />
                                            </Track.Thumb>
                                        </Track>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsEnabled" Value="false">
                                            <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
    
        </Window.Resources>
        
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="30" />
                <RowDefinition />
            </Grid.RowDefinitions>
           
            <ScrollViewer Grid.Row="1" HorizontalAlignment="Stretch" Margin="0" Name="scrollViewer1" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" 
             Template="{StaticResource MyScrollViewerControlTemplate}">
                <TextBlock TextWrapping="Wrap">
                    <TextBlock.Text>
                        一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。一大段文字。。。。。
                    </TextBlock.Text>
                </TextBlock>
    
            </ScrollViewer>
        </Grid>
    

    Best Regards,

    Yohann Lu


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    2017年8月14日 10:39
    版主
  • 该问题出现的原因是:在ScrollBar控件模版中,Track元素需要设置IsDirectionReversed属性,用来获取或设置增加值的刻度线的方向,其值为true。修改后,滚动条行为与滚轮行为相一致。
    2017年8月16日 8:03