[英]Image flickering in Windows RT App
我有一個Windows RT應用程序,我以編程方式更改Image
組件中的位圖。 一切都適用於XAML
和下面的代碼,除了我們在圖像更改時看到的閃爍。
我應該改變什么才能擺脫閃爍?
XAML
:
<Page
x:Class="iSurfBrainViewProto01.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:iSurfBrainViewProto01"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Center" VerticalAlignment="Top"
Margin="20,20,0,20">
<Grid.RowDefinitions>
<RowDefinition Height="8*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Left" Height="768"
VerticalAlignment="Top" Width="768">
<Image x:Name="image1" Source="BrainImg/axis/ax-128.jpg"/>
<Image x:Name="image2" Source="BrainImg/axis/ax-128.png"/>
</Grid>
<Slider HorizontalAlignment="Left" VerticalAlignment="Top"
Width="768" Grid.Row="1" Maximum="255" Value="128"
x:Name="slider1" ValueChanged="Slider_ValueChanged_1"/>
</Grid>
<Grid HorizontalAlignment="Left" VerticalAlignment="Top"
Grid.Column="1" Margin="0,10" MinHeight="768">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button HorizontalAlignment="Left" VerticalAlignment="Top" Width="85"
Height="100" BorderThickness="0">
<Image Source="ax-1.jpg" />
</Button>
<Button HorizontalAlignment="Center" VerticalAlignment="Top"
Grid.Row="1" Width="85" Height="100" BorderThickness="0">
<Image Source="ax-2.jpg" />
</Button>
<Button HorizontalAlignment="Right" VerticalAlignment="Top"
Grid.Row="2" Width="85" Height="100" BorderThickness="0">
<Image Source="ax-3.jpg" />
</Button>
<Button HorizontalAlignment="Left" VerticalAlignment="Top"
Grid.Row="3" Width="85" Height="100" BorderThickness="0">
<Image Source="ax-4.jpg" />
</Button>
<Button HorizontalAlignment="Center" VerticalAlignment="Top"
Grid.Row="4" Width="85" Height="100" BorderThickness="0">
<Image Source="ax-5.jpg" />
</Button>
<Button HorizontalAlignment="Right" VerticalAlignment="Top"
Grid.Row="5" Width="85" Height="100" BorderThickness="0">
<Image Source="ax-6.jpg" />
</Button>
</Grid>
<Grid HorizontalAlignment="Left" VerticalAlignment="Top"
Grid.Column="2" Margin="10,10,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="7*"/>
</Grid.RowDefinitions>
<TextBlock Text="Structure Selected: This Struct"
HorizontalAlignment="Left" MinHeight="50" FontSize="26" />
<WebView Source="http://www.mywebsite.com"
HorizontalAlignment="Left"
Grid.Row="1" MinWidth ="500" MinHeight="760" />
</Grid>
</Grid>
</Page>
碼:
namespace Test01
{
public sealed partial class MainPage : Page
{
int currentSlice = 128;
String axis = "ax-";
public MainPage()
{
this.InitializeComponent();
}
public void displayImages()
{
BitmapImage bitmapImage = image1.Source as BitmapImage;
bitmapImage.UriSource = null;
image1.Source = null;
BitmapImage bitmapImage2 = image2.Source as BitmapImage;
bitmapImage2.UriSource = null;
image2.Source = null;
Uri image1Uri = new Uri(this.BaseUri,
"BrainImg/axis/" + axis + currentSlice + ".jpg");
image1.Source = new BitmapImage(image1Uri);
image2.Source = new BitmapImage(new Uri(this.BaseUri,
"BrainImg/aseg/" + axis + currentSlice + ".png"));
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private void Slider_ValueChanged_1(object sender,
RangeBaseValueChangedEventArgs e)
{
if (slider1 != null) {
currentSlice = (int) slider1.Value;
displayImages();
}
}
}
}
我找到了解決方案。
IRandomAccessStream stream = await storageFile.OpenAsync(FileAccessMode.Read);
BitmapImage bitmapImage = new BitmapImage();
if (await bitmapImage.SetSourceAsync(stream))
{
image1.source = bitmapImage;
}
這種方式沒有閃爍。
我看到的第一件事是你在將圖像源設置為新值之前不必要地將圖像源設置為null,盡管它實際上並不重要。 問題是下載/解碼圖像需要一點時間。 因此,您應該在開始使用它們之前預加載所有圖像(可能使用太多內存,因此不可行)或使用兩個圖像控件代替一個圖像控件並將它們用作一種交換鏈,其中您有一個可見圖像和一個隱藏的,當你想切換顯示的圖像時 - 更新隱藏圖像的來源,只有在加載位圖后才切換圖像的可見度。 雖然可能不是直截了當,因為在托管圖像控件可見之前BitmapImage可能無法開始加載,因此您可能需要將opacity設置為0.01而不是完全隱藏它或嘗試使其可見,然后立即隱藏,直到加載位圖。 如果位圖已加載 - 其PixelWidth將> 0。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.