0

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

enter image description here enter image description here

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

loop
  • 9,002
  • 10
  • 40
  • 76
Simone
  • 2,304
  • 6
  • 30
  • 79
  • What is the result that you want? What is the difference in code between the first and the second screenshot? – Igor Ralic Mar 03 '14 at 16:18
  • Hi... the first screenshot is a vertical image... the second one is an horizontal image... the result is just i want to render the image in the screen, resizing the image with the size of the screen! The image is resized... but it looks like the IMAGE CONTROL not! (image control is the red rectangle with the ywllow border) I do not understand why it has that size! – Simone Mar 03 '14 at 16:24
  • 2
    How about putting it inside a Grid instead of a Canvas, then it will stretch. – Igor Ralic Mar 03 '14 at 16:34

1 Answers1

0

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.

Toni Petrina
  • 7,014
  • 1
  • 25
  • 34