How to set multiple canvas in scroll viewer in wpf? - wpf

Question

I want to set an image in a canvas control and have 20 canvases that I am creating by using a loop. The problem is that when I want to add all those canvas items in to a scroll viewer it does not work. Here is my code:
private void CreateAndShowCanvas()
{
List<Canvas> list = new List<Canvas>();
for (int i = 0; i < 20; i++)
{
Canvas myCanvas1 = new Canvas();
myCanvas1.Background = new SolidColorBrush(Colors.Transparent);
myCanvas1.Height = 235;
myCanvas1.Width = 626;
//Canvas.SetZIndex(myCanvas1, 4);
Image MainImage = new Image();
MainImage.Width = 275;
MainImage.Height = 235;
BitmapImage mi = new BitmapImage(new Uri("select_1.png", UriKind.Relative));
MainImage.Source = mi;
Canvas.SetTop(MainImage, 0);
Canvas.SetLeft(MainImage, 0);
myCanvas1.Children.Add(MainImage);
Image SeparatorImage = new Image();
BitmapImage si = new BitmapImage(new Uri("Sentre Seprator.png", UriKind.Relative));
SeparatorImage.Height = 270;
SeparatorImage.Source = si;
Canvas.SetTop(SeparatorImage, -5);
Canvas.SetLeft(SeparatorImage, 310);
myCanvas1.Children.Add(SeparatorImage);
Image SecondImage = new Image();
SecondImage.Width = 275;
SecondImage.Height = 235;
BitmapImage sci = new BitmapImage(new Uri("select_2.png", UriKind.Relative));
SecondImage.Source = sci;
Canvas.SetTop(SecondImage, 0);
Canvas.SetLeft(SecondImage, 350);
myCanvas1.Children.Add(SecondImage);
list.Add(myCanvas1);
}
scv.Content = list;
}
and in XML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ScrollViewer Name="scv" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Margin="60,40,59,46" Opacity="99" Background="Transparent" />
</Grid>
</Window>
and when I run it, it only shows ("Collection"). Please help me out, thanks in advance...

Answer 1

Should you not just be using a ListBox with an ItemTemplate that has Canvases inside it instead? There must be an easier way to do whatever you are trying to achieve than creating 20 canvases manually.
Here's some reading to do with ListBoxes.

Answer 2

A ScrollViewer can hold just a single child, so you need another panel type like a Grid or StackPanel which holds your canvases.
<Grid>
<ScrollViewer Name="scv" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Margin="60,40,59,46" Opacity="99" Background="Transparent">
<StackPanel Name="stp" />
</ScrollViewer>
</Grid>
Add canvases to stp instead.