How to Create a multi-column surfacelistbox with images as items using WPF in C#?

I wish to create a multi-column surface list box with images as elements. However I hit a stone wall... The problem I'm having is with the showing of images... I'm trying to create a surface list box as in below format ;

[x]    [x]    [x]   ^
[x]    [x]    [x]   |
[x]    [x]    [x]   | ----> yeah this is a side scroll and the [x] are pictures
[x]    [x]    [x]   |

Below is the first version of my xaml;(and it works)

<s:SurfaceListBox Name="surfaceListBox1" IsSynchronizedWithCurrentItem="True"     HorizontalContentAlignment="Center" AllowDrop="True" MaxWidth="Infinity"     VerticalContentAlignment="Center" PreviewTouchDown="surfaceListBox1_PreviewTouchDown"     MaxHeight="350" Margin="1,33,-1,0" > 
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding Image}" Width="250"     HorizontalAlignment="Center" />
                </DataTemplate>
            </ListBox.ItemTemplate>
 </s:SurfaceListBox>

Was the original surface list box. Than I edited to ;

        <s:SurfaceListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Vertical" IsItemsHost="True" ItemHeight="50" ItemWidth="150" />
            </ItemsPanelTemplate>
        </s:SurfaceListBox.ItemsPanel>
        <DataTemplate>
            <Image Source="{Binding Image}" Width="250" HorizontalAlignment="Center" />
        </DataTemplate>
    </s:SurfaceListBox>

However this time I loose my images within the surface listbox. My adding to listbox function is as following;

foreach (string filename in
                   System.IO.Directory.GetFiles("c:\\downloaded_images\\" + event_id))
                {
                    try
                    {
                    surfaceListBox1.Items.Add(
                    new MyImage(
                    new BitmapImage(
                    new Uri(filename)),
                    System.IO.Path.GetFileNameWithoutExtension(filename))); 
                }
                catch (Exception tl) { MessageBox.Show(tl.ToString()); }
            }

I just can't find what I'm doing wrong. Any help would be welcomed.

Oh yeah and the MyImage class is as below ;

    p开发者_运维百科ublic class MyImage
    {
        private ImageSource _image;
        private string _name;

        public MyImage(ImageSource image, string name)
        {
            _image = image;
            _name = name;
        }

        public override string ToString()
        {
            return _name;
        }

        public ImageSource Image
        {
            get { return _image; }
        }

        public string Name
        {
            get { return _name; }
        }
    }

I am guessing it is because your WrapPanel is setting the ItemWidth to 150, and your actual Image size is 250. Since the image doesn't fit in the displayed area, it isn't displayed.

Try removing the ItemHeight/ItemWidth restriction on your WrapPanel and see if it works.

Also, you're missing the ItemsTemplate tag in your 2nd edited version

<s:SurfaceListBox>
     <s:SurfaceListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Vertical" IsItemsHost="True" ItemHeight="50" ItemWidth="150" />
        </ItemsPanelTemplate>
    </s:SurfaceListBox.ItemsPanel>
    <s:SurfaceListBox.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image}" Width="250" HorizontalAlignment="Center" />
        </DataTemplate>
    </s:SurfaceListBox.ItemTemplate>
</s:SurfaceListBox>