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)在新图像重新出现之前,显示新图像的延迟导致图像视图变黑的短(几秒)周期.有没有一种方法来设置它,以便旧图片保持到新的图片保持物理准备好显示,或者显示占位符"加载"图像,直到新的图像可以替换它.

关于如何做事的任何其他建议或提示都会很棒,谢谢.

Answer 1

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

2)图像变黑,因为您ImageSource在加载新图像之前更改了图像.你提到了几种解决这个问题的方法.但大多数情况下常见的是你会想要使用Image控件上的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你当然可以显示你想要的任何东西,或者例如在两个图像之间交换以继续显示旧图像.

对于其他建议,我认为当你习惯了基础知识时,要看一下非常有用且功能强大的数据绑定.另外看看这篇关于MVVM模式的文章.