在Windows RT應用程序中閃爍的圖像

Question

我有一個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(); 
     } 
    } 
} 
} 

Answer 1

我找到了解決方案。

IRandomAccessStream stream = await storageFile.OpenAsync(FileAccessMode.Read); 
BitmapImage bitmapImage = new BitmapImage(); 

if (await bitmapImage.SetSourceAsync(stream)) 
{ 
    image1.source = bitmapImage; 
} 

這種方式沒有閃爍。

Answer 2

我看到的第一件事情是，你不必要設置圖像源空將它設置爲一個新值之前，儘管它可能並不重要其實。問題是下載/解碼圖像需要一些時間。因此，您應該在開始使用它們之前預先加載所有圖像（這可能會使用太多的內存並因此不可行），或者使用兩個圖像控件代替一個，並將它們用作一種交換鏈，並在其中有一個可見圖像一個是隱藏的，當你想切換顯示的圖像時 - 更新隱藏圖像的來源，並且只有在位圖加載後才切換圖像的可見性。雖然BitmapImage可能不會直接啓動，直到託管圖像控件可見爲止，因此您可能需要將不透明度設置爲0.01，而不是將其完全隱藏，或者嘗試使其不透明，然後立即隱藏，直到位圖加載。如果位圖已經加載 - 其PixelWidth將> 0.