How to style a TextBox ScrollBar with my own images?

Question

I was wondering if it is possible to insert my own bitmaps for scrollbar styling. I would like to to use an image for up/down arrows, background and scroller. This is what I have to start with, but I just don't know how to access these mentioned properties:

  <TextBox Name="SlideNotes" Foreground="White" FontSize="20" FontWeight="Bold" Background="Transparent" BorderThickness="0" TextWrapping="Wrap" AcceptsReturn="True" ScrollViewer.VerticalScrollBarVisibility="Visible"  Grid.Row="27" Grid.Column="11" Grid.ColumnSpan="46" Grid.RowSpan="5">
                <TextBox.Resources>
                    <Style TargetType="{x:Type ScrollBar}">
                        <Setter Property="Background" Value="Red"/>

                    </Style>
                </TextBox.Resources>

I would appreciate any help.

Answer 1

Looks like you're after a ControlTemplate . See here for a nice tutorial on how to style one.

To avoid having to style the entire ScrollViewer , you can instead style only the RepeatButton element, this will make things much easier to work with.

<Style TargetType="RepeatButton">
    <Setter Property="Background" Value="Red"/>
    <Setter Property="Template">
        <Setter.Value>
            ...
        </Setter.Value>
    </Setter>
</Style>

You may need to define this style in the Window Resources, instead of the TextBox resources due to the scope.

See the documentation for RepeatButton styles and templates.

Answer 2

You can use ImageBrush to set an image to any property that uses Brushes ( Background , Foreground , BorderBrush , Fill , etc.).

In your case, you'd use it like this:

<TextBox Name="SlideNotes" Foreground="White" FontSize="20" FontWeight="Bold" Background="Transparent" BorderThickness="0" TextWrapping="Wrap" AcceptsReturn="True" ScrollViewer.VerticalScrollBarVisibility="Visible"  Grid.Row="27" Grid.Column="11" Grid.ColumnSpan="46" Grid.RowSpan="5">
    <TextBox.Resources>
        <Style TargetType="{x:Type ScrollBar}">
            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="yourimage.jpg" Stretch="Fill" />
                </Setter.Value>
            </Setter>
        </Style>
    </TextBox.Resources>
</TextBox>

ImageBrush (and all other Brushes that inherit from TileBrush ) has a set of properties that control how the image is shown. I've used Stretch="Fill" in my sample, which will make the image stretch to fill all the space available, but you could want it to behave differently.

For instance, this...

<ImageBrush ImageSource="yourimage.jpg" Stretch="None" TileMode="FlipXY" />

Will make your image repeat, with tiles alternatively flipped horizontally and/or vertically.

Toy around with Stretch and TileMode (or even ViewPort , ViewPortUnit , Viewbox and ViewboxUnit , if you feel brave enough) to get the effect you want.

EDIT - As with RepeatButton , the default ScrollBar template seems to pretty much ignore the Background property, most of the time, as well as other properties you could use for customization... This means you'll probably have to override the whole template to customize it to your liking.

Here's one ScrollBar template sample: ScrollBar Styles and Templates

And here's another for the RepeatButton : RepeatButton Styles and Templates