S
S
Shevnin2014-03-06 07:31:08
.NET
Shevnin, 2014-03-06 07:31:08

How to create blurry edges on an Image in Windows Phone?

Hello.
In the Windows Phone application, there is a task - to blur the edges of an Image.
With a slider, the user should be able to change the thickness of the edge blur.
Let's assume that our image has a size of 200x200 pixels.
I had an idea to create a Canvas 200x200, fill the Canvas with a group of Rectangles (100 pieces) with different degrees of transparency (the degree of transparency depends on slider.value and is considered as 255/slider.value), store the Canvas in a WriteableBitmap, create an ImageBrush from the WriteableBitmap. And use ImageBrush for Image.OpacityMask:

var canvas=new Canvas();
var canvasSize = 200;
var mainRectCount = 100;
var changedRectCount = 50;
var tempCanvas = new Canvas();
tempCanvas.Height = tempCanvas.Width = canvasSize;

var rectangleSizeStep = canvasSize / mainRectCount;
var opacityStep = 255.0 / changedRectCount;
var rectangleSize = canvasSize;
var opacity = 0.0;
var rectMargin = 0.0;
for (int i = 0; i < mainRectCount; i++)
 {
  Rectangle rect = new Rectangle();
  rect.Height = rect.Width = rectangleSize;
  var color = new Color();
  color.A = (byte)opacity;
  color.R = 1;
  color.G = 150;
  color.B = 5;
  rect.Fill = new SolidColorBrush(color);
  rect.Margin = new Thickness(rectMargin, rectMargin, 0, 0);
  rectMargin += rectangleSizeStep / 2;
  rect.RadiusX = 25;
  rect.RadiusY = 25;
  if (i < changedRectCount)
   {
    opacity += opacityStep;
   }
   else
   {
    opacity = 255;
   }

  rectangleSize -= rectangleSizeStep;
  canvas.Children.Add(rect);
  }
var writeBit= new WriteableBitmap(canvas, null);
var imgBrush = new ImageBrush();
imgBrush .ImageSource = writeBit;
img.OpacityMask = imgBrush ;

At the same time, the edges are blurred weakly, and I cannot blur the entire picture.
There may be an easier way to blur the edges of an Image on Windows Phone, but I can't find it.
I will be grateful for help.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
D
Dmitry Bondarenko, 2014-03-10
@bondarenkod

I have an implementation - do something like this, but I also have a problem. see question. WP8 gradient on control border, pixel gaps

G
gaploid, 2014-03-19
@gaploid

developer.nokia.com/lumia/nokia-apis/imaging There are filters and it seems that in the latest version you can make your own filters.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question