title: Windows Phone 8.1 Loading Images from Remote URLs Placeholder
body: <p>I'm messing around with some windows phone development as I'm new to it coming from an Android background.</p>
  
  <p>I am using "theCatAPI" to load a random picture of a cat and show it, then when the picture is clicked, or the button at the bottom of the screen, the image refreshes to a new one.</p>
  
  <p>I have the following so far:</p>
  
  <p>XAML:</p>
  
  <pre><code>&lt;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}"&gt;
  
      &lt;Grid x:Name="LayoutRoot"&gt;
  
          &lt;Grid.ChildrenTransitions&gt;
              &lt;TransitionCollection&gt;
                  &lt;EntranceThemeTransition/&gt;
              &lt;/TransitionCollection&gt;
          &lt;/Grid.ChildrenTransitions&gt;
  
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="Auto"/&gt;
              &lt;RowDefinition Height="*"/&gt;
          &lt;/Grid.RowDefinitions&gt;
  
          &lt;!-- TitlePanel --&gt;
          &lt;StackPanel Grid.Row="0" Margin="24,17,0,28"&gt;
              &lt;TextBlock Text="My Application" Style="{ThemeResource TitleTextBlockStyle}" Typography.Capitals="SmallCaps"/&gt;
              &lt;TextBlock Text="page title" Margin="0,12,0,0" Style="{ThemeResource HeaderTextBlockStyle}"/&gt;
          &lt;/StackPanel&gt;
  
          &lt;!--TODO: Content should be placed within the following grid--&gt;
          &lt;Grid Grid.Row="1" x:Name="ContentRoot"&gt;
              &lt;Image HorizontalAlignment="Center" Stretch="UniformToFill" VerticalAlignment="Center" x:Name="KittyPic" Tapped="KittyPic_Tapped"/&gt;
              &lt;Button HorizontalAlignment="Center" VerticalAlignment="Bottom" x:Name="newPic" Click="newPic_Click" &gt;New Kitty&lt;/Button&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p>and in the page.cs:</p>
  
  <pre><code>...
          protected override void OnNavigatedTo(NavigationEventArgs e)
          {
              this.navigationHelper.OnNavigatedTo(e);
  
              Uri myUri = new Uri("http://thecatapi.com/api/images/get?format=src&amp;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&amp;type=jpg", UriKind.Absolute);
              BitmapImage bmi = new BitmapImage();
              bmi.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
              bmi.UriSource = myUri;
              KittyPic.Source = bmi;
          }
  </code></pre>
  
  <p>I have a couple of questions:</p>
  
  <p>1) is this the correct way of doing things?  In Android I'd try and do things asynchronously to avoid stalling the UI thread.  That being said, I don't appear to be having any issues with things the way they are now. I'm not familiar with the Windows way of doing things, and haven't found any resources giving any explanation or advice on doing so.</p>
  
  <p>2) There is a delay in displaying the new picture causing a short (couple of second) period where the image view turns black, before the new image reappears.  Is there a way of setting it up so either the old picture remains until the new one is physically ready to be displayed, or alternatively display a placeholder "loading" image until the new one can replace it.</p>
  
  <p>Any other advice or tips on how to do things would be great, thanks.</p>