c# - FlipView：コレクションをバインドする方法ItemsSourceとして

Question

Collection<string>に表示される画像のURLを含むをバインドするスマートな方法はありますFlipViewか？

または、画像を提供する必要がありCollection<Image>ますか？

Answer 1

それらを内の のSource属性にバインドする URL を使用できます。ImageItemTemplate

<FlipView.ItemTemplate>
   <DataTemplate>
       <Image Source="{Binding}" />
   </DataTemplate>
</FlipView.ItemTemplate>

flipView.ItemsSource = imageUrls;

FlipView で Bing の画像を表示する例。

Answer 2

この回答がかなり遅いことはわかっていますが、画像のコレクションにバインドすることもできます。これを実現する最善の方法は、コレクションではなくビットマップの観察可能なコレクションを使用することです。ビュー モデルで、監視可能なビットマップのコレクションを返すプロパティを作成します。

 // defines the binding property to the flipview
 private ObservableCollection<BitmapImage> _pictureGallery;
        public ObservableCollection<BitmapImage> PictureGallery
        {
            get { return _pictureGallery; }
            set
            {
                if (_pictureGallery != value)
                {
                    _pictureGallery = value;
                    onPropertyChanged("PictureGallery");
                }    

            }
        }


// This defines the property change event
public event PropertyChangedEventHandler PropertyChanged;
        private void onPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

xaml では、次のようにフリップビューを定義できます。

 <Border Background="White">
                <FlipView x:Name="flipView" ItemsSource="{Binding PictureGallery}" Visibility="Visible" >
                    <FlipView.ItemTemplate>
                    <DataTemplate>
                                <Image Width="200" Height="200" Source="{Binding}" Stretch="UniformToFill" />
                    </DataTemplate>
                    </FlipView.ItemTemplate>
                </FlipView>
                </Border>

注: ビットマップ イメージの作成方法に応じて、BitmapImage のソースを設定するファイル ストリームがあります。

BitmapImage BitImage = new BitmapImage();
BitImage.SetSource(stream);