0

I'm attempting to use the following code suggested to change the minimum thumb size for scrollbars to not be unreasonably small. All of the instances using StaticResource say "The resource "x" cannot be resolved." I've attempted to change it to DynamicResource which removes the errors and properly runs but instead I get something that barely looks like a scrollbar. I've tried another suggestion here and I got a similar result of something that barely looks like a scrollbar. I should also note that I'm relying on the scrollbar that comes implemented in the textbox class so I don't have the luxury of extending the scrollbar like others have suggested.

How would I go about using styles to fix the minimum thumb size of my textbox scrollbar without completely destroying the style of the control?

The following code was gotten from this Microsoft page.

<Style TargetType="ScrollBar">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ScrollBar">
          <Grid Name="Bg"
                Background="{TemplateBinding Background}"
                SnapsToDevicePixels="true">
            <Grid.RowDefinitions>
              <RowDefinition MaxHeight="{DynamicResource 
              {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
              <RowDefinition Height="0.00001*"/>
              <RowDefinition MaxHeight="{DynamicResource 
              {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
            </Grid.RowDefinitions>
            <RepeatButton Style="{StaticResource ScrollBarButton}"
                          IsEnabled="{TemplateBinding IsMouseOver}"
                          Height="18"
                          Command="ScrollBar.LineUpCommand"
                          Content="M 0 4 L 8 4 L 4 0 Z" />
            <Track Name="PART_Track" 
                 IsDirectionReversed="true"
                 Grid.Row="1"
                 Grid.ZIndex="-1">
              <Track.Resources>
                <!-- Set the Thumb's minimum height to 50.
              The Thumb's minimum height is half the
              value of VerticalScrollBarButtonHeightKey. -->
                <sys:Double 
                  x:Key="{x:Static SystemParameters.VerticalScrollBarButtonHeightKey}">
                  100
                </sys:Double>
              </Track.Resources>
              <Track.DecreaseRepeatButton>
                <RepeatButton Style="{StaticResource VerticalScrollBarPageButton}"
                              Command="ScrollBar.PageUpCommand"/>
              </Track.DecreaseRepeatButton>
              <Track.IncreaseRepeatButton>
                <RepeatButton Style="{StaticResource VerticalScrollBarPageButton}"
                              Command="ScrollBar.PageDownCommand"/>
              </Track.IncreaseRepeatButton>
              <Track.Thumb>
                <Thumb/>
              </Track.Thumb>
            </Track>
            <RepeatButton 
              Grid.Row="2" 
              Style="{StaticResource ScrollBarButton}"
              Height="18"
              Command="ScrollBar.LineDownCommand"
              Content="M 0 0 L 4 4 L 8 0 Z"/>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger SourceName="PART_Track" 
                     Property="IsEnabled" Value="false">
              <Setter TargetName="PART_Track" 
                      Property="Visibility" Value="Hidden"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

The following is a basic example of the window.

<Window x:Class="TriggersNotepad.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TriggersNotepad"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
        Title="Trigger's Notepad" Height="350" Width="525" ResizeMode="CanResizeWithGrip">
    <Window.Resources>
        Code above...
    </Window.Resources>
    <TextBox AcceptsReturn="True" UseLayoutRounding="False" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" BorderThickness="0"/>
</Window>

1 Answer 1

1

There are two ways: the hard one, and the easy one.

Let's start with the hard one, which, in its turn, is more flexible. In order to tweak the default style of a control, you should copy the whole style, including all the resources it refers to. You don't need to dig in MSDN for a style, just use Visual Studio:

  1. In XAML Design window, select a control you want to tweak. In your case, you should create a <ScrollBar/> and select it in the designer.
  2. In the main menu, click Format – Edit Style – Edit a Copy... – Apply To All – OK.
  3. Modify the style as needed.

And now the easy one:

  1. Create a new style that is BasedOn a default style.
  2. Override the resources that are used by the default style by putting them in the <Style.Resources>.

Here is the example:

<Style TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource {x:Type ScrollBar}}">
    <Style.Resources>
        <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarButtonHeightKey}">42</sys:Double>
        <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">42</sys:Double>
        <sys:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarHeightKey}">42</sys:Double>
        <sys:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}">42</sys:Double>
    </Style.Resources>
</Style>

And here is a screenshot of what you get:

enter image description here

Hope this helps!

3
  • There is one issue with this. At least on Windows 7, the up and down/left and right scroll button sizes are also increased when you change the thumb size. The thumb is now a reasonable size but the other buttons just make it look worse sadly due to being stretched. (Note I removed the Width property from Vertical and Height property from Horizontal) Feb 5, 2017 at 0:55
  • Unfortunately, Windows 7 theme (Aero.NormalColor.xaml) uses Microsoft.Windows.Themes.ScrollChrome to render the thumb arrows, which doesn't respect custom thumb sizes. You could make a copy of the style, and apply ScaleTransform to the ScrollChrome inside the RepeatButton.
    – Yarik
    Feb 5, 2017 at 1:30
  • Thanks. :) In the end I did go with the original answer. I stretched it just enough to get the normal minimum thumb size. It's not too much of an eyesore with the stretched arrow buttons. Feb 6, 2017 at 22:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.