Question

Acutally i’m doing a WPF application where user can select Image from a panel. There are two Button inside the panel (right arrow and left arrow). I’m not sure what is the name of the panel but i attach an image in my question. So, i want to ask how do i create the panel? Using a canvas and put the image inside the canvas? hm… and the buttons, I totally don’t have any ideal how to do it.

p/s: i’m wpf newbie

Image:

Answer 1

Here is one way to do it, using the standard ListBox control:

First, we need a pair of Previous/Next buttons and a ListBox. We make the ListBox lay out its items horizontally by changing its ItemsPanel:

<DockPanel Width="200" >
    <Button x:Name="_prev" Content="&lt;&lt;" />
    <Button x:Name="_next" Content="&gt;&gt;" DockPanel.Dock="Right" />

    <ListBox x:Name="_myList" Loaded="OnMyListLoaded" >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <TextBlock Text="Image1  " />
        <TextBlock Text="Image2  " />
        <TextBlock Text="Image3  " />
        <TextBlock Text="Image4  " />
        <TextBlock Text="Image5  " />
        <TextBlock Text="Image6  " />
        <TextBlock Text="Image7  " />
    </ListBox>
</DockPanel>

In the ListBox’ Loaded event, we use VisualTreeHelper to search through its Template and find its built-in ScrollViewer. Once we find it, we hook it up to the two buttons we created:

private void OnMyListLoaded(object sender, RoutedEventArgs e)
{
    var scroller = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(_myList, 0), 0) as ScrollViewer;
    if (scroller != null)
    {
        _prev.Command = ScrollBar.LineLeftCommand;
        _prev.CommandTarget = scroller;

        _next.Command = ScrollBar.LineRightCommand;
        _next.CommandTarget = scroller;

        scroller.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden;
    }
}