writablebitmap render bad image

Question

Hi everyone I don't understand why image is not rendered correctly. Here the 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>

Here how I render the image

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

Here the result ( a screenshot form my lumia 925):

Why? I have not setted any margin... nothing...

In the first you can notice that image is rendered on the right... and you cannot see the yellow border... so it's like the image control overflow the screen... In the second one the right border is not on the end of the screen.. miss about 50px...

Thanx for your help...

Answer 1

Try this:

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

I changed Canvas to Grid and also removed both the Stretch and Canvas.ZIndex properties on the image.