Question

I’m developping a silly application that:
– opens a pictures from media library,
– puts the chosen image in a grid element (which contains a TextBlok element)
– save the pictures in the “saved pictures” album.

My XAML code is:

<controls:PanoramaItem Header="Image Selection" Height="652">
<Grid Name="markedImage" Margin="0,0,4,89">
    <Image x:Name="img" Stretch="Fill" Margin="0,0,0,10"></Image>
    <TextBlock x:Name="text" Text="Hello!">
        <i:Interaction.Behaviors>
            <el:MouseDragElementBehavior ConstrainToParentBounds="True"/>
        </i:Interaction.Behaviors>
    </TextBlock>
</Grid>

and the code to open and save the chosen picture is:

private void photoChooserTask_Completed(object sender, PhotoResult e)
    {
        try
        {
            BitmapImage image = new BitmapImage();
            image.SetSource(e.ChosenPhoto);
            WriteableBitmap wbp = new WriteableBitmap(image);
            this.img.Source = image;
            height = image.PixelHeight;
            width = image.PixelWidth;
            MessageBox.Show("H: " + height + "\t" + "W: " + width);
        }
        catch 
        { 
            MessageBox.Show("Disconnect your device from Zune"); 
        }
    }
private void save_Click(object sender, System.EventArgs e)
    {

        WriteableBitmap marked = new WriteableBitmap(this.markedImage, null);
        ThreadPool.QueueUserWorkItem(callback =>
        {
            MemoryStream ms = new MemoryStream();
            marked.SaveJpeg(ms, (width * 2), (height * 2), 0, 100);
            using (MediaLibrary lib = new MediaLibrary())
                lib.SavePicture("Test", ms.ToArray());
        });
        MessageBox.Show("H: " + marked.PixelHeight + "\t" + "W: " + marked.PixelWidth);

        // wbm.SaveToMediaLibrary("SavedPicture.jpg", true);

        MessageBox.Show("Picture saved successfully");
    }

I can’t post pictures because I’m a new user, anyway pictures (orignal and saved pic) have the same height and width but they look different
I think that the problem is the grid dimension and Stretch property. I tried different combo but results were not good.
Some suggestion?

edit: i earned reputation point
original pics is

saved pics is

if you open both in another window, you can see the difference

Answer 1

The problem is quite simple to understand: basically, you’re doing a ‘screenshot’ of your grid. Therefore, the size of the generated picture is the same as the size of the grid. Hence the down-sampled picture.

Fixing that however can be tricky. I can suggest two ways:

1. Recreate programmatically the grid and its contents in the code-behind, then create the WriteableBitmap from this new grid

2. Remove the grid from its parent control just before executing your image-generation code (then the grid will be able to use as much space as needed), and add it back afterwards:

   <Grid x:Name="ParentGrid" Grid.Row="1" Width="200" Height="150">
       <Grid Name="markedImage" Margin="0,0,4,89">
           <Image x:Name="img" Source="Images/Test.jpg" Stretch="Fill" Margin="0,0,0,10"></Image>
           <TextBlock x:Name="text" Text="Hello!">
               <i:Interaction.Behaviors>
                   <el:MouseDragElementBehavior ConstrainToParentBounds="True"/>
               </i:Interaction.Behaviors>
           </TextBlock>
       </Grid>
   </Grid>
   

   And the code-behind:

   this.ParentGrid.Children.Remove(this.markedImage);
   
   WriteableBitmap marked = new WriteableBitmap(this.markedImage, null);          
   
   MemoryStream ms = new MemoryStream();
   marked.SaveJpeg(ms, 1349, 1437, 0, 100);
   using (MediaLibrary lib = new MediaLibrary())
       lib.SavePicture("Test", ms.ToArray());
   
   MessageBox.Show("H: " + marked.PixelHeight + "\t" + "W: " + marked.PixelWidth);
   
   MessageBox.Show("Picture saved successfully");
   
   this.ParentGrid.Children.Add(this.markedImage);