Image selection canvas - wpf

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="<<" />
<Button x:Name="_next" Content=">>" 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;
}
}

Answer 2

This might help you:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Name="LeftB" Grid.Column="0" />
<Button Name="RightB" Grid.Column="2" />
<StackPanel Orientation="Horizontal" Name="Images" Grid.Column="1" />
</Grid>
The images can be the Children of the StackPanel.
Of course you should set the size of the the images as a function of their number and StackPanel's Width. The best way might be to handle Width change event of the StackPanel.