How to add scrolling buttons to a data bound, horiztonal list

Question

So I have a List, which contains items. Right now they are thumbnails of pictures. I wanted this list to be bound to a changing list in code behind, so I used a Listbox. However, I needed this box to flow horizontally. So it is styled as a StackPanel. Lastly, I want buttons to control the scrolling, not scrollbars. That's the part that does not work Here's a code sample :

<UserControl x:Class="TestBench.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<UserControl.Resources>

    <Style x:Key="StackHorz" TargetType="ListBox">
        <Style.Setters>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Background="AliceBlue" />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBox">
                        <ScrollViewer BorderBrush="DarkGreen" BorderThickness="2" VerticalScrollBarVisibility="Disabled"  HorizontalScrollBarVisibility="Disabled">
                            <ItemsPresenter />
                        </ScrollViewer>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">
    <Button x:Name="_Next" Content="NEXT" Height="20" Width="40" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
    <Button x:Name="_Prev" Content="PREV" Height="20" Width="40" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
    <ListBox x:Name="TestList" Height="100" Width="800" VerticalAlignment="Top">
        ...Insert ListItems...
    </ListBox>
</Grid>

In this example the listbox is not bound, but I do need to be able to set ItemsSource={Binding Content}. Code behind I tried was :

namespace TestBench

{ public partial class MainPage : UserControl { public MainPage() { InitializeComponent();

        TestList.Style = this.Resources["StackHorzTop"] as Style;
        _Next.Click += new RoutedEventHandler(_Next_Click);
        _Prev.Click += new RoutedEventHandler(_Prev_Click);
    }

    void _Prev_Click(object sender, RoutedEventArgs e)
    {
        TestList.ScrollIntoView(TestList.Items[0]);
    }

    void _Next_Click(object sender, RoutedEventArgs e)
    {
        TestList.ScrollIntoView(TestList.Items[TestList.Items.Count - 1]);
    }
}

}

But the ScrollIntoView does nothing. I also tried getting the ScrollViewer as a VisualTreeHelper.GetChild() of the list box, but scrolling there using ScrollToHorizontalOffset() does nothing either.

I know it's a weird way to set things up, but I need all 3 functionalities (Binding, Horizontal orientation, No scroll bars with button scrolling). Anyone know where I am going wrong on this one?

Thanks in advance,

Chart.

Answer 1

Maybe you can try putting your listbox in a ScrollViewer and style the ScrollViewer so that the scroll bars are not visible (only the buttons).

More info on the ScrollViewer's templatable parts can be found here.