Windows RT App中的图像闪烁 [英] Image flickering in Windows RT App

问题描述

我有一个Windows RT应用程序，可以在其中以编程方式更改 Image 组件中的位图.所有与 XAML 和下面的代码都可以很好地工作，除了在更改图像时看到的闪烁.

I have a Windows RT app where I programmatically change the Bitmap in the Image component. All works well with the XAML and the code below except the flickering we see when the image is changed.

要摆脱闪烁，我该怎么做?

What should I change to get rid of the flickering?

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

没有这种闪烁方式.

这篇关于Windows RT App中的图像闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！