生成UI对象UWP

Question

我有可以制作拼贴画的应用程序。 用户选择一些图片并在Page上使用它。 现在，我已经在Xaml userControl中对6个图像进行了硬编码，并对VM中的Binding进行了6个属性的编码。 我可以优化吗？ 该用户可以选择不同数量的图片并使用它们吗？ 现在我使用List

IReadOnlyList<StorageFile> collageimages

存储选定的图片，但随后for填充UI图片

 for (var i = 0; i < collageimages.Count-1; i++)
        {
            var stream = await collageimages[i].OpenAsync(FileAccessMode.Read);
            var bitmapImage = new WriteableBitmap(100, 100);
            bitmapImage.SetSource(stream);
            switch (i)
            {
                case 0: /*property in ViewModel*/
                    CollageImg1 = bitmapImage;
                    break;
                case 1:
                    CollageImg2 = bitmapImage;
                    break;
                case 2:
                    CollageImg3 = bitmapImage;
                    break;
                case 3:
                    CollageImg4 = bitmapImage;
                    break;
                case 4:
                    CollageImg5 = bitmapImage;
                    break;
                case 5:
                    CollageImg6 = bitmapImage;
                    break;
            }
        }
    }

但它不是好的代码。 如何删除此switch并生成Images 。 我考虑过一些DataTemplate但是我的实现失败了，我需要将这些图片放在其他位置（至少略有不同）

UPD

你是这个意思吗

 for (var i = 0; i < collageimages.Count; i++)
        {
            var stream = await collageimages[i].OpenAsync(FileAccessMode.Read);
            var bitmapImage = new WriteableBitmap(100, 100);
            bitmapImage.SetSource(stream);
            List<WriteableBitmap> imagesList[i] = bitmapImage;
         }

我的财产看起来像

 public WriteableBitmap CollageImg1
    {
        get { return collageImg1; }
        set
        {
            this.collageImg1 = value;
            base.RaisePropertyChanged("CollageImg1");
        }
    }

我需要改变什么？

Answer 1

看看可观察的集合。

您可能应该使用GridView而不是ListView因为ListView主要用于保存文本。

将此代码添加到您的主页：

<Page.Resources>
    <CollectionViewSource x:Name="CollectionViewSource"></CollectionViewSource>
</Page.Resources>

然后像这样创建一个GridView：

    <GridView ItemsSource="{Binding Source={StaticResource CollectionViewSource}}">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}"></Image>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

在MainPage.xaml.cs以下内容：

        ObservableCollection<BitmapImage> images = new ObservableCollection<BitmapImage>();
        // TODO: FIll Collection with Images
        CollectionViewSource.Source = images;

因为ObservableCollection正在实现INotifyCollectionChanged所以当用户添加一些Image时， GridView应该更新。

Answer 2

我用了ItemControl和Datatemplate

 <ItemsControl ItemsSource="{Binding ImageManipulatorViewModel.ImageList, Source={StaticResource ViewModelLocator}}">
  <ItemsControl.ItemTemplate>
     <DataTemplate x:DataType="models:Collage">
        <Image/>
     </DataTemplate>
   </ItemsControl.ItemTemplate>
 </ItemsControl>