Question

我目前正在学习UWP和Xaml，并注意到这引起了我的兴趣。

当我制作一个50kb背景图像的页面，其中包含一个网格，其中包含每个分别为500字节的7个其他图像，页面确实已加载但在开始时图像尚未显示，并将在几秒后显示（比如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>

Answer 1

您可以设置一个不确定的ProgressBar来加载您的图像。像这样：

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

在您的代码中：

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

UWP图像不会立即显示在页面

1 个答案: