Codelog

foreach(Snippet aSnippet in CodeLog){ aSnippet.GetSolution(); }

ScrollBar control template in wpf

with 3 comments

Won’t it be cool to have ones own scroll bar. Felling the same, I did a quick peek in to msdn and there was a sample scroll bar template. The example is really good, but it did not talk about the internals of a scroll bar. So i thought I will write about it.

The two arrows that you see at the ends are called RepeatButtons. The middle field (light grayish one) is called Track. The middle, movable portion in the track is called Thumb and the partitions to the left and the right of the thumb are two more repeat buttons.

I have named these controls with some number so that it can easily be related to the code.

        <!-- We are going to alter the vertical scroll bar's template -->
 
        <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
            <!-- First up is the background panel for all the above mentioned controls -->
            <Grid Background="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition MaxHeight="50"/>
                    <!-- Up arrow row -->
                    <RowDefinition Height="0.00001*"/>
                    <!-- Track row -->
                    <RowDefinition MaxHeight="50"/>
                    <!-- Down arrow row -->
                </Grid.RowDefinitions>
                <Border Grid.RowSpan="3" CornerRadius="2" Background="DarkGray" Opacity="1" />
                <!-- Border for the scroll bar -->
                <RepeatButton Grid.Row="0" Command="ScrollBar.LineUpCommand" Width="30" Height="30">Up</RepeatButton>
                <!-- Repeat button 1 (up arrow) -->
                <Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
                    <!-- Track -->
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Command="ScrollBar.PageUpCommand" Opacity="0" />
                        <!-- Repeat button 3 (left partition) -->
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Margin="1,0,1,0" Background="Transparent" Opacity="0.3" Width="20" />
                        <!-- Thumb -->
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Command="ScrollBar.PageDownCommand" Opacity="0" />
                        <!-- Repeat button 4 (right partition) -->
                    </Track.IncreaseRepeatButton>
                </Track>
                <RepeatButton Grid.Row="2" Command="ScrollBar.LineDownCommand" Width="30" Height="30">Down</RepeatButton>
                <!-- Repeat button 2 (down arrow) -->
            </Grid>
        </ControlTemplate>

I hope the above snippet is self explanatory, still a bit of explanation.

  1. We start off altering the ControlTemplate of the ScrollBar.
  2. We place a grid as the base panel for the scroll bar and we divide it in to three rows, one for up arrow, one for track and one for down arrow.
  3. Then we add two repeat buttons to the top and the bottom most rows (up and down arrows).
  4. Now comes the middle row for the track. As mentioned earlier, a track is again composed of two repeat buttons (actually the partitions are made of buttons; really don’t know why) so we create those buttons and assign them the scroll bar related commands.
  5. We also add a thumb in the middle. Make sure that you don’t set any Height for the thumb as this is a vertical scroll bar (no width for the horizontal scroll bar). Don’t bother about the opacity that I have given for these controls. We are free to modify them.

After the control template creation modification, we need to assign this to our scroll bar.

<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
 
    <Setter Property="SnapsToDevicePixels" Value="True"/>
     <Setter Property="OverridesDefaultStyle" Value="true"/>
     <Style.Triggers>
         <Trigger Property="Orientation" Value="Vertical">  <!-- Our scroll bar is a vertical one. Thats why -->
             <Setter Property="Width" Value="18"/>
            <Setter Property="Height" Value="Auto" />
            <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
        </Trigger>
    </Style.Triggers>
</Style>

Thats it. You have successfully altered a scroll bar.

Update — Don’t try changing the PART_Track. Changing the name will lead to an incomplete scroll bar as that name has been used by .NET WPF framework.

Written by sudarsanyes

March 12th, 2010 at 3:04 pm

Posted in Control Template, Controls, UI, WPF, xaml

Tagged with , , , ,

« DoUNo: XAML gets compiled in to a BAML
DoUNo: Whadds up with the Background property of a control »

3 Responses to 'ScrollBar control template in wpf'

Subscribe to comments with RSS or TrackBack to 'ScrollBar control template in wpf'.

  1. [...] ScrollBar control template in WPF Article walking through the steps of customizing a WPF scrollbar Possibly related posts: (automatically generated)[MVVM + Mediator + ACB = cool WPF App] – The MVVM [...]

    WPF Link Listing for 3-12-2010 « GlitterMonkey

    13 Mar 10 at 12:28 am

  2. Very good and concise example.
    Thanks mate.

    Cheers,
    MM

    MM

    21 Apr 10 at 8:29 pm

  3. I have just taken a look at your page here and I’m not sure if it’s just me but I noticed that the logo area at the upper area is showing as a blue box. Is it supposed to look like that? Good post also.

    Karry Kreischer

    19 Jun 10 at 5:36 am

Leave a Reply