2

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

2 回答 2

7

我找到了解决方案。

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

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

这样就没有闪烁了。

于 2013-01-22T12:08:49.833 回答
2

我看到的第一件事是，您在将图像源设置为新值之前不必要地将其设置为 null，尽管实际上这可能无关紧要。问题是下载/解码图像需要一些时间。因此，您应该在开始使用它们之前预加载所有图像（这可能会占用太多内存，因此不可行），或者使用两个图像控件代替一个，并将它们用作一种交换链，其中您有一个可见图像和一个隐藏的，当您想要切换显示的图像时 - 更新隐藏图像的源，并且仅在加载位图后切换图像的可见性。这可能并不简单，因为在托管图像控件可见之前 BitmapImage 可能不会开始加载，因此您可能需要将不透明度设置为 0。01 而不是完全隐藏它或尝试使其可见然后立即不可见，直到加载位图。如果位图已加载 - 它的 PixelWidth 将 > 0。

于 2013-01-15T19:36:20.507 回答