Derik Whittaker : WindowsPhone

Help my Secondary Tile will not navigate correctly in my Win Phone Application

Derik Whittaker — Sun, 26 Aug 2012 01:15:21 GMT

When you are adding the ability to have a Secondary tile to your Windows phone application you may from time to time find the need to debug or mimic the launching of the application via the Secondary tile w/ the correct query string values. Sadly, debugging this via the debugger is not something that I have found out how to do, if it is possible please let me know. However, I have found another way to get the same result and here is how.

Get the exact tile uri used for the secondary tile.
Example: “/views/events/Landing.xaml?Id=1”
Open up the WMAppManifest.xml page under resources
Find the line that looks like this:
<DefaultTask Name="_default" NavigationPage="MainPage.xaml" />
Replace it w/ the URI of your secondary tile like this:
<DefaultTask Name="_default" NavigationPage="/views/events/Landing.xaml?Id=1" />
Launch the application

If you are wired everything correctly your page should load, but if you are trying to debug this it is likely you did not have everything correct. If you did not do things correctly you should get some sort of runtime error.

Hope this helps

Till next time,

Data Binding to the Panorama control in WP7

Derik Whittaker — Wed, 22 Aug 2012 18:56:59 GMT

When you build a Windows Phone 7 (soon to be 8) application, one of the screen layouts you can use is the Panorama. In most cases the number of pages in the panorama is hard defined in code but there is the occasion when you will add pages dynamically based on binding. In this post we are going to take a look at how we can do this.

Step 1 – Setup the ItemSource binding

As with all other binding to list items you can setup your ItemSource binding as below:

ItemsSource="{Binding SportDrills}"

The SportDrills is simply a property off of my main VM and it contains the needed data for both the header and item template

Step 2 – Setup the Header DataTemplate

When setting up the Panorama it is important to have a header, binding to this header is not too hard and only requires a few lines of xaml

<controls:Panorama.HeaderTemplate>
    <DataTemplate>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>
            <TextBlock Text="{Binding SportName}" />
            <TextBlock Grid.Row="1" Text="{Binding DrillCount}" 
                        Margin="15,3"
                        Style="{StaticResource PanaramaHeaderAccentTextBlockStyle}" />
        </Grid>
    v/DataTemplate>
</controls:Panorama.HeaderTemplate>

In the xaml above the important part to pay attention to is the Panorama.HeaderTemplate, this is where you can define you header for the given panel. In my example I am creating a bit more complex header as i am adding a second level of data. If you only want a single line of text of course you can skip the grid and just have a TextBlock statement.

Step 3 – Setup the ItemTemplate DataTemplate

Now that we have our header setup it is time to setup the body of the panel. To do this you will want to do something like below.

<controls:Panorama.ItemTemplate>:               
    <DataTemplate>:
        <Grid>:
            <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Drills}"                          
						telerik:InteractionEffectManager.IsInteractionEnabled="True" 
						ItemContainerStyle="{StaticResource StretchableListBoxItemStyle}">:

                <ListBox.ItemTemplate>:
                    <DataTemplate>:
                        <Grid>:
                            <Border 
							VerticalAlignment="Center"
							HorizontalAlignment="Center"
							Width="36" Height="36">:

                            </Border>:
                            <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource ListBoxHeaderStyle}"/>:

                        </Grid>:
                    </DataTemplate>:
                </ListBox.ItemTemplate>:
            </ListBox>:
        </Grid>:
    </DataTemplate>:
</controls:Panorama.ItemTemplate>:

In the XAML above the important part to pay attention to is the Panorama.ItemTemplate, this is where you can defined your content for the panel. In my example I am simply listing data, but you can of course do anything you want.

As you can see binding to the ItemSource and creating panels on the fly via binding is very simple, yet very powerful

Till next time,

Using the Isolated Storage Explorer tool on WP7 Mango to export your .sdf file

Derik Whittaker — Tue, 19 Jul 2011 11:13:54 GMT

One of the biggest complaints (from myself and others) about V1 of WP7 was the total and complete lack of a built in database (although v1 of WP7 did have SQL CE on the device but developers did not have access to use it). When I say there was no built in database don’t misread that to say there is no data storage support cause there is but it is in the form of blob storage inside of the Isolated storage area. This type of storage worked and some great libraries were built on top of this storage to give your app SQL like abilities, but non of them gave you a true SQL experience.

With the upcoming release (this post is based of the Beta build of Mango) of WP7 Mango developers now have full access to SQL CE inside your application. This means that you can do many cool things. One of the really cool things that can be done w/ this SQL access is the ability to import/export your .sdf (SQL CE database file) file in order to view the data inside of SQL Management studio or Visual Studio.

In this post I will walk you though what is needed in order to use the Isolated Storage Explorer tool and how to use this tool to export your .sdf file to your hard drive. I will than walk you through how to connect to that .sdf file via Visual Studio in order to run queries against the data.

Step 1: Running the Isolated Storage tool
This tool is NOT a GUI based tool but rather a command line tool, but it is not hard to use or to learn.

Open up a command prompt and navigate to c:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Tools\IsolatedStorageExplorerTool
In order to extract your data file you will want to run the following command:
ISETool.exe ts xd GUIDGOESHERE PATHTOEXPORTGOESHERE
Let me break down this command in a little more details
- ISETool.exe is the commandline too to work with Isolated Storage
- ts is the command to instruct the take a snapshot of the Isolated Storage data
- xd is the command to instruct the app to look at a running emulator (use de if you want to hit a real device)
- GUIDGOESHERE is the Application GUID for your WP7 application which can be found in your WMAppManifest.xml file
- PATHTOEXPORTGOESHERE is the full path to a folder on your hard drive to store the exported .sdf file

Step 2: Attach the .sdf file to a running instance of Visual Studio
You will want to open up Visual Studio and open the Server Explorer window/pane. Once you have this window open you will need to connect to your .sdf file as such:

Click the Connect to Database button in the Server Explorer
When you click the connect button you will need to add a connection. When the dialog below opens the default should be SQL Client. Make sure you click the change button and select SQL CE 3.5. Selecting SQL CE will change the dialog and you should populate it as you see below.

Step 3: Open the database and take a look at the schema
One you have attached your .sdf file you should now see the database attached to the Server Explorer. You should be able to see all the table schema information as below

Step 4: Query the data
Now that you have attached the database and you can see the schema the next logical thing to do is query the data. You can do this one of two ways. You can either right click on the table and choose ‘Show Table Data’ or you can create a new query and write custom sql. Below is the output of choosing to show table data.

As you can see using when using SQL CE on WP7 Mango it is very easy to export your .sdf file and view the contents of the file inside of Visual Studio. Having this ability is very powerful because it can give the developers the ability to run analysis on their data or inspect their data at any time to ensure they are heading down the right path.

Hope this helps.

Till next time,

Using Ninject (with CommonServiceLocator) with Caliburn.Micro on WP7

Derik Whittaker — Fri, 08 Jul 2011 09:35:54 GMT

As I am in the process of rebuilding my Dimecasts.net WP7 application from the ground up to work with WP7 Mango one of the things I wanted to do was fully use the Caliburn.Micro framework. Caliburn.Micro has its own built in IoC container called the PhoneContainer which provides basic Dependency Injection and this container works great but I have a bit of history using Ninject with my Wp7 applications so I wanted to replace the usage of the PhoneContainer with my Ninject, or more precisely the CommonServiceLocator implementation of Ninject. I knew this had to be doable because there are examples of using MEF with Caliburn.Micro

Turns out I was right using Ninject w/ the CommonServiceLocator inside of Caliburn.Micro is doable and is very easy to boot. Of course before I set out to build my own implementation of this I decided to google for it and this post was about the closest I could find to working code, but this code was NOT complete, at least for the current CM implementation. Even though the post I found was not complete working code it was a great headstart in what needed to be done.

Here is how I got Caliburn.Micro to use Ninject as its IoC container.

Step 1: Register the setup bootstrapper that you want to use

You will need to open up your App.xaml file and put in the code below.

    <!--Application Resources-->
    <Application.Resources>
    	<local:NinjectBootstrapper x:Key="bootstrapper" />
    </Application.Resources>

Step 2: Create the a NinjectBootstrapper which inherits off of PhoneBootstrapper

Caliburn.Micor uses its bootstrapper to do some basic setup and configuration work. It is here that we want to extend this and add support for Ninject and the CommonServiceLocator. Go ahead and create a class as you see below.

public class NinjectBootstrapper : PhoneBootstrapper
{
    private NinjectContainer _ninjectContainer;

    protected override void Configure()
    {
        _ninjectContainer = new NinjectContainer(RootFrame);

        _ninjectContainer.RegisterDefaultBindings( typeof ( DashboardViewModel ), typeof ( IEventAggregator ) );
        _ninjectContainer.RegisterPhoneServices();

        var ninjectServiceLocator = new NinjectServiceLocator(_ninjectContainer.Kernel);

        ServiceLocator.SetLocatorProvider(() => ninjectServiceLocator);     
    }

    protected override object GetInstance(Type service, string key)
    {
        if (service != null)
        {
            return ServiceLocator.Current.GetInstance( service, key );
        }

        throw new ArgumentNullException("service");
    }

    protected override IEnumerable<object> GetAllInstances(Type service)
    {
        return ServiceLocator.Current.GetAllInstances( service );
    }

    protected override void BuildUp(object instance)
    {
        _ninjectContainer.Kernel.Inject(instance);
    }
}

Step 3: Implement the Ninject Setup logic

As you can see from step 2 I have created a class which actually performs all the direct Ninject setup and I called it the NinjectContainer. Below is the code for this container. You should also note 2 more things:

This container implements IPhoneContainer from Caliburn.Micro
In the RegisterPhoneServices method this is a very manual rebinding of Caliburn.Micro and it is likely that I missed something. This code was a direct port from the default implementation of the Caliburn IoC container setup.

public class NinjectContainer : IPhoneContainer
{
    private readonly IKernel _kernel;
    private readonly Frame _rootFrame;

    public NinjectContainer( Frame rootFrame )
    {
        _kernel = new StandardKernel();
        _rootFrame = rootFrame;
    }

    public event Action<object> Activated;

    public IKernel Kernel
    {
        get { return _kernel; }
    }

    public void RegisterWithPhoneService( Type service, string phoneStateKey, Type implementation )
    {}

    public void RegisterWithAppSettings( Type service, string appSettingsKey, Type implementation )
    {}

    public void RegisterPhoneServices(bool treatViewAsLoaded = false)
    {
        var phoneService = new PhoneApplicationServiceAdapter(_rootFrame);
        var navigationService = new FrameAdapter(_rootFrame, treatViewAsLoaded);
            
        Kernel.Rebind<IPhoneContainer>().ToMethod(x => this);
        Kernel.Rebind<INavigationService>().ToMethod(x => navigationService);
        Kernel.Rebind<IPhoneService>().ToMethod(x => phoneService);
        Kernel.Rebind<IEventAggregatorv().To<EventAggregator>().InSingletonScope();
        Kernel.Rebind<IWindowManager>().To<WindowManager>().InSingletonScope();
        Kernel.Rebind<IVibrateController>().To<SystemVibrateController>().InSingletonScope();
        Kernel.Rebind<ISoundEffectPlayer>().To<XnaSoundEffectPlayer>().InSingletonScope();
        Kernel.Rebind<StorageCoordinator>().To<StorageCoordinator>().InSingletonScope();
        Kernel.Rebind<TaskController>().To<TaskController>().InSingletonScope();
            

        var coordinator = Kernel.Get<StorageCoordinator>();
        coordinator.Start();

        var taskController = Kernel.Get<TaskController>();
        taskController.Start();
    }

    public void RegisterDefaultBindings( params Type[] typesToScanAssembliesFor )
    {
        // scan services
        Kernel.Scan(x =>
        {
            foreach ( var type in typesToScanAssembliesFor )
            {
                x.FromAssemblyContaining( type );
            }
                
            x.Where(type => type.Name.EndsWith("Service"));

            x.BindWithDefaultConventions();

            x.InSingletonScope();
        });

        // scan the rest
        Kernel.Scan(x =>
        {
            foreach (var type in typesToScanAssembliesFor)
            {
                x.FromAssemblyContaining(type);
            }

            x.Where(type => !type.Name.EndsWith("Service"));

            x.BindWithDefaultConventions();
        });
    }
}

Step 4: Hit F5 and see the fruits of your effort

Now if we did everything right your application should not be able to be run and Caliburn.Micro and Ninject (and CSL) as its IoC container.

As you can see you can swap out the built in IoC container w/ Ninject inside of Caliburn.Micro with almost no effort. I hope this helps and others enjoy.

Till next time,

Missing Method Exception w/ Caliburn.Micro when using INavigationService

Derik Whittaker — Mon, 09 May 2011 12:40:07 GMT

As I continue to build out a WP7 application using Caliburn Micro I ran into a odd error. When trying to inject the INavigationService I would get a ‘Missing Method’ exception as shown below:

When I first started to look at the error it did not make any sense. Everything appeared to be in order, but of course there had to be something wrong. lets take a look at what was wrong and how to resolve it.

When building out a WP7 app using Caliburn.Micro when you let the Visual Studio template the template will create a ‘framework’ folder for you. This framework folder has some killer code in it, but be careful because much of what is generated here also lives in the Caliburn.Micro namespace (in fact all this code may be duplicated, but I am too new to the framework to know for 100%).

The first thing I did when setting up my application is to add the following method to my PhoneContainer.cs class (this is based on a few example projects I have seen)

public void RegisterPhoneServices( bool treatViewAsLoaded = false )
{
    RegisterInstance( typeof( Caliburn.Micro.INavigationService ), null, new FrameAdapter( _bootstrapper.RootFrame, treatViewAsLoaded ) );
    RegisterInstance( typeof( Caliburn.Micro.IPhoneService ), null, new PhoneApplicationServiceAdapter( _bootstrapper.PhoneService ) );
    RegisterSingleton( typeof( IWindowManager ), null, typeof( WindowManager ) );
    RegisterSingleton( typeof( IEventAggregator ), null, typeof( EventAggregator ) );
}

The intent of the code above is to setup the IoC container with many of the default services I want to use from the framework. You will notice that in the first two I have prefixed the interfaces with Caliburn.Micro (which we my undoing as I will learn). The reason for this is that my project spans multiple dll’s and this was how I could get it to compile.

When I would try to run this code:

var instance1 = container.GetInstance( typeof( DashboardViewModel ), "DashboardViewModel" );

This when I would get the missing method exception from above. After about 10 minutes of looking at this code and trying a few different things I knew for a FACT that the error was due to the usage of the INavigationService interface, now just to understand what the root cause was.

As I went back to the location where I register the interface it downed on me. What is the namespace of the ‘FrameAdapter’ object? Of course it was NOT Caliburn.Micro…hum could this be the cause. Turns out it was. When I prefixed FrameAdapter to look like below

RegisterInstance( typeof( Caliburn.Micro.INavigationService ), null, new Caliburn.Micro.FrameAdapter( _bootstrapper.RootFrame, treatViewAsLoaded ) );

Everything now worked as expected. The moral of the story is this. If you are going to use this awesomeness which is Caliburn.Micro either use the libraries from the Caliburn.Micro.dll or DON’T. Do NOT mix apples and oranges.

Till next time,

P.S. I am sure I am really doing something wrong in general w/ Caliburn.Micro but hey that is how you learn right

Update Error 800705B4 for WP7

Derik Whittaker — Tue, 19 Apr 2011 20:20:15 GMT

So today was the first day I was able to get the NoDo update for my Samsung Focus so of course I wanted to update my phone ASAP, but…..

When I ran the update I received the following error:

When I googled for this error (along w/ bitch about it on twitter) I found the following link http://support.microsoft.com/kb/2484484#800705B4 .

I tried step 1 which is remove all the history but that did not work

I tried step 2 which was to remove some apps, I removed like 20 apps, but that did not work

I then tried step 2 again but this time I removed ALL developer built apps off the phone (this phone is developer unlocked)…this WORKED.

If you find our self having issues and are getting this error AND your phone is developer unlocked try removing ALL developer builds from the phone. This solved my problem.

Now back to work.

Till next time,

Using Binding to create Panels/Pivots in your WP7 Application

Derik Whittaker — Tue, 19 Apr 2011 10:19:00 GMT

If you are building a Windows Phone 7 application it is very likely that you are going to incorporate either the Panoramic or Pivot layouts in your app. In most cases when you are building these your panels/pivots are fairly static. However, what do you do when the number of panels/pivots needs to changed based on environmental setting (ie data or user preferences)?

One solution is to use the code behind and manually create your panels/pivots. However, I personally feel this method is clunky and fugly. I would rather stay as close to the MvvM pattern as possible as well as harness the power of Binding to build my UI on the fly based on values inside my view model. In this post we are going to take a look at how simple it is to bind your View Model to your UI and have your panels/pivots built for you.

Create the View Model’s to Bind to the UI

Main View Model – This is the one bound directly to the UI

    public class DashboardViewModel : ViewModelBase
    {
        // This is an internal class and does not change the implementation...
        private readonly IDashboardService _dashboardService;

        public DashboardViewModel( IDashboardService dashboardService )
        {
            _dashboardService = dashboardService;
        }


        public string Title 
        {
            get { return _dashboardService.DashboardTitle; } 
            set 
            { 
                _dashboardService.DashboardTitle = value;
                RaisePropertyChangedEventImmediately( "Title" );
            }
        }

        public ObservableCollection PanelCollection
        {
            get { return _dashboardService.PanelItems; }
            set
            {
                _dashboardService.PanelItems = value;
                RaisePropertyChangedEventImmediately( "PanelCollection" );
            }
        }
    }

In the class above there are 2 properties we need to know about.

Title – This is the property in the VM which will create the actual title for the entire Panorama control
PanelCollection – This is the property in the VM which contains the list of items which will be used to generate each panel/pivot in the UI

Panel View Model – These are the ones which will build each panel/pivot

    public interface IDashboardPanelItemViewModel
    {
        DashboardPanelType DashboardPanelType { get; set; }

        string DashboardTitle { get; set; }

        ObservableCollection<IDashboardPanelListItemViewModel>: PanelListItems { get; set; }
    }

In the class (actually it is an interface) above there are 3 properties we need to worry about

DashboardPanelType – This really does not change how the panels are bound to the UI but rather is used to determine how the actual panel data is displayed (future post on this)
DashboardTitle – This is the property which will create the text title for the panel/pivot
PanelListItems – This is the property which will contain the individual data points which will be displayed on the created panel/pivot

Create the xaml to hookup the binding

When binding the Main View Model (the first class above) to the UI we need to do 2 things

Need to bind our main View Model to the Panorama (or PIvot)
Need to bind the individual list item from the element in PanelCollection to the panel

When looking at the 2 snippets above you want to pay attention to the ItemsSource Property in both.

The End Result (bit fugly, but this is for demo only)

As you can using Binding to create your panels/pivots based on the data in your view model is super simple and requires NO code behind code to accomplish. Please be aware though that you should NOT generate too many panels/pivots as that is a massive UI design smell.

Till next time,

Adding Runtime Intelligence to your Windows Phone 7 Application

Derik Whittaker — Thu, 31 Mar 2011 11:07:51 GMT

When building any type of application which is going to be deployed to the masses it is always important to know and understand how your application is being used in order to make more informed decisions on how to maintain or extend your application. When it comes to adding in runtime intelligence into your application the team over at PreEmptive (the same folks that make Dotfuscator) have a killer product that is dead easy to use and gives you great results.

Lets get started and take a look at how to add Runtime Intelligence into your application

Step 0 - Getting up and running:

In order to add this runtime intelligence into your application you will need to download the WP7 Edition of Dotfuscator and have it installed. Once you have it installed you will want to create a new project. After the new project is created the area in the app we are going to focus on is found on the Instrumentation Tab. The screenshot below shows this tab in action.

Step 1: Adding the ApplicationAttribute

In order to identify your application to the RuntimeIntelligence portal you must provide your application an ApplicationAttribute. This should be placed on your main runtime exe/dll (your UI project for WP7). Here is how we can do this.

Right click the main dll in the Instrumentation Screen as such:
Choose Add Attribute and then select the PreEmptive.Attributes.ApplicationAttribute and click ok
Provide the details of your application:
1. For Application Type you can put anything you want there, I just like putting the platform
2. For Guid click the ellipse and it will grab the GUID off your selected dll to use
3. For Name provide anything you want to identify your application
4. For Version this can be anything, I started with 1.0.0.0

Step 2: Adding the BusinessAttribute

In the step above we provided an attribute which identifies your application in the portal, this time we need to provide an attribute which identifies the app again, but this time from the perspective of your company and your license with PreEmptive. Here is how we do this.

Right click the main dll in the Instrumentation Screen as such:
Choose Add Attribute and then select the PreEmptive.Attributes.BusinessAttribute and click ok
Provide the details of your business:
1. For CompanyKey provide the GUID which is provided to you from the http://wp7.runtimeintelligence.com/ portal (not that in this screenshot I did not provide the real key). If you do not provide a valid key you will get the following runtime/compile error - Attribute validation error: The BusinessAttribute on assembly [Assembly name goes here] must have a valid company key.
2. For CompanyName provide the name of the company

Step 3: Adding the SetupAttribute

Once we have the Application and Business Attributes setup in order to ID your product we now must create a setup attribute. This SetupAttribute is an instrumentation time attribute for methods. This attribute can be used to guide Application Analytics instrumentation. This is REQUIRED and you will get an error if you do not have this setup. Here is how we do this.

Find the entry point in your application. For a WP7 application that will be in the App.xaml.cs file and you want to attach to the Application_Launching method. Once you have found this method right click and and add an attribute as such:
Choose Add Attribute and then select PreEmptive.Attributes.SetupAttribute and click ok:
Provide the details:
1. For CustomEndpoint click the ellipse and choose the WP7 endpoint
2. For ExtendedKeySourceOwner click the ellipse and find the entry point into your WP7 app.
3. For InstanceIdSourceOwner click the ellipse and find the entry point into your WP7 app.
4. Make sure the UseSSL is set to true

Step 4: Adding the TeardownAttribute

In the same manor we needed to create a Setup Attribute we need to setup the TeardownAttribute. The TeardownAttribute is an instrumentation time attribute for methods. This attribute can be used to guide Application Analytics instrumentation. This will be used to tell the portal that your application has been closed. This is REQUIRED and you will get an errorif you do not have this setup. Here is how we do this.

Find the exit point in your application. For a WP7 application this can be in the App.xaml.cs file and you want to attached to the Application_Closing method. Once you have found this method right click and add an attribute as such:
Choose Add Attribute and then select PreEmptive.Attributes.TeardownAttribute and click ok:
Provide the details (well in this on you can leave all the defaults if you want)

Step 5: Adding a Feature Tracking Attribute

Ok, so we have done all the upfront busy work to enable us to get to this point. The main point of adding intelligence is to do things like track feature usage or to enable performance tracking. We will focus here on how to create feature tracking.

Find an point/feature in your application which you want to track. In our case we are going to track each time that a video is played so we are going to find the ‘HandlePlayEpisode’ method and right click this to add a new attribute as such:
Choose Add Attribute and then select PreEmptive.Attributes.FeatureAttribute and click ok:
Provide the details

In this example we do not care about extended key values (these are custom data points which can be sent with your messages to give more context)
1. Set the FeatureEventType to Tick (which is the default)
2. Provide a Name, this is required and should be unique. I have a convention I follow in order to allow the names to be searchable and consistent.

Step 6: Rebuild your .Xap with the analytics

Once you are done building your .xap you can then decompile the application via Reflector or what ever and take a look at the code which is injected via the PreEmptive process.

Step 7: Log into the WP7.Runtimeintelligence.com portal and see your information

There you have, the 7 steps needed to go from 0 to runtime intelligence. Adding this information is not difficult and can yield great information on how your application is being used in the field by REAL users.

Till next time,

How to Capture User Signatures on WP7

Derik Whittaker — Fri, 25 Mar 2011 10:41:26 GMT

Since the iPhone came out a few years ago the idea of using a stylus on a cell phone to perform any type of input action as become ‘old school’. Steve Jobs once said that if your phone uses a stylus you are doing it wrong (which by the way if I remember he was taking direct aim at Windows Phone 6.5… and rightfully so).

As much as I agree that you should be able to interact with a phone with simply your fingers a stylus has one advantage in ONE area, signature input capture (or simply drawing). Of course you can use your finger to draw/create a signature but a stylus simply makes it easier as we are more accustom to using a pen not our fingers for these things. In this post I will walk though how we can capture user drawing/signature input on the WP7 platform and turn this input into a signature.

Step 1 – How to capture the signature

Create a Canvas Control and place it on your form
Hookup the following 3 events on the canvas
1. ManipulationStarted
2. ManipulationCompleted
3. ManipulationDelta

Create the logic to handle the 3 events we just registered

Pre-Event Setup Code

	private Polyline _lineBeingDrawn;
	private IList<ilist<point>> _points = new List<ilist<point>>();

ManipulationStarted

// Here we want to start our new line for drawing and we want to 
// add the polyline as a child item to the SignatureCanvas.
_lineBeingDrawn = new Polyline
	{
	        Stroke = new SolidColorBrush(Colors.Orange),
        	StrokeThickness = SignatureStrokeThickness,
        	Points = new PointCollection { new Point(e.ManipulationOrigin.X, e.ManipulationOrigin.Y) }
	};


SignatureCanvas.Children.Add(_lineBeingDrawn);

ManipulationCompleted

// Here we want to simply add the points information to the list of points we
// are capturing in order to redraw this later if needed.
_points.Add(_lineBeingDrawn.Points);

ManipulationDelta

// Here we are adding new points to the PolyLine we created and added as a child 
// in the Started event above
_lineBeingDrawn.Points.Add(new Point(e.ManipulationOrigin.X, e.ManipulationOrigin.Y));

Step 2 – How to redraw the signature on the screen
After we hooked up the events above we should be able to not only draw on the canvas but we should also be storing the points for each movement into our _points collection. Given this fact we can redraw the image on a clean canvas with very little effort. The code below will show how to redraw the signature.

// We want to loop through the list of points we have been creating.  With each outer element in the list
// we create a new Polyline and then loop though each segment of that point.
// When we are done with the segments we simply add the PolyLine to the canvas
foreach (var segment in _points)
{
    _lineBeingDrawn = new Polyline
    {
        Stroke = new SolidColorBrush(Colors.Brown),
        StrokeThickness = 3.00,
    };


    foreach (var point in segment)
    {
        _lineBeingDrawn.Points.Add(new Point(point.X, point.Y));
    }

    SignatureCanvas.Children.Add(_lineBeingDrawn);
}

Step 3 – How to create an image from the signature
Now that we have been able to capture the signature and redraw it how do we save the information to a bitmap? Well this is a bit more work (and this code is courtesy of one of my awesome XAML developers on my mobile team so I take NO credit, just blame for this) but is not all the hard.

var group = new GeometryGroup();
Path path = new Path()
                {
                    Stroke = new SolidColorBrush(Colors.Black),
                    StrokeThickness = SignatureStrokeThickness,
                    Data = group
                };

foreach (var segment in _points)
{
    Point? startPoint = new Point?();
    for (int pIndex = 0; pIndex < segment.Count; pIndex++)
    {
        var point = segment[pIndex];
        if (pIndex == 0)
        {
            startPoint = point;
        }
        else if (startPoint != null)
        {
            var geometry = new LineGeometry
                                {
                                    StartPoint = startPoint.Value,
                                    EndPoint = point
                                };
            group.Children.Add(geometry);
            startPoint = point;
        }
    }
}

path.Measure(SignatureCanvas.DesiredSize);
path.Arrange(new Rect(new Point(), path.DesiredSize));

//fill white background
{
    Path backgroundPath = new Path()
                                {
                                    Fill = new SolidColorBrush(Colors.White),
                                    Data = new RectangleGeometry()
                                                {
                                                    Rect =
                                                        new Rect(0, 0, bitmap.PixelWidth,
                                                                bitmap.PixelHeight)
                                                }
                                };
    bitmap.Render(backgroundPath, null);
}

bitmap.Render(path, null);
bitmap.Invalidate();

//convert to binnary array
MemoryStream imgStream = new MemoryStream();
bitmap.SaveJpeg(imgStream, bitmap.PixelWidth, bitmap.PixelHeight, 0, 100);
byte[] bitmapData = imgStream.ToArray();

As you can see creating the ability to not only capture signatures (or simply user input) and then converting the data into a bitmap is NOT hard but it does take a bit of effort. Hope this helps someone.

Till next time,

Observations of Microsoft Testing WP7 Applications

Derik Whittaker — Thu, 17 Mar 2011 12:31:34 GMT

Everyone should know that when you submit an application to Microsoft for ingestion into their marketplace the application is test by a real person on a real device. However, one thing I did not expect is that they would test the application on multiple devices.

As I am waiting for the next release of our enterprise application to be accepted into the marketplace I was looking at our data usage logs on our servers and noticed the fact that they are testing with various devices (trust me I know it is MS testing rather than one of my internal users).

Below are a list of the devices that they appear to be using for testing

T8788 – This is the Samsung Omnia 7

LG-C900 – This is the LG C900

SGH-i917 – This is the Samsung Focus (which was the only device there were testing on a few weeks ago)

MWP6985 – This appears to be the HTC Pro

I know this post is really not that useful other than to point out that Microsoft is attempting to do good, multi-device testing on applications prior to certifications.

Till next time,

P.S. As a side note, not only are they testing on multiple devices they are also going into and out of the application MANY times.

Dimecasts.net WP7 Application has been released

Derik Whittaker — Tue, 01 Mar 2011 13:43:00 GMT

I am super pumped to announce that today I received word from Microsoft that the Dimecasts.net Windows Phone 7 application has been released.

If you have a WP7 and you are a fan of Dimecasts.net then please download and install the app. This is the first release and more than anything is ‘get it out there’ release in order to start to get feedback. Please let me know what you think about the app, feedback is encouraged.

Till next time,

How to Obfuscate your WP7 application via nant and build scripts

Derik Whittaker — Tue, 22 Feb 2011 19:27:39 GMT

If you are building a WP7 application you really, really need to look into obfuscating your .xap prior to submission. For the time being PreEmptive is giving away a license of their Dotfuscator for WP7 usage. Running the tool via the UI is simple and easy, I want to obfuscate our .xap EVERY NIGHT via our build process.

The real good news for us is that PreEmptive has made this process very easy, check out the online docs for how. What I have done is wrapped this in a very simple Nant script to help everyone along.

Step 1 – Install Dotfuscator for WP7

Step 2 – Setup your Nant Script

Things to pay attention to in the script above (sorry it is an image, XML does not work too well in my blog)

The path to dotfuscator may be different for you
The name of your configuration file may be different. (note that I ran the UI to build the .config first)
You may want to switch out the command line switches

Step 3 – Run the Nant script from the command line

c:\Path to Nant\Nant\nant.exe -buildfile:build.xml obfuscate.Mobile.xap

As you can see running Dotfuscator from the command line is cake and with this you can now obfuscate your .xap’s on your build server.

Till next time,

Index was outside the bounds of the array when Obfuscating a LARGE WP7 application

Derik Whittaker — Tue, 22 Feb 2011 18:14:00 GMT

This is a follow up to my prior post on how to obfuscate a WP7 application, which is really just a call out to Bil’s post.

While trying to get a large (when I say large it takes 2+ hours just to obfuscate) WP7 application ready for publication I ran into an error while trying to obfuscate our entire .xap. The error was

Writing XAML: Phone.Controls.g.resources\themes/generic.xaml
Index was outside the bounds of the array.
Build Error.

No of course this error did NOT lead me to a solution so I tried a whole sort of changes to see if I could resolve it. What I did find is that I could obfuscate each assembly on its own, but not the entire .xap. Because I was getting desperate, and twitter was no help, I decided to email support at PreEmptive. In my email I provided them with my full build log.

Well, less than 24 hours later I received an email from their support with a few suggestions. I tried the suggestions below as suggested:

1. From the input tab: make sure that all third party assemblies within the XAP package have been marked as “Artifact”. (Right click on the third party dll and select “Exclude Assembly from Package”). This will instruct Dotfuscator to obfuscate/instrument only non-third party libraries.

2. From the settings tab: to start, enable “Control Flow” and “String Encryption”, and disable “Renaming” (i.e. set Disable Renaming to “Yes”).

3. If the XAP file is signed, you can provide a Certificate file by selecting the XAP file from the input tab, and selecting the properties

After doing this I was able to get my app obfuscated and loaded onto my emulator. I even went and ran it again but this time turning String Encryption back on and it still worked. Looks like the trick was to remove the 3rd party assemblies from the list of assemblies to scan, which makes sense.

Anyway, the moral of the story is that when obfuscating your WP7 application make sure you omit any 3rd party assemblies and you should be right as rain.

Till next time,

Installing the January WP7 Developer tools

Derik Whittaker — Wed, 09 Feb 2011 13:20:15 GMT

If you are in the process of trying to upgrade to the January WP7 tools and you are running the WindowsPhoneDeveloperResources_en-US_Patch1.msp package make sure you have closed down your emulator.

I have found that when I had my emulator up and running the installer would launch, run for a second then close w/ no message. When I closed down the emulator and re-ran the package it ran and completed correctly.

It is possible this is just my experiences during this install, but I thought I would share this in case someone else out there was wondering why the installer is starting and stopping without any messages.

Till next time,

Early (aka Alpha Version) of the Dimecasts.net WP7 Application

Derik Whittaker — Fri, 31 Dec 2010 19:13:12 GMT

I have been working on and off on my WP7 application for dimecasts.net, in fact I have started and scrapped at least 3 versions of this application. However with a extended vacation this past week I finally was able to give it some real love.

I have decided to post a very early (aka VERY ALPHA version) of the application for everyone to download. If you would like to grap this you can get it here. Right now this application does not hit any web services to get updates on data (still in the works), is lacking a few small features (aka bugs) and is not the final UX styling I am going to use.

Here is a few screenshots of the application as it sits right now.

Please download the application and let me know your thoughts.

Till next time,