動態更改uwp中的圖像源時如何避免閃爍效果

Question

我已經設置了圖像，並且正在按鈕單擊事件中替換圖像源。 更換圖像源時出現閃爍效果。 如何解決呢？

樣品

     <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));

        }

Answer 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;
    }