Creating a scrollable WPF usercontrol

Question

For an application that I am working on I want to create a custom control that has several buttons on it, If there are too many buttons I need it to scroll. However, I don't want to use the standard scrollbar instead I just want to have two buttons at either end of the control one to scroll up and the other down. What is the best way to achieve this?

Is it possible to change the style of the scrollbar so that they are just buttons and not the full horizontal GUI?

Solution 1

You would normally use a ScrollViewer to achieve this. For example:

<UserControl x:Class="WpfApplication2.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="200" d:DesignWidth="300">
    <ScrollViewer>
        <StackPanel>
            <Button Content="Test"/>
            <Button Content="Test"/>
            <Button Content="Test"/>
            <Button Content="Test"/>
            <Button Content="Test"/>
            <Button Content="Test"/>
            <Button Content="Test"/>
            <Button Content="Test"/>
            <Button Content="Test"/>
            <Button Content="Test"/>
            <Button Content="Test"/>
            <Button Content="Test"/>
        </StackPanel>
    </ScrollViewer>
</UserControl>

Will display a vertical scrollbar automatically when required.

You can change the behaviour by specifying VerticalScrollbarVisibility like this

<ScrollViewer VerticalScrollBarVisibility="Auto">
<ScrollViewer VerticalScrollBarVisibility="Visible">
<ScrollViewer VerticalScrollBarVisibility="Hidden">
<ScrollViewer VerticalScrollBarVisibility="Disabled">

There is of course a HorizontalScrollBarVisibility property as well.

Solution 2

The way to solve a problem like this is to examine the properties and methods of the control.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <Button Grid.Row="0" Width="40" HorizontalAlignment="Left" Content="Up" Click="clickSVup"/>
    <ScrollViewer x:Name="svBtn" Grid.Row="1" Width="100" HorizontalAlignment="Left" 
                  VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden">
        <StackPanel>
            <TextBlock Text="Text 01"/>
            <TextBlock Text="Text 02"/>
            <TextBlock Text="Text 03"/>
            <TextBlock Text="Text 04"/>
            <TextBlock Text="Text 05"/>
            <TextBlock Text="Text 06"/>
            <TextBlock Text="Text 07"/>
            <TextBlock Text="Text 08"/>
            <TextBlock Text="Text 09"/>
            <TextBlock Text="Text 10"/>
            <TextBlock Text="Text 11"/>
            <TextBlock Text="Text 12"/>
            <TextBlock Text="Text 13"/>
            <TextBlock Text="Text 14"/>
            <TextBlock Text="Text 15"/>
            <TextBlock Text="Text 16"/>
            <TextBlock Text="Text 17"/>
            <TextBlock Text="Text 18"/>
            <TextBlock Text="Text 19"/>
        </StackPanel>
    </ScrollViewer>
    <Button Grid.Row="2" Width="40" HorizontalAlignment="Left" Content="Down" Click="clickSVdn"/>
</Grid>



    private void clickSVdn(object sender, RoutedEventArgs e)
    {
        svBtn.PageDown();
    }

    private void clickSVup(object sender, RoutedEventArgs e)
    {
        svBtn.PageUp();
    }