Derik Whittaker : HowTo, XAML

How to setup a clean error message when your Metro Application does not support Data Sharing

Derik Whittaker — Sun, 09 Oct 2011 11:54:00 GMT

When building a WinRT/Metro application one of the key integration points between your application and others is to allow Data Sharing via the Sharing Contracts. By default applications DO NOT support sharing and when a user taps on the Share Charm they will see an error similar to the following.

This message is NOT that user friendly and should be avoided. Besides what good does a screenshot of your application really do anyone .

If you are explicitly not going to support sharing from a given view in your application you should provide the user a little better message telling them this, fortunately setting this up is a piece of cake.

To setup this clean user friendly message we simply need to do 3 things

Grab the DataTransfer Context for the current view

Add the following using clause : using Windows.ApplicationModel.DataTransfer

Grab the context as : var dtm = DataTransferManager.GetForCurrentView();

Setup the event to handle the DataRequested event

Wire up the DataRequested event as: dtm.DataRequested += OnDataRequested;

Populate the failure message in the Share Panel with our user friendly message

Inside your event handler do the following:
args.Request.FailWithDisplayText( "Data Sharing Not Supported at this time" );

The args object is of course the EventArgs which is passed into your event handler.

One thing to pay attention to is that the amount of text which can be displayed is very short. If you provide a value which is too long the value will be truncated and the … will be appended to the end.

Now that we have enabled our view to display a friendly error message when someone tries to invoke the share we should see something like the following;

(please not the … added to the message. This is what I was referring to above when I said it will truncate long messages)

Till next time,

Lighting up your C# Metro apps by Using the Settings Contract

Derik Whittaker — Wed, 28 Sep 2011 22:50:00 GMT

**** NOTE: This post is valid for the Developer Preview of WinRT and MAY change in later releases ****

If you have been paying attention to any of the Windows 8/Metro stuff that has come out sense BUILD you may have noticed that with Windows 8/Metro application developers can now easily light up their applications by enabling their apps to hook into the various system Contracts. These contracts include things like search, settings, file picker and app selection.

In this post we will walk though what is needed in order to integrate into the system settings panel in Windows8 and how to present your settings to your user in a manor which makes it feel like it is built into the application.

Few things before we get started. The Windows 8 UI design guidelines have a few things to say about Settings Panels

The settings panel should be contextual, meaning that the panel should change based on the active screen
The panel should be either 346 or 646 pixels wide
The panel should be able to be closed by the ‘light dismissal’ concept. Meaning that if someone touched off the panel it should close.
The panel should use smooth animations/transitions which mimic the look/feel of the native panel in Metro
The changed settings should take affect immediately, no waiting for a save or commit action.

Ok enough of what it ‘should’ do, lets move on to how to make it do these things. What exactly is it we need to do in order to enable our application to hook into the Settings API?

Step 1: Create the User Control you are going to use as your Settings Panel for the given page.

We will create our User Control and call it SettingsUserControl

Step 2: In the Xaml of your page which can trigger the Panel add the following

There are a few things in the above code (sorry it is a screen shot but the XAML was not rendering correctly).

local: SttingsUserControl – local is a xmlns alias to the full namespace of my SettingsUserControl
Margin=”0,0,-346,0 is needed to start the visual element off screen. It will transition on screen later
.Transitions is a way to setup the transition correctly
1. We use the RepositionThemeTransition which is a built in transition which allows you to avoid using a story board for your animation

Step 3: In the code behind, or better yet the View Model, configure the Panel so that it can be hooked into the Win8 Panel

pane = SettingsPane.GetForCurrentView();
var preferencesCommand = new SettingsCommand(KnownSettingsCommand.Preferences,
    (handler) =>
    {
        SettingsUserControl.Margin = ThicknessHelper.FromUniformLenght(0);

 }
);

pane.ApplicationCommands.Add(preferencesCommand);

Couple of things about the code above

By setting the margin you are triggering it to be visible
You do not need to manually enable the control to be visible.
To be a good citizen and to follow the guidelines you need to enable light dismissal and hide the control when the user presses off the control (see step 5)

Step 4: Run your application and open up the Setting Charm

In order to open up the Settings Charm all you need to do is call the following

Windows.UI.ApplicationSettings.SettingsPane.Show();

By calling the line above the pane will pop out and you should see a line which says 'Preference'. If you click on this you should see your user control slide into view.

Step 5: Enabling Light Dismissal

Handle the PointerPressed Event on the form which is visible
Check to see if the right margin is 0, if so reset it

private void LayoutRoot_PointerPressed(object sender, PointerEventArgs args)
{
     if ( SettingsUserControl.Margin.Right == 0 )
     {
          SettginsUserControl.Margin = ThicknessHelper.FromLengths(0,0,-346,0);
     }
}

As you can see the plumbing for showing a settings screen is not very difficult or lengthy.

Till next time.

Lighting up your C# Metro apps by Enabling Search–Part 3

Derik Whittaker — Mon, 26 Sep 2011 22:40:23 GMT

If you have been paying attention to any of the Windows 8/Metro stuff that has come out sense BUILD you may have noticed that with Windows 8/Metro application developers can now easily light up their applications by enabling their apps to hook into the system search mechanism. This post (and subsequent ones) will walk though how to enable this in your application.

Window 8 has enabled developers to hook into various system ‘Contracts’ such as Search, Sharing and Settings. Contracts are like agreements between Windows and one or more Metro style apps, called contract participants, to support some kind of user interaction. There is a contract for each type of interaction, like playing music from an application to a connected stereo, and the contract specifies the types of capabilities the participant has.

Enabling Search

In this post we will take a look at how your application can provide context sensitive suggestions to the search panel. Adding these suggestions can provide your user the ability to not have to type the entire search term in order to perform a search. It also provides a list of known keywords that your application can use which by default provides your user a higher level of confidence that the keyword they are searching on will return data.

How do we setup the ability to provide keywords to the Search Panel?

Step 1: Get the instance of the Current Search Pane

Add a reference to the Windows.ApplicationModel.Search Namespace.
Grab the instance of the pane by using the following syntax
SearchPane.GetForCurrentView()
Store the instance of this pane as a global variable/property

Step 2: Hookup your applications to the correct eventyo

Using the Pane instance you gathered in step 1, wire up the following event
1. SuggestionsRequested

Step 3: Build a list of keywords to provide as suggestions

In my code base I have a repository method which will parse a list of keywords and return them as a List<string>. One thing to pay attention to is that your string can only contain ONE WORD. I have tried this with multiple words and it does not appear to work. I don’t know if this is a Developer Preview limitation or if this is intended behavior but either way only put a single word per line in your search result list

Step 4: Handle the SuggestionsRequested Event callback

In the handler of your SuggestionsRequested event you need to push your list of suggestion keywords into the Requested args as follows

args.Request.SearchSuggestionCollection.AppendQuerySuggestions(suggestions);

Once you have pushed your list of suggestions into the SearchSuggestionCollection you should now see your suggestions in the search panel when searching on your application.

Till next time,

Setting the Initial Rotation in a C# Metro Application

Derik Whittaker — Sat, 24 Sep 2011 12:06:18 GMT

If you have started to play with the WinRT /Win8 developer preview bits you have noticed that there are several project templates to choose from:

Application
Grid Application
Split Application
Class Library
Unit Tests (finally they get the idea that testing is important)

One thing that you need to pay attention to if you pick the empty 'Application' Template is that by default the initial rotation of the UI is set to Portrait (this is true for the Developer Preview, may not be true in future builds). Having the UI set to Portrait is great if that is your intent, however I am going to speculate that most apps should start in Landscape mode.

Of course you can set the default or supported orientation for each view in your application, but you should also set the default orientation at the project level as well to avoid disorientating your user if it starts in one orientation and suddenly switches to another.

To change the default orientation in the application you need to do the following:

Find the Package.AppManifest file in your project and double click on it
Scroll to the very bottom of the page, look for the 'Initial Rotation' combo box
Change the initial rotation to the rotation/orientation you desire. In most cases I assume this will Landscape.

There you have it,this is how you set the default Initial Rotation for you C# Metro Application.

Till next time,

Convention Based View Model Location using Ninject in a MVVM/Silverlight Application

Derik Whittaker — Sat, 02 Jul 2011 11:23:53 GMT

***** UPDATE *****
If you would like to see a video on this topic check out Episode 194 @ Dimecasts.Net
*******************

When building out a Silverlight application (or WPF application for that matter) the MVVM pattern is the pattern of choice for most projects I am aware of. When using MVVM there is a sub pattern which is commonly used which is known as ViewModelLocator. The ViewModelLocator concept basically tries to handle the repetitive task of coupling the View with its ViewModel but doing so in a way which removes any manual coding and it just ‘happens’.

Now if you have done any research on the ViewModel Location I am sure you have run across countless other blog posts out there which explain how to implement in this code, and many of them are great. In fact here are a few which helped me down the path of creating the code I am going to talk about in this post

Simple ViewModel Locator for MVVM by John Papa (this is the post which really kick started this pattern)
Wiring up ViewModel Locator w/ Silverlight
MVVM and ViewModel Location
Another MVVM and ViewModel Location
Caliburn.Micro has an implementation
MVVMLight has an implementation

All of the above posts basically show how to implement this pattern in your application and from what I can tell all of them work and will do the job. However, none of those (minus the Caliburn.Micro) implementations fulfills the one requirement I want which is to totally remove the need to ‘wire’ the ViewModel up to your View if even via XAML. I want to remove this wiring from the XAML because in my mind this still leaves me hard wiring the relationship rather than using convention based wiring. One scenario in which the hard wiring could turn around and bite you is in the times where you rename the view and the view model. If you fail to update your wiring code in XAML you will receive runtime errors.

Here are a few examples:
John Papa’s Implementation

DataContext="{Binding Source={StaticResource VMLocator}, Converter={StaticResource VMIndexerConverter}, ConverterParameter=MainPageViewModel}"

ViewModelLocator’s Implementation

    <UserControl.Resources>
        <ViewModels:EditUsersViewModelLocator x:Key="viewModelLocator"  />
    </UserControl.Resources>
    <UserControl.DataContext>
        <Binding Source="{StaticResource viewModelLocator}" Path="ViewModel" />
    </UserControl.DataContext>

I wanted my implementation of toe ViewModelLocator pattern to NOT need to know anything about the actual View or the ViewModel either in the XAML or in the code behind. What I wanted as the following:

DataContext="{Binding Source={StaticResource VMLocator}, Converter={StaticResource VMIndexerConverter}}"

Now you may be looking at my XAML above and comparing it to the XAML from John Papa’s post and be thinking what is really different? The difference is in this segment of code ConverterParameter=MainPageViewModel In his example he ‘hard wires’ the ViewModel which is being used up to the page and I did not want to do that. I wanted to use a standard naming convention (right, convention over configuration) and allow my locator to determine the ViewModel based on the current View.

So how did I implement my ViewModelLocator pattern, well lets take a look.

Code for ViewModelLocator

public class ViewModelLocator
{   
    private static readonly IDictionary<type, type> s_viewModelCache = new Dictionary<type, type>();
        
    public Type GetViewModelTypeForView( Type viewType )
    {
        var viewModelName = ResolveViewModelName(viewType.Name).ToLower();

        // We are try to cache the types in order to remove the assembly scan hit, this is optional of course and 
	// you may not want or need this
	// One thing to point out here is that this code ASSUMES that your view and viewmodel classes are in the 
	//  same assembly.  if this is not true for your project this code will not work as expected.  We made this
	//  assumption because it is true in our project
        var foundViewModelType = GetExistingTypeFromCache(viewType) ?? (from type in viewType.Assembly.GetExportedTypes()
                                                                        where viewModelName.Equals(type.Name.ToLower())
                                                                        select type).FirstOrDefault();
    
        // this will throw a custom exception type, you can use your own if you want
        if (foundViewModelType == null) { throw new ViewModelTypeNotResolvedException(viewModelName, viewType); }

        // Add the found view and viewModel to the cache
        AddToCache(viewType, foundViewModelType);

        return foundViewModelType;
    }

    private void AddToCache(Type viewType, Type foundViewModelType)
    {
        if (!s_viewModelCache.ContainsKey(viewType))
        {
            s_viewModelCache.Add(viewType, foundViewModelType);
        }
    }

    private Type GetExistingTypeFromCache( Type viewType )
    {
        if (s_viewModelCache.ContainsKey(viewType))
        {
            return s_viewModelCache[viewType];
        }

        return null;
    }

    private string ResolveViewModelName(string viewTypeName)
    {
        var asLowerViewTypeName = viewTypeName.ToLower();

	// ***** Below is OUR product's current naming conventions, replace with your own if you want *****
        // check to see if the view ends w/ "View"
        if (asLowerViewTypeName.EndsWith("view"))
        {
            return asLowerViewTypeName.Replace("view", "ViewModel");
        }

        if (asLowerViewTypeName.EndsWith("usercontrol"))
        {
            return asLowerViewTypeName.Replace("usercontrol", "ViewModel");
        }

        if (asLowerViewTypeName.EndsWith("childwindow"))
        {
            return asLowerViewTypeName.Replace("childwindow", "ViewModel");
        }

        return string.Concat(viewTypeName, "ViewModel");
    }

    public static IDictionary<type, type> ViewModelCache { get { return s_viewModelCache; } }
}

Code for IndexConverter

public class IndexerConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    {
        Contract.Requires<ArgumentNullException>(value != null);

        var locator = value as ViewModelLocator;

        Contract.Assume(locator != null,
                        string.Format(
                            "The provided converter value was expected to be of type {0} but was provided as type {1} which is not acceptable for this converter",
                            typeof(ViewModelLocator).Name,
                            value.GetType().Name));

        var viewType = GetViewType();

        var viewModelType = locator.GetViewModelTypeForView(viewType);

	// We are using the ServiceLocator pattern which is wrapping Ninject
        var viewModelInstance = ServiceLocator.Current.GetInstance(viewModelType);

        return viewModelInstance;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
        
    // This does incur a perf hit by looking at the stack trace, but in 
    //  my opinion this hit is worth it compared to having to manually wire items up
    private Type GetViewType()
    {
        var stack = new StackTrace();

        return stack.GetFrames()
            .Select(f => f.GetMethod())
            .Where(m => m.Name == "InitializeComponent")
            .Select(m => m.DeclaringType)
            .FirstOrDefault();
    }

}

Code needed in your App.Xaml

<MVVMLib:ViewModelLocator x:Key="VMLocator" />
<MVVMLib:IndexerConverter x:Key="VMIndexerConverter" />

Code for the custom Exception ViewModelTypeNotResolvedException

public class ViewModelTypeNotResolvedException : Exception
{
    public string ViewModelName { get; set; }
    public Type ViewName { get; set; }

    // Commented this out because i do not want to be able to create this without the VMName or the VName
    //public ViewModelTypeNotResolvedException() {}

    /// 
    /// Will build an instance of the exception and push in a default message based on the viewModelname and view properties.
    /// *** This is the lazy way to create the message ***
    /// 
    /// The name of the viewModel which was not able to be created or found
    /// The type for the view we were trying to bind the VM to
    public ViewModelTypeNotResolvedException(string viewModelName, Type view)
        : base(string.Format("When trying to resolve the view model {0} it was not found in the same assembly as the view {1}", viewModelName, view.Name))
    {
        ViewModelName = viewModelName;
        ViewName = view;            
    }

    /// 
    /// Will build an instance of the exception
    /// 
    /// The name of the viewModel which was not able to be created or found
    /// The type for the view we were trying to bind the VM to
    /// 
    public ViewModelTypeNotResolvedException(string viewModelName, Type view, string message) : base(message)
    {
        ViewModelName = viewModelName;
        ViewName = view;
    }

    /// 
    /// Will build an instance of the exception
    /// 
    /// The name of the viewModel which was not able to be created or found
    /// The type for the view we were trying to bind the VM to
    /// 
    /// 
    public ViewModelTypeNotResolvedException(string viewModelName, Type view, string message, Exception innerException)
        : base(message, innerException)
    {
        ViewModelName = viewModelName;
        ViewName = view;
    }
}

As you can see the code needed for this is not that complicated or difficult to implement.

One thing to understand with this post, I am NOT saying that the other implementations are bad or they do not work. In fact I am saying the exact opposite, they all are great and they all work and I used all their implementations as baseline for my implementation. What I am saying as the other examples did not meet my EXACT needs.

Please take a look at the code and let me know where I went wrong or what your thoughts are.

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,

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,

Derik Whittaker : HowTo, XAML

How to setup a clean error message when your Metro Application does not support Data Sharing

Lighting up your C# Metro apps by Using the Settings Contract

Lighting up your C# Metro apps by Enabling Search–Part 3

Setting the Initial Rotation in a C# Metro Applicatio​n

Convention Based View Model Location using Ninject in a MVVM/Silverlight Application

How to Capture User Signatures on WP7

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

Setting the Initial Rotation in a C# Metro Application