Как создать многостолбцовый Surfacelistbox с изображениями в качестве элементов, используя WPF в C #?

Question

Я хочу создать список из нескольких столбцов с изображениями в качестве элементов. Однако я ударился о каменную стену ... Проблема, с которой я столкнулся, заключается в показе изображений ... Я пытаюсь создать список со списком поверхностей, как показано ниже;

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

Ниже приведена первая версия моего xaml; (и это работает)

<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>

Был оригинальный список поверхностей. Чем я редактировал;

        <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>

Однако на этот раз я теряю свои изображения в окне списка поверхностей. Моя функция добавления в список выглядит следующим образом:

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()); }
            }

Я просто не могу понять, что я делаю неправильно. Любая помощь будет приветствоваться.

О да, класс MyImage такой же, как ниже;

    public 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; }
        }
    }

Answer 1

Я предполагаю, что это потому, что ваш WrapPanel устанавливает ItemWidth на 150, а ваш фактический Image размер равен 250. Поскольку изображение не помещается в отображаемую область, оно не отображается.

Попробуйте снять ограничение ItemHeight / ItemWidth на вашем WrapPanel и посмотрите, работает ли оно.

Кроме того, вам не хватает тега ItemsTemplate во второй отредактированной версии

<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>