writeablebitmap渲染坏图像

Question

大家好，我不明白为什么图片没有正确呈现。这里是xaml：

 <Canvas x:Name="CanvasLayout" Grid.Row="0" Grid.Column="0" 
           VerticalAlignment="Center" Width="{Binding ActualWidth, ElementName=LayoutRoot, Mode=OneWay}"
           Height="{Binding ActualHeight, ElementName=LayoutRoot, Mode=OneWay}"> 
    <Border Background="Red" BorderBrush="Yellow" BorderThickness="3" Margin="0"  >
        <Image x:Name="ImgChosenPhoto" Stretch="UniformToFill" Canvas.ZIndex="1"  />
    </Border>   
</Canvas>

这是我如何渲染图像

private async void FilterPage_Loaded(object sender, RoutedEventArgs e)
{
    System.Windows.Size screenSize = ResolutionHelper.ScreenResolution;

    Windows.Foundation.Size photoSize = await GetImageSizeAsync();

    double scale = 1;

    if (this.Orientation == PageOrientation.PortraitUp)
    {
        if (photoSize.Width > photoSize.Height)
        {
            scale = screenSize.Width / photoSize.Width;
        }
        else
        {
            scale = screenSize.Height / photoSize.Height;
        }
   }

   this._dimensionsPhoto.Width = (photoSize.Width * scale) - 6;
   this._dimensionsPhoto.Height = (photoSize.Height * scale) - 6;

   //this.ImgChosenPhoto.Height = (int)this._dimensionsPhoto.Height;
   //this.ImgChosenPhoto.Width = (int)this._dimensionsPhoto.Width;


    WriteableBitmap writeableBitmap = new WriteableBitmap((int)this._dimensionsPhoto.Height, (int)this._dimensionsPhoto.Width);

    await App.PhotoModel.RenderBitmapAsync(writeableBitmap);

    this.ImgChosenPhoto.Source = writeableBitmap;
}

public async Task RenderBitmapAsync(WriteableBitmap bitmap)
{
    using (BufferImageSource source = new BufferImageSource(_buffer))
    using (FilterEffect effect = new FilterEffect(source) { Filters = this._components })
    using (WriteableBitmapRenderer renderer = new WriteableBitmapRenderer(effect, bitmap))
    {
        await renderer.RenderAsync();

        bitmap.Invalidate();
    }
}

这里的结果（截图形式是我的lumia 925）：

为什么呢？我没有设置任何余量......没有...

在第一个中您可以注意到图像在右侧呈现...而您无法看到黄色边框...所以它就像图像控件溢出屏幕一样...... 在第二个中，右边框不在屏幕的末尾..错过大约50px ...

Thanx为你提供帮助......

Answer 1

试试这个：

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid x:Name="CanvasLayout"
       VerticalAlignment="Center">
        <Border Background="Red" BorderBrush="Yellow" BorderThickness="3" Margin="0"  >
            <Image x:Name="ImgChosenPhoto" />
        </Border>
    </Grid>
</Grid>

我将Canvas更改为Grid，同时删除了图片上的Stretch和Canvas.ZIndex属性。