2016-04-15 103 views
1

我目前正在學習UWP和Xaml,並且注意到這引起了我的興趣。UWP圖像不立即顯示在頁

當我用50kb的背景圖像製作一個頁面時,其中包含一個網格,每個網格包含7個其他圖像,每個圖像分別有500bytes,但網頁確實已加載,但開始時圖像尚未顯示,並會顯示幾秒鐘之後(如1-1.5秒)。

是否有可能以某種方式告訴框架導航或導航等待打開頁面,直到所有圖像都已加載? 或者您是否需要在啓動時以某種方式預加載圖像?

- 更新 -

我想避免一個進度對話框或諸如圖像將成爲屏幕和顯示只是一個裝載的重要組成部分也有點怪異的用戶體驗你首先看到一個白色的背景,然後突然看到背景與圖像一起出現。

當我離開網格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

您可以設置一個不確定的進度您的影像將被載入。事情是這樣的:

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

而且在後面的代碼:

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