2016-04-15 29 views
1

現在、UWPとXamlを学習しており、興味をそそられていることに気づきました。UWP画像がすぐにページに表示されない

50kbの背景画像を持つページに、それぞれ500バイトの7つの他の画像を含むグリッドが含まれていると、ページが読み込まれますが、最初は画像が表示されずに数秒間表示されます後(1-1.5秒のように)。

すべての画像がロードされるまで、フレームナビゲーションまたはnavigatedToにページを開くように指示することはできますか? スタートアップ時にイメージをプリロードする必要がありますか?

- 更新 -

私は、進行状況ダイアログやこのような画像が画面の不可欠な一部となり、まさにそのための負荷を示すこととしてもビット奇妙なユーザーエクスペリエンスであるだろうとを避けたいですあなたは最初に白い背景を見て、次にその画像に背景が突然現れるのを見ます。

グリッドから7枚の画像を残しておくと、背景画像はほとんど瞬間的に(数ミリ秒で)表示されますが、フリッカー効果を残してすべての画像がロードされたときに表示されます。 さらに、最初に読み込まれたときにのみ、ページから離れた場所に移動した後に、画像を後で表示することができます。

例:


    <Page 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
     <Page.Background> 
      <ImageBrush ImageSource="/Assets/Background/Scherm1.jpg"/> 
     </Page.Background> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Image Grid.Column="0" Opacity="0" Source="ms-appx:///Assets/Image1.png"/> 
      <Image Grid.Column="1" Opacity="0" Source="ms-appx:///Assets/Image2.png"/> 
      <Image Grid.Column="2" Opacity="0" Source="ms-appx:///Assets/Image3.png"/> 
      <Image Grid.Column="3" Opacity="0" Source="ms-appx:///Assets/Image4.png"/> 
      <Image Grid.Column="4" Opacity="0" Source="ms-appx:///Assets/Image5.png"/> 
      <Image Grid.Column="5" Opacity="0" Source="ms-appx:///Assets/Image6.png"/> 
      <Image Grid.Column="6" Opacity="0" Source="ms-appx:///Assets/Image7.png"/> 
     </Grid> 
    </Page> 

+0

すべてのイメージがロードされるまで、ナビゲーション待ちを作るあなたのコード最初 – AymenDaoudi

+0

を表示してくださいすることができ、非常に悪いユーザー体験になります。それをしないでください。 – Clemens

+0

しかし、バックグラウンドイメージといくつかの小さなイメージを表示するための読み込みの進行状況を示すことは、特に画面に不可欠なイメージを作りたいと思っているように、ユーザーエクスペリエンスのために少し残忍です。 – WaggaWagga

答えて

0

あなたは、あなたのイメージがロードされる不定のProgressBarを設定することができます。

<BitmapImage ImageOpened="Banner_ImageOpened"/> 
<ProgressBar x:Name="BannerProgressBar" IsIndeterminate="True"/> 

そして背後にあるコードで:このような何か

private void Banner_ImageOpened(object sender, RoutedEventArgs e) 
     { 
      BannerProgressBar.Visibility = Visibility.Collapsed; 
     } 
関連する問題