How to Place Border Around a Picture

Question

In a page I display a picture that I receive from CameraCapureTask in the View

<Grid x:Name="EditPageGrid" Margin="{Binding}">
    <Grid Name="ViewportContainer" Margin="12,0,12,24">
        <Image x:Name="Viewport" LayoutUpdated="Viewport_LayoutUpdated" 
               Source="{Binding}"/>
    </Grid>
</Grid>

And I wish to be able to place a border around this image. How would it be possible to do this? I was thinking perhaps on a click event of some sort a border could be toggled on or off, but actually applying a border is where I am at a loss.

Have you tried: http://stackoverflow.com/questions/2769291/how-do-i-put-a-border-on-my-grid-in-wpf or http://www.c-sharpcorner.com/uploadfile/mahesh/border-in-wpf/. Do you want edit picture or just place a border on page? — Romasz, Nov 16 '13 at 16:31
I suppose editing the picture. For instance, the entire image will now contain the border as well as part of the image, not just show a border around the image in the view. — Matthew, Nov 17 '13 at 00:24

score 2 · Answer 1 · answered Nov 16 '13 at 17:22

2

You can contain the image in a Border, like this:

<Grid x:Name="EditPageGrid" Margin="{Binding}">
    <Grid Name="ViewportContainer" Margin="12,0,12,24">
        <Border HorizontalAlignment="Center" BorderThickness="4" BorderBrush="Red">        
           <Image Source="C:\Users\Public\Pictures\Sample Pictures\Jellyfish.jpg"/>
        </Border>
    </Grid>
</Grid>

answered Nov 16 '13 at 17:22

Dweeberly

4,668
2
22
41

I think I misspoke in my initial question. I need to place a border around an image on a click event, and then I need to actually save the border and the image as a new image that now contains the border. – Matthew Nov 17 '13 at 00:27
You can wrap the image in a border on a button click fairly easily, pull the image from the parent grid, created a new border, add the image to the border content then add the border back to the grid. This post suggests there is a way to convert a content element to an image/bitmap: http://stackoverflow.com/questions/15918296/save-a-grid-and-elements-in-it-as-a-jpeg-image-winrt – Dweeberly Nov 17 '13 at 02:32

Romasz · Answer 2 · 2013-11-17T10:48:34.457

I figured out such an event: (probably there is better method, but this also works)

  private void Viewport_Tap(object sender, System.Windows.Input.GestureEventArgs e)
  {
     int imageHeight = (Viewport.Source as BitmapImage).PixelHeight;
     int imageWidth = (Viewport.Source as BitmapImage).PixelWidth;

     Canvas myCanvas = new Canvas();
     Rectangle myBorder = new Rectangle();
     myBorder.Width = imageWidth;
     myBorder.Height = imageHeight;
     myBorder.Stroke = new SolidColorBrush(Colors.Red);
     myBorder.StrokeThickness = 10;

     Image toBorder = new Image();
     toBorder.Source = Viewport.Source as BitmapImage;

     myCanvas.Children.Add(toBorder);
     myCanvas.Children.Add(myBorder);

     WriteableBitmap newImage = new WriteableBitmap(myCanvas, null);

     //Viewport.Source = newImage; - you can use this but watch out that Viewport.Source now is not BitmapImage
     //Below is one method how to make it BitmapImage
     //You can of course save newImage to file or whatever you want
     //You can also unsubscribe this event to prevent it from second tap which will cause Exception at first line (BitmaImage != WriteableBitmap)

     MemoryStream memoryStream = new MemoryStream();
     newImage.SaveJpeg(memoryStream, imageWidth, imageHeight, 0, 100);
     BitmapImage newBitmap = new BitmapImage();
     newBitmap.SetSource(memoryStream);

     Viewport.Source = newBitmap;
  }

Playing with this memory stream isn't good, but I've not known what you are planning to do with your new Bitmap.
As I've said - it's only example and I'm sure better methods exist (which I don't know). Hope this helps.

How to Place Border Around a Picture

2 Answers2