Windows Phone 8.1 de charger des Images à partir d'une Url Distante de l'espace Réservé

Je suis déconner avec certains windows phone de développement que je suis nouveau à venir à partir d'un Android arrière-plan.

Je suis à l'aide de "theCatAPI" pour charger aléatoirement une image d'un chat et de le montrer, puis quand l'image est cliquée, ou sur le bouton au bas de l'écran, l'image s'actualise pour un nouveau.

J'ai le texte suivant:

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>

et dans la 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;
        }

J'ai quelques questions:

1) est-ce la bonne façon de faire les choses? Dans Android, je vais l'essayer et de faire les choses de manière asynchrone pour éviter de caler le thread d'INTERFACE utilisateur. Cela étant dit, je ne semble pas avoir de problèmes avec la façon dont ils le sont maintenant. Je ne suis pas familier avec le Windows façon de faire les choses, et n'ai pas trouvé toutes les ressources de donner la moindre explication ou des conseils pour le faire.

2) Il ya un retard dans l'affichage de la nouvelle image de causer un court (quelques secondes) de la période où l'affichage de l'image vire au noir, avant la nouvelle image réapparaît. Est-il un moyen de réglage de telle manière qu'il soit à l'image ancienne demeure jusqu'à ce que le nouveau est physiquement prêt à être affiché, ou bien afficher un espace réservé à "chargement" de l'image jusqu'à ce que la nouvelle peut la remplacer.

Tout autre avis ou des conseils sur la façon de faire les choses serait super, merci.

OriginalL'auteur o0rebelious0o | 2014-04-23

asynchronous c#image windows-phone windows-phone-8.1

5

1) Avec votre code vous de ne pas bloquer le thread d'INTERFACE utilisateur que oui, vous êtes le réglage de la URI sur le thread de l'INTERFACE utilisateur, mais le fait de chargement de l'image se fait sur un autre thread automatiquement. (Pour le faire manuellement en téléchargeant des images, des chaînes, etc, vous devrez probablement utiliser async/await pour éviter le blocage de la thread de l'INTERFACE utilisateur).

2) L'image devient noir parce que vous changez la ImageSource avant la nouvelle image a été chargée. Il y a comme vous l'avez mentionné plusieurs façons de le gérer. Commun pour la plupart d'entre eux, c'est que vous voulez utiliser la ImageOpened et ImageFailed événements sur le contrôle de l'Image, ce qui déclenche à chaque fois que l'image est fait, le chargement (ou une erreur s'est produite, par exemple, pas de connexion internet). Voici un exemple de l'affichage de la barre de chargement lors du chargement, qui vient de masque/affiche la progression du chargement:

Dans le page.xaml fichier:
```
<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>
```
Et dans la page.xaml.cs fichier
```
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();
}
```
Au lieu de la TextBlock et ProgressBar vous pouvez bien sûr montrer tout ce que vous voulez, ou, par exemple, la permutation entre les deux images pour continuer à montrer à l'ancien.

Pour d'autres conseils, je pense que lorsque vous vous êtes habitué à la base est de prendre un coup d'oeil à les liaisons de données qui est très utile et puissant. Jetez également un œil à cet article sur Le pattern MVVM.

Merci pour une grande réponse. Beaucoup plus détaillée que j'ai même été en espérant pour. Microsoft ont une très bonne documentation et des conseils, je suis juste vraiment très difficile à trouver. Pense qu'ils ont mise en page de il pourrait le faire avec une certaine amélioration
Je viens de passer quelques heures à essayer de suivre ce modèle MVVM tutoriel et une majorité de celui-ci n'est pas bon pour WP8.1 que les espaces de noms ont changé, par exemple les paramètres de l'application locale de travailler de façon totalement différente et changeant simplement de l'espace de noms Windows.Le stockage.Actuel.LocalSettings n'est pas suffisant. - Je vous faire une idée globale de bien

OriginalL'auteur Johan Falk
2

1) est-ce la bonne façon de faire les choses?

Pas. Il n'est pas. Vous devez absolument adopter le modèle MVVM et détacher la logique métier de votre point de vue - ce qui signifie que vous ne devriez pas créer des images bitmap ou de demande, ou de céder à distance URL de l'image dans votre affichage du code-behind. Vous devriez être en train de faire ces choses dans votre ViewModel et les lier à votre Vue.

Donc dans votre cas il y aura une Uri (ou une chaîne où vous pourrez vous assigner l'URL distante) de la propriété dans votre ViewModel (qui implémente INotifyPropertyChanged) alors à votre avis vous sera obligatoire comme ceci:
```

    <Grid Grid.Row="1" x:Name="ContentRoot">
         <BitmapImage UriSource="{Binding BackGroundImage}" CreateOptions="BackgroundCreation" />
        <Button HorizontalAlignment="Center" VerticalAlignment="Bottom" x:Name="newPic" Click="newPic_Click" >New Kitty</Button>
    </Grid>
```
Chaque fois que vous définissez la propriété BackGroundImage vous serez en déclenchant un événement appelé;
RaisePropertyChanged("BackGroundImage") -> C'est le classique MVVM approche.

De sorte que votre vue sera conscient du fait que la BackGroundImage est changé et il se charge automatiquement. (Mais notez que si vous venez de fournir une chaîne de caractères pour cette BackGroundImage - vous devez utiliser un convertisseur, un string Uri converter, car il n'accepte que les Uri pour les images à distance)

2) "...Est-il un moyen de réglage de telle manière qu'il soit à l'image ancienne demeure jusqu'à ce que le nouveau est physiquement prêt à être affiché, ou bien afficher un espace réservé à "chargement" de l'image jusqu'à ce que les nouvelles on peut le remplacer."

Je suggère d'aller avec l'affichage d'un "chargement" de l'image. J'ai connu exactement le même problème comme vous le faites ici, et ma solution de contournement pour ce a été l'insertion d'un chargement de l'image et le réglage de l'opacité de la valeur de 0,1 - le long de avec l'image réelle. Pendant que vous êtes de commutation entre l'URL distante, quand l'image précédente disparaît opaque du chargement de l'image s'affiche et quand la prochaine réelle de l'image est chargée, le chargement de l'image ne s'affiche pas parce que la nouvelle image est de l'écraser.

Merci pour les conseils. MVVM semble un gros problème dans clr applications, je vais travailler dans le tutoriel Johan suggéré ci-dessus, lorsque j'ai un moment
Je ne comprends pas pourquoi c'est censé être une grosse affaire comme le pattern MVVM parfaitement résout beaucoup de problèmes pour les applications Windows Phone.
Vous avez mal compris ce que je disais, je suis complètement d'accord, c'est pourquoi c'est une grosse affaire pour les applications windows phone, venant d'Android où MVVM n'est pas quelque chose que vous voyez poussé comme beaucoup. Après avoir regardé, je suis entièrement d'accepter sa valeur dans le développement de windows, c'est pourquoi j'ai l'intention de travailler dans le tutoriel sur le site MSDN. La plate-forme différente, différentes façons de faire les choses, et qui a du sens

OriginalL'auteur halil

Vous devez vous connecter pour publier un commentaire.