How to draw in Windows Phone 8.1 on WriteableBitmap?

Question

I am trying to make an application with drawing pad. I choose WriteableBitmapEx for my purposes and started developing. I followed the short tutorial on the official site of this library but unfortunately I can't draw with SetPixel(...) on my bitmap. Could anyone help me to solve it?

XAML code:

<Page
x:Class="WritableBitmapApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WritableBitmapApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid>
    <Image x:Name="ImageControl"
           Source="Hobbit.png"
           Tapped="ImageControl_Tapped"
           Height="512"
           Width="350"/>
</Grid>

And C# code:

public sealed partial class MainPage : Page
{
    public WriteableBitmap writeableBmp;

    public MainPage()
    {
        this.InitializeComponent();

        this.NavigationCacheMode = NavigationCacheMode.Required;

        writeableBmp = BitmapFactory.New(512, 350);
        writeableBmp.Clear(Colors.Black);
        ImageControl.Source = writeableBmp;
        writeableBmp.GetBitmapContext();
    }

    /// <summary>
    /// Invoked when this page is about to be displayed in a Frame.
    /// </summary>
    /// <param name="e">Event data that describes how this page was reached.
    /// This parameter is typically used to configure the page.</param>
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        // TODO: Prepare page for display here.

        // TODO: If your application contains multiple pages, ensure that you are
        // handling the hardware Back button by registering for the
        // Windows.Phone.UI.Input.HardwareButtons.BackPressed event.
        // If you are using the NavigationHelper provided by some templates,
        // this event is handled for you.
    }

    private void ImageControl_Tapped(object sender, TappedRoutedEventArgs e)
    {
        var pnt = e.GetPosition(ImageControl);

        try
        {
            writeableBmp.DrawLine(0, 0, (int)pnt.X, (int)pnt.Y, Colors.White);
            ImageControl.Source = writeableBmp;
            writeableBmp.GetBitmapContext();
            writeableBmp.Invalidate();
            ImageControl.Source = writeableBmp;
        }
        catch(Exception ex)
        {

        }
    }
}

Answer 1

You are not disposing the BitmapContext. Try it like this:

using (writeableBmp.GetBitmapContext()) 
{
   writeableBmp.Clear();
   writeableBmp.DrawLine(0, 0, (int)pnt.X, (int)pnt.Y, Colors.White);   
} // Invalidates on exit of using block

I'd also recommend you take a look at the samples WriteableBitmapEx provides: https://writeablebitmapex.codeplex.com/SourceControl/latest Especially the curves samples already implements the drawing of points using pointer input. It draws spline curves but you can adapt that for your needs. \\trunk\\Source\\WriteableBitmapExCurvesSample.WinRT\\WriteableBitmapExCurvesSample.WinRT.csproj