如何通过异步方法使用xaml数据透视

时间:2019-06-23 07:09:17

标签: xaml data-binding uwp async-await pivot

我正在使用数据透视控件列出从异步方法获取的视频集合的内容。

我有2个枢轴项目,一个最喜欢,其中有用户将在另一个枢轴中选择的元素,这些元素列出了所有视频。

现在,我有一个有效的xaml文件。文件看起来像这样

        <Grid.RowDefinitions>
            <RowDefinition Height = "auto"/>
            <RowDefinition Height = "*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Video" FontSize="30" Margin="10,0,0,0"/>
        <Pivot Grid.Row = "1">

            <PivotItem Header="Favorite Videos">
                <ItemsControl ItemsSource="{x:Bind ViewModel.FavoriteVideos, Mode=OneWay}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate x:DataType="models:VideoModel">
                            <Grid Height="40">
                                <TextBlock VerticalAlignment="Center" Text="{x:Bind  Title}"/>
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </PivotItem>

            <PivotItem Header="All Videos" >
                <ItemsControl ItemsSource="{x:Bind ViewModel.AllVideos, Mode=OneWay}" >
                    <ItemsControl.ItemTemplate>
                        <DataTemplate x:DataType="models:VideoModel">
                            <StackPanel Orientation="Horizontal">
                                <Image Source="{x:Bind Cover}" HorizontalAlignment="Left" Width="100"/>
                                <TextBlock VerticalAlignment="Center" Text="{x:Bind Title}"/>
                                <ToggleSwitch Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" IsOn="{x:Bind IsFavorite, Mode=TwoWay}"/>
                            </StackPanel>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </PivotItem>


        </Pivot>
    </Grid>

ViewModel.AllVideos背后的代码是这样的:

namespace VideoManager.ViewModels
{
    public class VideoViewModel
    {
        public List<VideoModel> AllVideos = new List<VideoModel>();
        public ObservableCollection<VideoModel> FavoriteVideos = new ObservableCollection<VideoModel>();

        public VideoViewModel()
        {
            InitVideos();

        }

        private async void InitVideos()
        {
            var files = await KnownFolders.VideosLibrary.GetFilesAsync();
            foreach (var file in files)
            {
                if (file != null)
                {
                    var thumbnail = await file.GetThumbnailAsync(ThumbnailMode.VideosView, 50, ThumbnailOptions.ReturnOnlyIfCached);
                    VideoModel video = new VideoModel();
                    video.PropertyChanged += IsFavoritePropertyChanged;
                    video.Title = file.Name;
                    if (thumbnail != null)
                    {
                        BitmapImage bitmapImage = new BitmapImage();
                        InMemoryRandomAccessStream randomAccessStream = new InMemoryRandomAccessStream();
                        await RandomAccessStream.CopyAsync(thumbnail, randomAccessStream);
                        randomAccessStream.Seek(0);
                        await bitmapImage.SetSourceAsync(randomAccessStream);
                        video.Cover = bitmapImage;
                    }

                    AllVideos.Add(video);
                    if (video.IsFavorite)
                    {
                        FavoriteVideos.Add(video);
                    }
                }

            }
        }

        public void IsFavoritePropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            VideoModel toggledVideo = sender as VideoModel;
            if (toggledVideo.IsFavorite)
            {
                FavoriteVideos.Add(toggledVideo);
            }
            else
            {
                FavoriteVideos.Remove(toggledVideo);
            }
        }
    }

}

它工作正常,但是如果我更改PivotItem的顺序并将PivotItem所有视频放在PivotItem FavoriteVideos之前,那么屏幕上将不会出现任何内容。我想这与异步方法有关。

所以我的问题是无论PivotItem的顺序如何,如何使这项工作有效?

谢谢

1 个答案:

答案 0 :(得分:0)

使用ObservableCollection将解决此问题。 List Class尚未实现INotifyPropertyChanged Interface ,因此更新后不会通知UI。

public ObservableCollection<VideoModel> AllVideos = new ObservableCollection<VideoModel>();