Harris M Snyder
Harris M Snyder

Reputation: 341

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>

Upvotes: 3

Views: 1445

Answers (1)

Harris M Snyder
Harris M Snyder

Reputation: 341

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".

Upvotes: 4

Related Questions