Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

(Difference between revisions)

Edge detection filter in Windows Phone

From Wiki
Jump to: navigation, search
somnathbanik (Talk | contribs)
(Somnathbanik - - Code Behind)
somnathbanik (Talk | contribs)
(Somnathbanik -)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:Windows Phone 8]][[Category:Windows Phone 7.5]][[Category:XAML]][[Category:UI on Windows Phone]][[Category:Multimedia on Windows Phone]][[Category:Code Examples]][[Category:Code Snippet]][[Category:Imaging]][[Category:Imaging on Windows Phone]]
{{Note|This is an entry in the [[Nokia Imaging and Big UI Wiki Competition 2013Q4]].}}
{{Abstract| This article demonstrate how to create an edge detection filter in Windows Phone. }}
{{Abstract| This article demonstrate how to create an edge detection filter in Windows Phone. }}
{{ArticleMetaData <!-- v1.3 -->
{{ArticleMetaData <!-- v1.3 -->

Revision as of 14:06, 11 December 2013

Note.pngNote: This is an entry in the Nokia Imaging and Big UI Wiki Competition 2013Q4.

This article demonstrate how to create an edge detection filter in Windows Phone.

WP Metro Icon Multimedia.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata
Code ExampleTested with
Devices(s): Nokia Lumia 820,920
Windows Phone 8
Created: somnathbanik (11 Dec 2013)
Last edited: somnathbanik (11 Dec 2013)



Edge detection is the change in pixel brightness of a digital image. The pixel at which the image brightness changes we mark that point as an edge of the image. In this article we will create a edge detection filter that will detect the edges with black points. We have followed the Wiki for reference.


Create a standard Windows Phone Project

Let’s create a standard Windows Phone Application Project

  • Launch Visual Studio
  • Click on File
  • Click on New Project
  • Select Windows Phone App (Visual C# Template)
  • Add Name and Location of the project
  • Click OK to create the project.

Creating UI

  • Once you are done creating the standard project let’s add two Buttons and two Image controls in the MainPage.xaml. These controls are added to select an original image from the picture hub and apply edge filter on to it.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Vertical">
<Image x:Name="imageOriginal" Height="300" Stretch="Uniform" Margin="12,0,12,0" VerticalAlignment="Top" HorizontalAlignment="Left"></Image>
<Button Content="Select Image" Click="Button_Click_1" ></Button>
<Image x:Name="imageProcessed" Height="300" Stretch="Uniform" Margin="12,0,12,0" VerticalAlignment="Top" HorizontalAlignment="Left"></Image>
<Button Content="Detect Edge" Click="Button_Click_2" ></Button>

Code Behind

  • Use the Photo Chooser Task to select an image from the gallery and store it to a BitmapImage
public MainPage()
//select picture from picture hub
photoChooserTask = new PhotoChooserTask();
photoChooserTask.Completed += new EventHandler<PhotoResult>(photoChooserTask_Completed);
void photoChooserTask_Completed(object sender, PhotoResult e)
if (e.TaskResult == TaskResult.OK)
bmp = new BitmapImage();
imageOriginal.Source = bmp;
  • We add the WriteableBitmapEx library to our project reference to get RGB value of a pixel. The EdgeDetection() method calculates the edges of an image and returns the final image to the called function.
private WriteableBitmap EdgeDetection(WriteableBitmap bmp)
WriteableBitmap bitmap = new WriteableBitmap(bmp.PixelWidth, bmp.PixelHeight);
for (int i = 1; i < bmp.PixelWidth-1; i++)
for (int j = 1; j < bmp.PixelHeight-1; j++)
Color cx1 = bmp.GetPixel(i - 1, j);
Color cx2 = bmp.GetPixel(i, j);
Color cx3 = bmp.GetPixel(i + 1, j);
Color cy1 = bmp.GetPixel(i, j - 1);
Color cy2 = bmp.GetPixel(i, j);
Color cy3 = bmp.GetPixel(i, j + 1);
int lx = (cx1.R + cx1.G + cx1.B) + (cx3.R + cx3.G + cx3.B) - (2 * (cx2.R + cx2.G + cx2.B));
int ly = (cy1.R + cy1.G + cy1.B) + (cy3.R + cy3.G + cy3.B) - (2 * (cy2.R + cy2.G + cy2.B));
double root = Math.Sqrt(lx * lx / 4 + ly * ly / 4);
if (root > 15)
bitmap.SetPixel(i, j, Colors.Black);
bitmap.SetPixel(i, j, Colors.White);
return bitmap;
  • Finally we initiate the edge detection process with a Button clicked event and display the output in an Image control.
private void Button_Click_2(object sender, RoutedEventArgs e)
WriteableBitmap writeableBmp = new WriteableBitmap(bmp);
WriteableBitmap newWBmp = EdgeDetection(writeableBmp);
imageProcessed.Source = newWBmp;

Source Code

106 page views in the last 30 days.