动态更改uwp中的图像源时如何避免闪烁效果 [英] How to avoid the flickering effect when dynamically changes the image source in uwp
本文介绍了动态更改uwp中的图像源时如何避免闪烁效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一组图像，并且在按钮单击事件中正在替换图像源.更换图像源时出现闪烁效果.如何解决这个问题?
I have set of images and I am replacing the image source in a button click event. I am getting the flickering effect when replacing the image source. How to resolve this ?
<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));
}
推荐答案
对于闪烁效果，更改速度很快.而且这样做的代码在UI线程中花费的时间太长.
For the flickering effect is changed fast. And it does the code that cost too long in UI thread.
您可以使用bitmapImage.SetSourceAsync等待图像加载.
You can use bitmapImage.SetSourceAsync to wait for the image load.
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中运行时，它始终会闪烁.
But it always is flickering when the code run in some poor GPU.
我认为另一种方法是隐藏并显示图像"或制作动画.
I think the other way is Hide and Show the Image or making an animation.
隐藏和显示方式是制作一些面板，以显示其中一个面板.
The hide and show way is make some panel that will show one of the panel.
<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>
您可以编写一些按钮，然后单击
And you can write some button and click
<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>
单击按钮时可以显示面板.
You can show the panel when the button is clicked.
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;
}
这篇关于动态更改uwp中的图像源时如何避免闪烁效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
