c# - Windows Phone 8.1 从远程 URL 占位符加载图像

Question

我正在搞一些 Windows 手机开发，因为我是 Android 背景的新手。

我正在使用“theCatAPI”加载一张猫的随机图片并显示它，然后当点击图片或屏幕底部的按钮时，图片会刷新为一张新图片。

到目前为止，我有以下内容:

XAML:

<Page
    x:Class="CatFactsPics.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CatFactsPics"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid x:Name="LayoutRoot">

        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- TitlePanel -->
        <StackPanel Grid.Row="0" Margin="24,17,0,28">
            <TextBlock Text="My Application" Style="{ThemeResource TitleTextBlockStyle}" Typography.Capitals="SmallCaps"/>
            <TextBlock Text="page title" Margin="0,12,0,0" Style="{ThemeResource HeaderTextBlockStyle}"/>
        </StackPanel>

        <!--TODO: Content should be placed within the following grid-->
        <Grid Grid.Row="1" x:Name="ContentRoot">
            <Image HorizontalAlignment="Center" Stretch="UniformToFill" VerticalAlignment="Center" x:Name="KittyPic" Tapped="KittyPic_Tapped"/>
            <Button HorizontalAlignment="Center" VerticalAlignment="Bottom" x:Name="newPic" Click="newPic_Click" >New Kitty</Button>
        </Grid>
    </Grid>
</Page>

在 page.cs 中:

...
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            this.navigationHelper.OnNavigatedTo(e);

            Uri myUri = new Uri("http://thecatapi.com/api/images/get?format=src&type=jpg", UriKind.Absolute);
            KittyPic.Source = new BitmapImage(myUri);
        }
...
        private void newPic_Click(object sender, RoutedEventArgs e)
        {
            Uri myUri = new Uri("http://thecatapi.com/api/images/get?format=src&type=jpg", UriKind.Absolute);
            BitmapImage bmi = new BitmapImage();
            bmi.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
            bmi.UriSource = myUri;
            KittyPic.Source = bmi;
        }

我有几个问题:

1) 这是正确的做事方式吗？在 Android 中，我会尝试异步执行操作以避免拖延 UI 线程。话虽这么说，我似乎对现在的事情没有任何问题。我不熟悉 Windows 的处理方式，也没有找到任何资源来提供任何解释或建议。

2) 显示新图片时会出现延迟，导致在新图像重新出现之前 ImageView 变黑的一小段时间(几秒)。有没有一种方法可以设置它，以便在新图片实际准备好显示之前保留旧图片，或者显示占位符“正在加载”图片，直到新图片可以替换它。

任何其他关于如何做事的建议或技巧都很好，谢谢。

Answer 1

1) 使用您当前的代码，您不会阻塞 UI 线程，因为您是在 UI 线程上设置 URI，但图像的实际加载是在另一个线程上自动完成的。 (对于手动下载图像、字符串等，您可能会使用 async/await 来避免锁定 UI 线程)。

2) 图像变黑，因为您在加载新图像之前更改了 ImageSource。正如您提到的，有几种方法可以解决这个问题。不过，对于它们中的大多数来说，常见的是您需要在图像控件上使用 ImageOpened 和 ImageFailed 事件，只要图像加载完成(或发生错误)就会触发，例如没有互联网连接)。这是一个在加载时显示加载栏的示例，它只是隐藏/显示加载进度:

在 page.xaml 文件中:

<Grid Grid.Row="1" x:Name="ContentRoot">
    <Image x:Name="KittyPic" Tapped="KittyPic_Tapped" ImageOpened="KittyPic_ImageOpened" ImageFailed="KittyPic_ImageFailed" />
    <StackPanel x:Name="LoadingPanel" VerticalAlignment="Center">
        <ProgressBar IsIndeterminate="True" IsEnabled="True" />
        <TextBlock Text="Loading image..." HorizontalAlignment="Center" />
    </StackPanel>
</Grid>

并且在page.xaml.cs文件中

private void KittyPic_Tapped(object sender, TappedRoutedEventArgs e)
{
    LoadingPanel.Visibility = Visibility.Visible;
    Uri myUri = new Uri("http://thecatapi.com/api/images/get?format=src&type=jpg", UriKind.Absolute);
    BitmapImage bmi = new BitmapImage();
    bmi.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
    bmi.UriSource = myUri;
    KittyPic.Source = bmi;
}

private void KittyPic_ImageOpened(object sender, RoutedEventArgs e)
{
    LoadingPanel.Visibility = Visibility.Collapsed;
}

private async void KittyPic_ImageFailed(object sender, ExceptionRoutedEventArgs e)
{
    LoadingPanel.Visibility = Visibility.Collapsed;
    await new MessageDialog("Failed to load the image").ShowAsync();
}

除了 TextBlock 和 ProgressBar，您当然可以显示任何您想要的内容，或者例如在两个图像之间交换以继续显示旧图像。

对于其他建议，我认为当您习惯了基础知识时，可以看看 data bindings这是非常有帮助和强大的。另请查看这篇关于 MVVM pattern 的文章.