加载图像时 UI 卡住

Question

我正在构建一个简单的图像桌面应用程序，并且进展顺利。

应用程序从文件夹中获取我的图像，并在 ItemsControl 中显示它们。页面布局是字符串 Key - (MM)YYYY，Items 是 StorageItem 类。

                    <ItemsControl x:Name="test_control">

                        <ItemsControl.ItemTemplate>
                            <DataTemplate>

                                <StackPanel Margin="10">
                                    
                                    <!-- Display the Key (Year and Month) -->
                                    <TextBlock Text="{Binding Key}" FontSize="20" FontWeight="Bold" Margin="0,0,0,10" />


                                    <GridView 
                                        ItemsSource="{Binding Items}"
                                        SelectionMode="None"
                                        IsItemClickEnabled="True"
                                        RightTapped="GridView_RightTapped"
                                        DoubleTapped="GridView_DoubleTapped">

                                        <GridView.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <ItemsWrapGrid MaximumRowsOrColumns="20" Orientation="Horizontal" />
                                            </ItemsPanelTemplate>
                                        </GridView.ItemsPanel>

                                        <GridView.ItemTemplate>
                                            <DataTemplate>
                                                <Grid Width="100" Height="100" ToolTipService.ToolTip="{Binding FullPath}">
                                                    <StackPanel Orientation="Vertical">
                                                        <Image Height="90" Width="90" Source="{Binding Icon}" Stretch="UniformToFill"/>
                                                    </StackPanel>
                                                    <ProgressRing 
                                                        VerticalAlignment="Bottom"
                                                        HorizontalAlignment="Right"
                                                        Visibility="{Binding ProgressBarVisiable}"
                                                        Value="{Binding Value}"
                                                        IsIndeterminate="False"
                                                        Height="25"
                                                        Width="25"/>
                                                    <FontIcon HorizontalAlignment="Left"
                                                        VerticalAlignment="Bottom"
                                                        Glyph="{Binding StatusFont}"/>
                                                </Grid>
                                            </DataTemplate>
                                        </GridView.ItemTemplate>

                                    </GridView>
                                </StackPanel>

                            </DataTemplate>
                        </ItemsControl.ItemTemplate>

                    </ItemsControl>

Icon

属性是BitmapImage。

这个工作很完美，但是当我有很多项目时，页面会卡住并等待加载所有图像。

MediaPage.cs

test.ItemsSource = App.AllImages;

MainPage.cs

App.AllImages = new ObservableCollection<MediaDynamicView>();
PublicMethods.GetAllImages(AllImages);

MediaDynamicView.cs

public class MediaDynamicView : DynamicView<ImageItem>
{
    public DateTime YearMonth { get; set; }

//...
}

DynamicView<T>

public class DynamicView<T>
{
    private string _key;
    private ObservableCollection<T> _items;

    public string Key 
    { 
        get { return _key; }
        set { _key = value; OnPropertyChanged(); }
    }
    public ObservableCollection<T> Items
    {
        get { return _items; }
        set{ _items = value; OnPropertyChanged(); }
    }

    //...
}

ImageItem.cs

// more properties...

        public virtual BitmapImage Icon
        {
            get { return _icon; }
            set { _icon = value; OnPropertyChanged(); }
        }

我知道

Icon

属性在

MediaPage.cs

之前加载，在

GridView

中显示此内容

我应该怎么做才能使其异步？

Answer 1

我不熟悉 winUI-3，但在 wpf 上你可以做这样的事情：

public class MyImage : INotifyPropertyChanged
{
    // OnPropertyChanged omitted for brevity
    public string FilePath { get; }
    public BitmapImage Bitmap { get; set; }
}
public async Task LoadImagesAsync(IReadOnlyList<MyImage> images)
{
    foreach (var image in images)
    {
        image.Bitmap = await Task.Run(() => LoadImage(image.FilePath ));
    }
}

private static BitmapImage LoadImage(string filePath)
{
    BitmapImage myBitmapImage = new BitmapImage();
    myBitmapImage.BeginInit();
    myBitmapImage.UriSource = new Uri(filePath);
    myBitmapImage.CacheOption = BitmapCacheOption.OnLoad;
    myBitmapImage.EndInit();
    return myBitmapImage;
}

LoadImagesAsync

将在 UI 线程上调用，并应在后台加载每个图像，同时在每次加载之间更新 UI 线程中的 UI。