image - writablebitmap 渲染坏图像

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 ......

感谢您的帮助...

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属性。