简体   繁体   中英

ScrollViewer with custom style doesn't scroll when dragged

I'm not an expert in WPF, but I found a style online for OS X-like scrollbars. It looks fine, and does scroll in the expected way with the mouse wheel, but oddly, if you drag the scroll bar with the mouse, it doesn't actually scroll the content, it just moves the bar on the screen. What is wrong with this style?

I won't pretend I completely understand everything that's going on in this style, but I've been looking into the documentation for the individual pieces of it, and I cannot, thus far, figure out what's wrong.

XAML:

<Style x:Key="ScrollBarTrackThumb"
        TargetType="{x:Type Thumb}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Thumb}">
                            <Grid x:Name="Grid">
                                <Rectangle HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Width="Auto"
                                Height="Auto"
                                Fill="Transparent" />
                                <Border x:Name="CornerScrollBarRectangle"
                            CornerRadius="5"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Width="Auto"
                            Height="Auto"
                            Margin="0,1,0,1"
                            Background="{TemplateBinding Background}" />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="Tag"
                                Value="Horizontal">
                                    <Setter TargetName="CornerScrollBarRectangle"
                                Property="Width"
                                Value="Auto" />
                                    <Setter TargetName="CornerScrollBarRectangle"
                                Property="Height"
                                Value="6" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="{x:Type ScrollBar}" x:Key="BlackBGScrollBar">
                <Setter Property="Stylus.IsFlicksEnabled"
            Value="false" />
                <Setter Property="Foreground"
            Value="#ADABAB" />
                <Setter Property="Background"
            Value="Transparent" />
                <Setter Property="Width"
            Value="7" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid x:Name="GridRoot"
                        Width="7"
                        Background="{TemplateBinding Background}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="0.00001*" />
                                </Grid.RowDefinitions>
                                <Track x:Name="PART_Track"
                            Grid.Row="0"
                            IsDirectionReversed="true"
                            Focusable="false">
                                    <Track.Thumb>
                                        <Thumb x:Name="Thumb"
                                    Background="{TemplateBinding Foreground}"
                                    Style="{DynamicResource ScrollBarTrackThumb}" />
                                    </Track.Thumb>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton x:Name="PageUp"
                                            Command="ScrollBar.PageDownCommand"
                                            Opacity="0"
                                            Focusable="false" />
                                    </Track.IncreaseRepeatButton>
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton x:Name="PageDown"
                                            Command="ScrollBar.PageUpCommand"
                                            Opacity="0"
                                            Focusable="false" />
                                    </Track.DecreaseRepeatButton>
                                </Track>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger SourceName="Thumb"
                                Property="IsMouseOver"
                                Value="true">
                                    <Setter Value="{DynamicResource ButtonSelectBrush}"
                                TargetName="Thumb"
                                Property="Background" />
                                </Trigger>
                                <Trigger SourceName="Thumb"
                                Property="IsDragging"
                                Value="true">
                                    <Setter Value="{DynamicResource DarkBrush}"
                                TargetName="Thumb"
                                Property="Background" />
                                </Trigger>

                                <Trigger Property="IsEnabled"
                                Value="false">
                                    <Setter TargetName="Thumb"
                                Property="Visibility"
                                Value="Collapsed" />
                                </Trigger>
                                <Trigger Property="Orientation"
                                Value="Horizontal">
                                    <Setter TargetName="GridRoot"
                                Property="LayoutTransform">
                                        <Setter.Value>
                                            <RotateTransform Angle="-90" />
                                        </Setter.Value>
                                    </Setter>
                                    <Setter TargetName="PART_Track"
                                Property="LayoutTransform">
                                        <Setter.Value>
                                            <RotateTransform Angle="-90" />
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="Width"
                                Value="Auto" />
                                    <Setter Property="Height"
                                Value="8" />
                                    <Setter TargetName="Thumb"
                                Property="Tag"
                                Value="Horizontal" />
                                    <Setter TargetName="PageDown"
                                Property="Command"
                                Value="ScrollBar.PageLeftCommand" />
                                    <Setter TargetName="PageUp"
                                Property="Command"
                                Value="ScrollBar.PageRightCommand" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style TargetType="ScrollViewer" x:Key="BlackBGScrollViewer">
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="VerticalContentAlignment" Value="Top" />
                <Setter Property="VerticalScrollBarVisibility" Value="Visible" />
                <Setter Property="Padding" Value="4"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="BorderBrush">
                    <Setter.Value>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFA3AEB9" Offset="0"/>
                            <GradientStop Color="#FF8399A9" Offset="0.375"/>
                            <GradientStop Color="#FF718597" Offset="0.375"/>
                            <GradientStop Color="#FF617584" Offset="1"/>
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ScrollViewer">
                            <Border CornerRadius="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                <Grid Background="{TemplateBinding Background}">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>

                                    <ScrollContentPresenter x:Name="ScrollContentPresenter"
                                                  Cursor="{TemplateBinding Cursor}"
                                                  Margin="{TemplateBinding Padding}"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"/>

                                    <Rectangle Grid.Column="1" Grid.Row="1" Fill="#FFE9EEF4"/>

                                    <ScrollBar x:Name="VerticalScrollBar" Width="18"
                                     IsTabStop="False"
                                     Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                     Grid.Column="1" Grid.Row="0" Orientation="Vertical"
                                     ViewportSize="{TemplateBinding ViewportHeight}"
                                     Maximum="{TemplateBinding ScrollableHeight}"
                                     Minimum="0"
                                     Value="{TemplateBinding VerticalOffset}"
                                     Margin="0,-1,-1,-1"
                                     Style="{StaticResource BlackBGScrollBar}"/>

                                    <ScrollBar x:Name="HorizontalScrollBar" Height="18"
                                     IsTabStop="False"
                                     Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                     Grid.Column="0" Grid.Row="1" Orientation="Horizontal"
                                     ViewportSize="{TemplateBinding ViewportWidth}"
                                     Maximum="{TemplateBinding ScrollableWidth}"
                                     Minimum="0"
                                     Value="{TemplateBinding HorizontalOffset}"
                                     Margin="-1,0,-1,-1"
                                     Style="{StaticResource BlackBGScrollBar}"/>

                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Figured it out.

In the ScrollViewer style, at the bottom, the tags need to have the names "PART_VerticalScrollBar" and "PART_HorizontalScrollBar", not merely "VerticalScrollBar" and "HorizontalScrollBar".

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM