uwp动态更改图片源时如何避免闪烁效果答案

【问题标题】：How to avoid the flickering effect when dynamically changes the image source in uwpuwp动态更改图片源时如何避免闪烁效果
【发布时间】：2018-06-22 04:17:17
【问题描述】：

我有一组图像，我正在按钮单击事件中替换图像源。更换图像源时出现闪烁效果。如何解决？

Sample

     <StackPanel>

            <StackPanel Orientation="Horizontal">
                <Image x:Name="image1" Height="200" Width="200" Source="ms-appx:///Assets/custom200.png"/>
                <Image x:Name="image2" Height="200" Width="200" Source="ms-appx:///Assets/custom201.png"/>
                <Image x:Name="image3" Height="200" Width="200" Source="ms-appx:///Assets/custom202.png"/>
                <Image x:Name="image4" Height="200" Width="200" Source="ms-appx:///Assets/custom203.png"/>
            </StackPanel>



            <Button Height="50" Width="150" HorizontalAlignment="Center" VerticalAlignment="Center"
                Content="Replace OSM" x:Name="replaceOSM" Click="replace_Click" Margin="5"/>


        </StackPanel>



 private void replace_Click(object sender, RoutedEventArgs e)
        {
            image1.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM200.png", 
                UriKind.RelativeOrAbsolute));
            image2.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM201.png",
              UriKind.RelativeOrAbsolute));
            image3.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM202.png",
              UriKind.RelativeOrAbsolute));
            image4.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM203.png",
              UriKind.RelativeOrAbsolute));

        }

【问题讨论】：

请确保您的问题的所有信息都可以在此处直接访问，而无需下载 zip 文件。

标签： c# image uwp imagesource

【解决方案1】：

因为闪烁效果变化很快。并且它会处理 UI 线程中花费太长的代码。

您可以使用bitmapImage.SetSourceAsync 等待图片加载。

    private async Task SetSourceAsync(Image image, Uri uri)
    {
        await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, async () =>
        {
            var file = await StorageFile.GetFileFromApplicationUriAsync(uri);
            var bitmapImage = new BitmapImage();
            await bitmapImage.SetSourceAsync(await file.OpenAsync(FileAccessMode.Read));
            image.Source = bitmapImage;
        });
    }

您可以更改您的代码

        image1.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM200.png",
            UriKind.RelativeOrAbsolute));
        image2.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM201.png",
          UriKind.RelativeOrAbsolute));
        image3.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM202.png",
          UriKind.RelativeOrAbsolute));
        image4.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM203.png",
          UriKind.RelativeOrAbsolute));
        image5.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM210.png",
          UriKind.RelativeOrAbsolute));
        image6.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM211.png",
          UriKind.RelativeOrAbsolute));
        image7.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM212.png",
          UriKind.RelativeOrAbsolute));
        image8.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM213.png",
          UriKind.RelativeOrAbsolute));
        image9.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM220.png",
          UriKind.RelativeOrAbsolute));
        image10.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM221.png",
          UriKind.RelativeOrAbsolute));
        image11.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM222.png",
          UriKind.RelativeOrAbsolute));
        image12.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM223.png",
          UriKind.RelativeOrAbsolute));

到

    private async void Replace_Click(object sender, RoutedEventArgs e)
    {

       await  SetSourceAsync(image1, new Uri("ms-appx:///Assets/OSM200.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image2, new Uri("ms-appx:///Assets/OSM201.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image3, new Uri("ms-appx:///Assets/OSM202.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image4, new Uri("ms-appx:///Assets/OSM203.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image5, new Uri("ms-appx:///Assets/OSM210.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image6, new Uri("ms-appx:///Assets/OSM211.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image7, new Uri("ms-appx:///Assets/OSM212.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image8, new Uri("ms-appx:///Assets/OSM213.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image9, new Uri("ms-appx:///Assets/OSM220.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image10, new Uri("ms-appx:///Assets/OSM221.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image11, new Uri("ms-appx:///Assets/OSM222.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image12, new Uri("ms-appx:///Assets/OSM223.png",
            UriKind.RelativeOrAbsolute));
    }

但是当代码在一些较差的 GPU 上运行时，它总是闪烁。

我认为另一种方法是隐藏和显示图像或制作动画。

隐藏和显示的方法是制作一些面板来显示其中一个面板。

      <StackPanel x:Name="custom">
               <StackPanel Orientation="Horizontal">
                   <Image x:Name="image1" Height="200" Width="200" Source="ms-appx:///Assets/custom200.png"/>
                   <Image x:Name="image2" Height="200" Width="200" Source="ms-appx:///Assets/custom201.png"/>
                   <Image x:Name="image3" Height="200" Width="200" Source="ms-appx:///Assets/custom202.png"/>
                   <Image x:Name="image4" Height="200" Width="200" Source="ms-appx:///Assets/custom203.png"/>
               </StackPanel>
               <StackPanel Orientation="Horizontal">
                   <Image x:Name="image5" Height="200" Width="200" Source="ms-appx:///Assets/custom210.png"/>
                   <Image x:Name="image6" Height="200" Width="200" Source="ms-appx:///Assets/custom211.png"/>
                   <Image x:Name="image7" Height="200" Width="200" Source="ms-appx:///Assets/custom212.png"/>
                   <Image x:Name="image8" Height="200" Width="200" Source="ms-appx:///Assets/custom213.png"/>
               </StackPanel>
               <StackPanel Orientation="Horizontal">
                   <Image x:Name="image9"  Height="200" Width="200" Source="ms-appx:///Assets/custom220.png"/>
                   <Image x:Name="image10" Height="200" Width="200" Source="ms-appx:///Assets/custom221.png"/>
                   <Image x:Name="image11" Height="200" Width="200" Source="ms-appx:///Assets/custom222.png"/>
                   <Image x:Name="image12" Height="200" Width="200" Source="ms-appx:///Assets/custom223.png"/>
               </StackPanel>
        </StackPanel>

        <StackPanel x:Name="Osm" Visibility="Collapsed">
            <StackPanel Orientation="Horizontal">
                <Image Height="200" Width="200" Source="ms-appx:///Assets/OSM200.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM201.png"/>
                <Image Height="200" Width="200" Source="ms-appx:///Assets/OSM202.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM203.png"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM210.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM211.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM212.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM213.png"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Image   Height="200" Width="200" Source="ms-appx:///Assets/OSM220.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM221.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM222.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM223.png"/>
            </StackPanel>
        </StackPanel>

你可以写一些按钮然后点击

        <StackPanel Orientation="Horizontal">
            <Button Height="50" Width="150" HorizontalAlignment="Center" VerticalAlignment="Center"
                    Content="ReplaceCustom"  Click="ShowCustom_OnClick" Margin="5"/>

            <Button Height="50" Width="150" HorizontalAlignment="Center" VerticalAlignment="Center"
                    Content="Replace OSM"  Click="ShowReplace_OnClick" Margin="5"/>


        </StackPanel>

您可以在单击按钮时显示面板。

    private void ShowCustom_OnClick(object sender, RoutedEventArgs e)
    {
        custom.Visibility = Visibility.Visible;
        Osm.Visibility = Visibility.Collapsed;
    }

    private void ShowReplace_OnClick(object sender, RoutedEventArgs e)
    {
        custom.Visibility = Visibility.Collapsed;
        Osm.Visibility = Visibility.Visible;
    }

【讨论】：