How to display a Notification Bubble in Windows Mobile using .NETCF

Yesterday, I found myself using an old piece of code that I wrote ages ago. It's something I've used every now and then for past few years. Since I myself find it useful, I might as well share it. All the code does is display a Notification Bubble in Windows Mobile. To do this you use the Notification class in the Microsoft.WindowsCE.Forms namespace. Even though the Notification class is very straight forward and easy to use, I created a helper class so that I only need to write one line of code for displaying a notification bubble: NotificationBubble.Show(2, "Caption", "Text");

/// <summary>

/// Used for displaying a notification bubble

/// </summary>

public static class NotificationBubble

{

    /// <summary>

    /// Displays a notification bubble

    /// </summary>

    /// <param name="duration">Duration in which the notification bubble is shown (in seconds)</param>

    /// <param name="caption">Caption</param>

    /// <param name="text">Body</param>

    public static void Show(int duration, string caption, string text)

    {

        var bubble = new Notification

        {

            InitialDuration = duration,

            Caption = caption,

            Text = text

        };

        bubble.BalloonChanged += OnBalloonChanged;

        bubble.Visible = true;

    }

    private static void OnBalloonChanged(object sender, BalloonChangedEventArgs e)

    {

        if (!e.Visible)

            ((Notification)sender).Dispose();

    }

}

Hope you found this helpful.

Working around Pivot SelectedIndex limitations in Windows Phone 7

I've been working on an application with 2 pages, a main page and a content page. The content page contains a Pivot control with a few pivot items. The main page does nothing but navigate to the content page and suggest which pivot item to display. The only reason the main page exists is to display the information in the pivot item headers in a more graphical and elegant way.

For some reason I can't set the displayed pivot index to be the third item. I wanted to do this on the OnNavigatedTo event of the content page but whenever I attempt doing so an exception is thrown. Every other pivot item works fine, which I think is really weird.

To load the content page, I navigate to the page by passing some information of the pivot index I wish to be displayed. Something like this:

NavigationService.Navigate(new Uri("/ContentPage.xaml?index=" + index, UriKind.Relative));

If the value of index in the code above is set to 2 then I get an exception, any other valid value works fine. A value out of range (less than 0 or greater than 5) throws an out of range exception which is the behavior anyone would expect.

Here's the XAML definition of the content page

<phone:PhoneApplicationPage

    x:Class="WindowsPhonePivotApplication.ContentPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait"  Orientation="Portrait"

    shell:SystemTray.IsVisible="True">

  <Grid x:Name="LayoutRoot" Background="Transparent">

    <controls:Pivot Name="pivot" Title="CONTENT PAGE">

      <controls:PivotItem Header="first" />

      <controls:PivotItem Header="second" />

      <controls:PivotItem Header="third" />

      <controls:PivotItem Header="fourth" />

      <controls:PivotItem Header="fifth" />

      <controls:PivotItem Header="sixth" />

    </controls:Pivot>

  </Grid>

</phone:PhoneApplicationPage>

To work around this limitation, you can handle the Loaded event of the page and update the pivot selected index from there. Here's an example how to do it:

public partial class ContentPage : PhoneApplicationPage

{

    private int pivotIndex;

    public ContentPage()

    {

        InitializeComponent();

        Loaded += delegate { pivot.SelectedIndex = pivotIndex; };

    }

    protected override void OnNavigatedTo(NavigationEventArgs e)

    {

        string value;

        if (NavigationContext.QueryString.TryGetValue("index", out value))

        {

            pivotIndex = 0;

            int.TryParse(value, out pivotIndex);

        }

    }

}

I'm not sure if this limitation is by design or it's a bug in the control. Either way I managed to get it to work the way I wanted it to. Hopefully I'm not the only one who ran across this and that you found this information useful.

How to Darken an Image in WPF

I'm really getting carried away with playing with image manipulation in WPF. Here's a short post on how to darken an image using the WriteableBitmap class.

The process is fairly simple, I manipulate each pixel by decrementing each RGB value with the provided level

unsafe static BitmapSource Darken(BitmapSource image, double level)

{

    const int PIXEL_SIZE = 4;

    int height = image.PixelHeight;

    int width = image.PixelWidth;

    var bitmap = new WriteableBitmap(image);

    bitmap.Lock();

    var backBuffer = (byte*)bitmap.BackBuffer.ToPointer();

    for (int y = 0; y < height; y++)

    {

        var row = backBuffer + (y * bitmap.BackBufferStride);

        for (int x = 0; x < width; x++)

            for (int i = 0; i < PIXEL_SIZE; i++)

                row[x * PIXEL_SIZE + i] = (byte)Math.Max(row[x * PIXEL_SIZE + i] - level, 0);

    }

    bitmap.AddDirtyRect(new Int32Rect(0, 0, width, height));

    bitmap.Unlock();

    return bitmap;

}

Hope you found this useful.

How to Brighten an Image in WPF

Now I'm just getting carried away with playing with image manipulation in WPF. Here's a short post on how to brighten an image using the WriteableBitmap class.

The process is fairly simple, I manipulate each pixel by incrementing each RGB value with the provided level

unsafe static BitmapSource Brighten(BitmapSource image, double level)

{

    const int PIXEL_SIZE = 4;

    int height = image.PixelHeight;

    int width = image.PixelWidth;

    var bitmap = new WriteableBitmap(image);            

    bitmap.Lock();

    var backBuffer = (byte*)bitmap.BackBuffer.ToPointer();

    for (int y = 0; y < height; y++)

    {

        var row = backBuffer + (y * bitmap.BackBufferStride);

        for (int x = 0; x < width; x++)

            for (int i = 0; i < PIXEL_SIZE; i++)

                row[x * PIXEL_SIZE + i] = (byte)Math.Min(row[x * PIXEL_SIZE + i] + level, 255);

    }

    bitmap.AddDirtyRect(new Int32Rect(0, 0, width, height));

    bitmap.Unlock();

    return bitmap;

}

Hope you found this useful

How to Alpha Blend 2 Images in WPF

After having such fun trying to find optimal ways of manipulating images in WPF I decided to write another short post on image manipulation. This time I'd like to demonstrate how to alpha blend 2 images using the WriteableBitmap class.

I'm probably not the best one to explain how alpha blending is done but here's the idea in a nutshell. I get the RGB values of every pixel for the each image and write them to a new bitmap where I manipulate each color information by applying the following formula:

r = ((image1 pixel (red) * alpha level) + (image2 pixel (red) * inverse alpha level)) / 256
b = ((image1 pixel (blue) * alpha level) + (image2 pixel (blue) * inverse alpha level)) / 256
g = ((image1 pixel (green) * alpha level) + (image2 pixel (green) * inverse alpha level)) / 256

unsafe static WriteableBitmap AlphaBlend(BitmapSource image1, BitmapSource image2, int alphaLevel)

{

    const int PIXEL_SIZE = 4;

    int ialphaLevel = 256 - alphaLevel;

    int height = Math.Min(image1.PixelHeight, image2.PixelHeight);

    int width = Math.Min(image1.PixelWidth, image2.PixelWidth);

    var bitmap = new WriteableBitmap(width, height, image1.DpiX, image1.DpiY, PixelFormats.Bgr32, null);

    var bitmap1 = new WriteableBitmap(image1);

    var bitmap2 = new WriteableBitmap(image2);

    bitmap.Lock();

    bitmap1.Lock();

    bitmap2.Lock();

    var backBuffer = (byte*)bitmap.BackBuffer.ToPointer();

    var bitmap1Buffer = (byte*)bitmap1.BackBuffer.ToPointer();

    var bitmap2Buffer = (byte*)bitmap2.BackBuffer.ToPointer();

    for (int y = 0; y < height; y++)

    {

        var row = backBuffer + (y * bitmap.BackBufferStride);

        var img1Row = bitmap1Buffer + (y * bitmap1.BackBufferStride);

        var img2Row = bitmap2Buffer + (y * bitmap2.BackBufferStride);

        for (int x = 0; x < width; x++)

            for (int i = 0; i < PIXEL_SIZE; i++)

                row[x * PIXEL_SIZE + i] = (byte)(((img1Row[x * PIXEL_SIZE + i] * alphaLevel) + (img2Row[x * PIXEL_SIZE + i] * ialphaLevel)) >> 8);

    }

    bitmap.AddDirtyRect(new Int32Rect(0, 0, width, height));

    bitmap2.Unlock();

    bitmap1.Unlock();

    bitmap.Unlock();

    return bitmap;

}

The method above will probably work best if the 2 images are of the same size. I hope you found this information useful.

How to convert an image to gray scale in WPF

I've been playing with the Windows Presentation Foundation today and I had a task where I needed to convert an image to gray scale to do some image analysis on it. I've done this a bunch of times before using GDI methods or by accessing the BitmapData class in .NET. For this short post I'd like to demonstrate how to manipulate images using the WriteableBitmap class.

The easiest way to convert an image to gray scale is to set the RGB values of every pixel to the average of each pixels RBG values.
R = (R + B + G) / 3
G = (R + B + G) / 3
B = (R + B + G) / 3

Here's a code snippet for manipulating a BitmapSource object using the WriteableBitmap class into a gray scale image:

public unsafe static BitmapSource ToGrayScale(BitmapSource source)

{

    const int PIXEL_SIZE = 4;

    int width = source.PixelWidth;

    int height = source.PixelHeight;

    var bitmap = new WriteableBitmap(source);

    bitmap.Lock();

    var backBuffer = (byte*)bitmap.BackBuffer.ToPointer();

    for (int y = 0; y < height; y++)

    {

        var row = backBuffer + (y * bitmap.BackBufferStride);

        for (int x = 0; x < width; x++)

        {

            var grayScale = (byte)(((row[x * PIXEL_SIZE + 1]) + (row[x * PIXEL_SIZE + 2]) + (row[x * PIXEL_SIZE + 3])) / 3);

            for (int i = 0; i < PIXEL_SIZE; i++)

                row[x * PIXEL_SIZE + i] = grayScale;

        }

    }

    bitmap.AddDirtyRect(new Int32Rect(0, 0, width, height));

    bitmap.Unlock();

    return bitmap;

}

Another way to to convert an image to gray scale is to set the RGB values of every pixel to the sum of 30% of the red value, 59% of the green value, and 11% of the blue value. Hope you find this useful.