xaml ninja » Xaml

Metro Controls – Jump Viewer

rich — Fri, 30 Sep 2011 18:23:49 +0000

After an amazing week at //Build, I’ve been busy playing with the new controls, which I have to say are fantastic! Ollie and I know the pain first hand when it comes to building a Silverlight TUI (Touch User Interface) it’s not a great story and IMHO the controls are not ready. I may still post my thoughts on this experience, I’ve been holding back as I really don’t want to be dragged into the Silverlight is DEAD! debacle and this post could be taken in this way, however it will give you context around why we are so pleased that there is a new story and that one is awesome. But while I think about posting my experiences of building TUI on slates running Win 7, I’ve been putting together notes on the controls and thought that these may be beneficial to others so my objectives are to walk through some of the new controls and peel the layers like an onion. So, we can then go deep on certain topics.

So without further ado please say a big HELLO! to the Jump Viewer which is currently my favourite control. The interactions are stunning and performance is awesome! Before I start to dig in we should take a look at the finished control. The first screen shot is of the Jump Viewer when it first loads up in its zoomed in state and the second screen shot is taken when we peform an inwards pinch gesture which zooms out and the semantic zoom kicks in replacing the view with higher level details so that we can easily jump to another position in the Grid.

Note:- there are some anti-aliasing issues that happen periodically, not sure why this happens but I will update the post when I know more.

For more background reading on semantic zoom check out the guidelines for semantic zoom and also the sample in the SDK.

What I really like about the Jump Viewer is that it uses composition, allowing you to simply wrap up other controls that you may have used previously in order to deliver an immersive experience when interacting with the visualised data. In order to build a better understanding of the control we need to look at the Xaml. Lets start by concentrating on the JumpView which is the part of the control that is activated when we zoom out.

I have added my notes into the Xaml and hopefully this is a better way of groking the Xaml rather than snippets and dialogue, this way you can copy and paste the Xaml into your app and retain the notes.

Below is an illustration of the above Xaml and how the composite parts fit together.

What is very cool is the new Wrap Grid which provides the ability to change the layout of Jump View in the code above I do this.

In order to change the layout of the grid we can simply change the number of Maximum Rows or Columns, for example changing this property to 1 will change the layout to look more like the standard search control in Metro. Therefore, a quick tweak with how many rows or columns you want means that you can change the experience depending on the content being visualised. I will cover off the Wrap Grid in a future post.

Next we need to look at the content part of the Jump Viewer.



    
    
    
        <--
           Data template used to display the data
        -->

As you can see the Content section of the Jump Viewer comprises another control, in this case a Grid View, which provides the horizontal scrolling experience. A new feature for Metro is the ability to apply a Group Style on both the List and Grid View controls which provide the ability to group the data if your data model supports it. I will go into more detail about Group Styles in a future post. For now what we should understand is that when providing a Group Style we need to ensure that we provide a data template that will visualise the data in the header template and we can change the orientation of the layout by changing the Stack Panel in the Item Container Style from Vertical to Horizontal.

The Grid View also needs a data template for the items and there is also another new layout control called the Variable Sized Wrap Grid which is being used to layout the items in the Grid View. Once again I am loving this new layout and I will talk in more detail about the control in a future post. The most important thing for now is to understand that like the Wrap Grid, we can change the orientation and the Maximum Rows Or Columns properties which effect the layout of the items in the Grid. Sweet!

You may have also noticed that I have commented out the Virtualizing Stack Panel, I had problems when I used this, not sure why this is and when I find out more details I will update the post.

Enjoy!

WP7Contrib – Bing Service Wrapper Part IV Location Simplified

rich — Tue, 23 Aug 2011 13:23:07 +0000

Based on feedback around my first post in this series of talking about how to use Location I thought that I would revisit how you can use this really cool bit of stuff in your app. When I first wrote the original post it was much more bare bones however, there were lots of unanswered questions when I did and could be taken out of context. Therefore I wanted to reiterate how easy it is for you app to incorporate Geo Location features and enhance the User Experience.

So, lets start off with some new code and how you can pretty much copy and paste this boiler plate code into your app and start to take advantage of Geo Location. Ollie has done some refactoring of the defined constructors making the implementation simpler. Which means; if you are not using Dependency Injection; or MVVM; or just want something very specific from the service, these new constructors will give you the ability to do just that.

The code below can be found in the BingMapsLocationDemo folder under spikes of the WP7C along with lots of other samples including the original code that exercises the Bing Maps Wrapper.

First, we need an instance of the BingMapsService.

this.bingMapsService =
    new BingMapsService("Your credentials id", "Your app id");

Next, we need to use our good friend the CriterionFactory that will do all the work required to generate the request that will be sent to the endpoint. There are a couple of flavours for Location, depending on what you want to do; for finding out the address of a GeoCoordinate you can use CreateLocationSearchForPoint; or for finding out the full address from a partial one you can use CreateLocationSearchForAddress.

var criterion =
    CriterionFactory.CreateLocationSearchForAddress(this.postCode.Text);

Finally, we need use Rx to perform the async call. Using the instance of the BingMapsService we call the method which in our case is SearchForLocationUsingAddress that takes the criterion created by the factory as a parameter.

this.bingMapsService.SearchForLocationUsingAddress(criterion)
        .ObserveOnDispatcher()
        .Subscribe(result =>
        {
         this.address.Text = result.Locations[0].Address.Locality;
         this.address.Text += Environment.NewLine;
         this.address.Text += result.Locations[0].Address.PostalCode;
         this.address.Text += Environment.NewLine;
         this.address.Text += result.Locations[0].Address.AdminDistrict;
         this.address.Text += Environment.NewLine;
         this.address.Text += result.Locations[0].Address.CountryRegion;
        });

Boom! Your done!

Hopefully, second time round this post is clearer and a far more succinct illustration of how to use the Location in your app. We will also continue to add some new projects into the Spikes folder to illustrate the other condensed constructors for Search, Imagery and Routes.

WP7 Contrib – Bing Service Wrapper Part I – Location

rich — Fri, 24 Jun 2011 14:31:13 +0000

This being the first post about the Wrappers I thought that we should break the ice with the most commonly used service. Location. Out of all of the services this is the simplest to call but also we would suspect the most widely used. When you combine this service with the device location based WP7C bits then you can build your geo location aware app and have it plotting to a map and moving in real-time, or you could be helping your user to find the location of an address.

In the sample for using the location service we tackle both of these scenarios.

So, I am going to jump straight in here and assume that you have either looked at the sample in the Spikes folder of the WP7 Contrib (WP7C) or you have some experience of using the Rest API provided by the Bing Maps endpoint. If you have not done this then I would suggest opening up the sample and taking a quick look at the Location View Model, its pretty straight forwards so you should be back in 10.

First off if you have not already created a project then you need too. If you are using MVVM and some sort of DI library cool, if not no worries. There are two different options provided by the Location Service from the Bing REST API; you can either use the Geo Coordinate Location of the device and pass this to the service in order to give you back a current address; or you can enter a location to find out what Geo Coordinate Location is.

If you are not already using the WP7C components in you app (shame on you J) then you need to add a couple of references in order to get this up and running, these include:-

WP7Contrib.Services
- BingMaps
- BingMaps.Model
- Location

These are the basic bits that you need to get your geo location app up and running. Once we have included those assemblies then we need to define the interfaces we want to use and the data objects that correspond to the location service calls.

First up we need to declare the private fields so let’s go ahead and do that

private readonly IBingMapService bingMapService;
private readonly ILocationService locationService;
private LocationRect boundingRectangle;
private GeoCoordinate currentDeviceGeoCoordinate;
private IDisposable currentLocationObserver;
private RelayCommand selectFindMyCurrentLocationCommand;
private RelayCommand selectFindGeoLocationFromAddressCommand;
private Address address;
private LocationData locationDataByPoint;

Next, we need to create a constructor for our VM. You will notice that not only am I using the ILocationService which is the WP7C’s Rx location component but we are also going to pass in a IBingMapService which is our wrapper that we will use to call the REST services. The other interfaces that I am using here are the navigation service and the logging component from WP7C.

public LocationViewModel(
INavigationService navigationService,
ILocationService locationService,
IBingMapService bingMapService,
ILog log)
: base(navigationService, log)
{
this.locationService = locationService;
this.bingMapService = bingMapService;
this.address = new Address {CountryRegion = "UK", PostalCode = "LE17 5ER"};
}

Currently, and this is consistent across all of our samples we are using Funq as our DI framework of choice, its light and simple which is why it’s great for WP7, we are not bound to Funq in anyway so if you want to use your Favourite DI then you can do so.

With our constructor defined we need to go ahead and do our register and resolve in the bootstrapper.

There is quite a bit of stuff happening in the bootstrapper, mainly because of the fact that we are taking advantage of the different components inside of the WP7C, now you don’t have to use these however if you need things like logging; want to store data; and if you have a design where you are not loading all the VM’s upfront take a look at the Last Message Replay. As this is the first in a series of posts we can deconstruct what is happening here in the future articles I will only reference this section.

The code below setups the Logging bits for us.

this.Container.Register(c => new LoggingService("BingMaps"));
this.Container.Register(c => this.Container.Resolve());
var logManager = this.Container.Resolve();
logManager.Enable();

Here we setup the settings for the app and assign the key that we want to use for bing maps. The registered key in the code is registered to the WP7C so I would advise that you register, it does not take long and the key is generated instantly.

this.Container.Register(c => new SettingsStore(this.Container.Resolve()));
this.Container.Register(c => new Settings("Bing Key"));
var serialisationAssemblies = new List { this.GetType().Assembly };

Setup the cache provider and initialise it.

this.Container.Register(c => new  IsolatedStorageCacheProvider("BingMaps", serialisationAssemblies,  c.Resolve()));
var cache = this.Container.Resolve();
System.Threading.ThreadPool.QueueUserWorkItem(state => cache.PreemptiveInitialise());

Setup the last replay messenger.

this.Container.Register(c => new LastMessageReplayMessenger());

Setup the WP7C Navigation Service.

this.Container.Register(

c => new ApplicationFrameNavigationService(((App)Application.Current).RootFrame));

Setup the WP7C Network service

this.Container.Register(c => new NetworkMonitor(5000));

Setup the WP7C Storage service.

var assemblies = new List { this.GetType().Assembly, typeof(BaseModel).Assembly };
this.Container.Register(c => new StorageService(assemblies, c.Resolve()));

As we are using the Resource Client from WP7C we also need to add this setup code into our bootstrapper.

this.Container.Register(c => new UrlEncoder());
this.Container.Register(c => new ResourceClientFactory(c.Resolve()));

The final part is that we need to wire in the IBingMapService which needs to be resolved using some of the interfaces that we registered earlier.

this.Container.Register(c => new BingMapService(
c.Resolve(),
c.Resolve(),
c.Resolve(),
c.Resolve(),
c.Resolve()));

Ok, so we nearly have, all of the underlying plumbing done what we need to do next is to setup the VM locator. If you need more details on this please refer to the sample code. Once you have the VM locator updated we can go ahead and bind our Data Context up to the VM using the service locator pattern in Xaml.

As I mentioned at the start of this article, the UI’s are more about form and function, so our intentions are purely to visualise all the different types of data coming back from the service. So, for this we went with simple UI controls to make sure that the data being returned from our request is correct.

Now, that we have the plumbing in place, and some simple UI that displays the responses, our next step is to make our requests out to the Bing Services. This code is going to live in the VM.

The first thing on our list to implement is that we need to make our app location aware, everything you need to do this is already baked in the WP7C, it just requires a simple bit of Rx to get it wired in. In order to do this we need to leverage the ILocation Service that we injected into the VM as this will find out what our current location is.

private GeoCoordinate currentDeviceGeoCoordinate;
private IDisposable currentLocationObserver;
private void ExecuteSelectFindMyCurrentLocationCommand()
{
try
{
this.currentLocationObserver =
this.locationService.Location()
.ObserveOnDispatcher()
.Subscribe(geoCoordinate =>
{
this.CurrentDeviceGeoCoordinate = geoCoordinate;
this.SearchForLocation(this.BuildLocationSearchForPoint());
});
}
catch (Exception exn)
{
MessageBox.Show(string.Format("Failed! Message - '{0}", exn.Message), "Location Search",                MessageBoxButton.OK);
}}

Notice in the subscribe how we are assigning a value to the VM’s Current Device Geo Coordinate Property which is bound up in the view; also note that we are then doing a Search for a geo location and passing into this method the result from the Build Location Search For Point. We decided that in order for us to wrap up all the services and provide a common API from which users can use the services we would adopt a factory style pattern. So, what’s going on in the Build method? Well here we are calling out to the factory and asking it to create what we need in order to query the Bing services for dealing with the request.

private ILocationSearchPointCriterion BuildLocationSearchForPoint()
{
return CriterionFactory.CreateLocationSearchForPoint(this.CurrentDeviceGeoCoordinate);
}

And that is all you need to add location awareness to your app, I hope that you agree with me that this is rather straight forwards. Next up we need to build out the search for location method, which is going to use the Bing wrapper service from the WP7C to search for a location. If you have looked over the code you will see that we have 2 overloaded methods, one which deals with Geo Location and the other which deals with addresses.

private void SearchForLocation(ILocationSearchPointCriterion criterion)
{
this.bingMapService.SearchForLocationUsingPoint(criterion)
.ObserveOnDispatcher()
.Subscribe(this.ProcessSearchLocationByPointResponse,
FailedSearch,
CompletedSearch);
}

And for completeness I have included the code for the address mechanism below.

private void SearchForLocation(ILocationSearchAddressCriterion criterion)
{
this.bingMapService.SearchForLocationUsingAddress(criterion)
.ObserveOnDispatcher()
.Subscribe(this.ProcessSearchLocationByAddressResponse,
FailedSearch,
CompletedSearch);
}

Note that there are a couple of differences between the overloads; first the interface type that we are passing into our method for locations we always need to use the ILocationSearchPointCriterion and for addresses we need to use the ILocationSearchAddressCriterion; and the other difference is that we use a different method to deal with the response that we get sent from the Bing Services.

private void ProcessSearchLocationByPointResponse(LocationSearchResult result)
{
if (result == null)
{
return;
}
if (result.Locations.Count != 0)
this.LocationDataByPoint = result.Locations[0];
}

In order to successfully process the data and then work on this data the WP7C provides you with the data transformation classes that you need and does all the map and wrap code so that you don’t have to. In the code above this is illustrated by our use of the LocationDataByPoint property which uses the Location Data class from the WP7C, we are using databinding in the view and wiring up to this property from the VM .

So, just to recap what we have covered are a couple of things here; first we made our app Geo Location aware by using the WP7C Rx location service; which was then wired up to the Bing Services Wrapper and we used this to provide an address of the device’s current location; and for completeness we provide a way for the user to enter details of an address and the app responds with a Geo Location that corresponds to the address.

Admittedly we are doing some simple tasks here however its super important that we put in the ground work so that you can gain a deep understanding of how the wrappers work. We would really like to hear your feedback, if you have built an app using the Bing services we would also be interested in talking to you about your sceanrios.

In the next post I will dig into using the Route Service.

Ollie has some deep dive blog posts planned which are based around the patterns that he is using along with some gems of information around using Rx with these more traditional patterns so watch out for those.

Enjoy!

uk tech.days 2011

rich — Mon, 23 May 2011 12:31:12 +0000

This week Ollie and I will presenting at the UK tech.days happening in the Fulham, London.

Our first session will be all about building Data Data Intensive apps for WP7 and we are really looking forward to talking to you about what we have learnt building these types of applications. We are also going to show off bits from the WP7 Contrib that help to make building these types of applications easier. It’s going to be a demo packed session so hold on for a rollercoaster ride. We are making avaliable all our demos before the session so if you are attending and interested you can download these from the skydrive link at the bottom of the post.

My other session obviously will be about using Blend =P and the title of the session is aptly named “Expression Blend for Silverlight Developers”.

The session is broken down into 3 sub sections; designer developer collaboration; Blend quick fire tips; and the main part, building out an app from a Adobe Photoshop/Illustrator visual design into a functional Silverlight app. This session is aimed particularly at developers who are just starting out with Blend, however even if you have been using Blend for a while there should be plenty of refreshers.

Now, I had thought about doing

“… this is how I create a button in Blend, and oh look I can make it into a circle and bounce across the screen…”

as much as I love attending these sessions and love the buzz afterwards sometimes it can be difficult to relate the content to a problem you may currently be working on.

Up on skydrive you will find; the .psd file I am going to use; an unstyled version; and a completed version that is styled. There is still plenty more to do so the scope is open and hopefully you will be able to use this as a reference point for future apps that you build. Therefore, I thought that it would be an interesting idea to see how attendees if they so wished can use the session as a hands-on Blend training hour, and if you want to participate then you can. Otherwise you can sit back and watch how we build a static vector graphic into a functioning app.

If you are planning on attending and would like me to cover off anything in particular I will do my best to make it happen, otherwise I would be more than happy to chat during the event, if you can bring code or have a scenario that would really help me understand the context of your questions.

You can find all of the goodies up on the sky drive folder.

See you there!

WP7Contrib – Page Transitions and Navigation Service

rich — Mon, 21 Mar 2011 15:33:27 +0000

I finally got around to updating the page transistions in wp7 contrib last week, its something that has been on my list for awhile. For a complete sample project check out the sample in the spikes folder where you can also find lots of other samples illustrating other tennants of the contrib.

The transitions used in the WP7C are based around the great work of Kevin Marshall who originally created the transitions, we like them becuase they are lighter on memory usage and slightly faster when compared to the page transitions found in the WP7 toolkit. Now that is not too say I dislike the transitions in the toolkit, I actually really like them mainly because we have the ability to define these transitions in Xaml and hopefully there will be some future design-time support in Blend where we could run these transitions. Xaml support for the transitions is definately on the vNext list for the WP7C as we believe its important for designers to able to change, apply and understand the different transitions that are available.

When comparing implementation details, the toolkit uses a custom Frame called a Transition Frame; and WP7C does this at a page level all the pages in your app have to sub class the Animated Base Page. Other differences include; the toolkit uses a Render Transform and WP7C uses Composite Transform; the WP7C uses the XamlReader.Load to setup the storyboards, however the toolkit has specific loose Xaml files that contain the storyboards.

So the new page transitions includes the different Rotate permutations for your page transitions, I also added in some new slide and fade transitions. You can play with these and all the other different transitions by downloading the sample app.

The other thing that I decided to add into the app was a very simple implementation of the WP7C navigation service. Page transitions and navigation are interconnected, when you navigate to a page you want to execute a transition between the current page and the new page, this is approapiate when going forwards or backwards. Normally we would wire up the WP7C Navigation Service in the bootstrapper of our app and use a DI framework to new this up. In order to keep everything super simple I am using the interface and manually newing up an instance, also note that I am not using a View Model this is simply to show the flexibility of the WP7C Navigation Service.

private WP7Contrib.Services.Navigation.INavigationService navigationService;

public MainPage()
{
        InitializeComponent();

       AnimationContext = LayoutRoot;
       this.navigationService = new WP7Contrib.Services.Navigation.ApplicationFrameNavigationService(
                                   ((App)Application.Current).RootFrame);
}

Notice how we grab the RootFrame and pass this in to the constructor of the WP7C Navigation Service the same code can be used in a bootstrapper. When using the WP7C transitions there is no requirement for us to change the base class of the frame in the App’s Initalize Phone App handler like we would do when using the toolkit.

private void InitializePhoneApplication()
{
    if (this.phoneApplicationInitialized)
    {
        return;
    }

    // Create the frame but don't set it as RootVisual yet; this allows the splash
    // screen to remain active until the application is ready to render.
    this.RootFrame = new TransitionFrame();
    this.RootFrame.Navigated += this.CompleteInitializePhoneApplication;

    // Handle navigation failures
    this.RootFrame.NavigationFailed += RootFrame_NavigationFailed;

    // Ensure we don't initialize again
    this.phoneApplicationInitialized = true;
}

Instead we need to hang all our pages from the Animated Base Page, pay close attention to; the constructor where we assign the Animated Context of our base page to the LayoutRoot of our page; and the overridden Get Animation where we are deciding which transitions to fire based on the Animation Type.

namespace PageTransition
{
    using System;

    using WP7Contrib.View.Transitions.Animation;

    public partial class Slide : AnimatedBasePage
    {
        public Slide()
        {
            InitializeComponent();

            AnimationContext = LayoutRoot;
        }

        protected override AnimatorHelperBase GetAnimation(AnimationType animationType, Uri toOrFrom)
        {
            if (animationType == AnimationType.NavigateForwardOut)
            {
                return new SlideLeftFadeOutAnimator { RootElement = LayoutRoot };
            }

            if (animationType == AnimationType.NavigateBackwardOut)
            {
                return new SlideRightFadeOutAnimator { RootElement = LayoutRoot };
            }

            if (animationType == AnimationType.NavigateForwardIn)
            {
                return new SlideLeftFadeInAnimator { RootElement = LayoutRoot };
            }

            return new SlideRightFadeInAnimator { RootElement = this.LayoutRoot };};
        }
    }
}

For completeness I have covered off the different permutations of Navigating forward or backward. The implemented page transitions have a corresponding Animator which makes it straightforward to implement the type of animation that you require. And that is everything you need in order to get page transitions working in your app. Once you have implemented the transitions you want then its a fairly simple task of using the WP7C Navigation Service to navigate to a page in your app.

private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (AnimationList.SelectedIndex != -1)
    {
        switch (AnimationList.SelectedIndex)
        {
            case 0:
                this.navigationService.Navigate(new Uri("/View/Turnstile.xaml", UriKind.Relative));
                break;

            case 1:
                this.navigationService.Navigate(new Uri("/View/TurnstileFeather.xaml", UriKind.Relative));
                break;

            case 2:
                this.navigationService.Navigate(new Uri("/View/Continuum.xaml", UriKind.Relative));
                break;

            case 3:
                //slide right
                this.navigationService.Navigate(new Uri("/View/SlideRight.xaml", UriKind.Relative));
                break;

        }
    }
}

And we are done!

Couple of things to watch out for when implementing the page transitions

Make sure that you have the correct base url in you WMAppManifest.xml.
It should look something like this
```
      
    
```
Even if you have a sub folder which contains your Views
If you have already overriden the OnBackKeyPress handler remember to call the base implementation

If you have created transitions and happy to share or have ideas for ones you would like to see then please contact me.

WP7 Contrib – When messaging becomes messy and services shine

rich — Tue, 08 Feb 2011 16:58:58 +0000

In a previous post I introduced you to the Last Message Replay Messenger, in this post I wanted to dig into something that happened recently where I needed to provided the ability in the application for the user to add an item to a favourites list. Ok so fairly straight forwards, however there was a slight twist. Not only can the user add items to their favourites from a list but they can also add an item to their favourites list from a number of different places in the application. Each view has a different VM and we don’t want to chain the VM’s together as then they know about each other; we also don’t want to use the VM Locator from the Xaml and call the same relay command to perform the action; so on the surface this looks like a job for a messenger :-

Define the Message which wraps up the data
Add the IMessenger interface as a parameter in the VM constructor
Register the IMessenger interface with the Last Message Replay Messenger
In the originator register the type of message data your interested in with the Notification Message Action
In the VM which is interested in the message register for the Message defined in step 1
Provide a method that deals with the received messages and sets up the data context of the View

Now this works just fine when I want to pass data to disconnected lazy loading VM’s but I got into trouble when it came to stashing this content. The main reason is that it comes down to a level of responsibility which results in the question of who owns the data ? and who is responsible for storing the data ?

What I ended up with was a collection of favourites that were being managed by each VM that required their Views to have the ability; add to the favourites list and then fire a message broadcasting that here is the new favourite item which needs to be added into the favourites collection. Cool!

So all is cool now? Well sure until it comes to building out the persistence mechanism using the override Activate and DeActive methods that the VM Base provides us with in order to store the data. My next move was then to start changing the data inside of the Message to a collection of the same type, but this solution means that I now pass around a reference pointer to the collection in the message and each VM is then responsible for adding new items. The Favourites VM is then inherently responsible for persisting the collection. Ok so that gets us closer. Unfortunately, the Favourites Page and VM are not primaries in the user journey through the app therefore, there is a high potential that the user will not have viewed the Favourites Page resulting the Favourites VM not being instantiated and now things start to get sticky again….

At this point its time for a brew…. I could continue trying to bend the message pattern to fit our needs but its generating a large amount of friction when we try and push. This is where using a service makes far more sense. Now, if you chat to Ollie he will say well this is all about “ask don’t tell, Rich”. Therefore, moving to a more service style pattern similar to the one used in the service layer for our Apps results in those VM’s which need to use the favourites service have this injected during startup via the bootstrapper. Unlike our current situation where each VM has to register for the message. This gets us back into check with a single responsibility pattern. As the favourites service is now responsible for anything to do with favourites cleaning up the implementation code in the VM’s wanting to use the service. Sweet!

Now I really like this pattern as its super simple to implement and by taking advantage of IStorage and IStorageService which can be found in the WP7C not only do we have a simple pattern for sharing data and operating on that data, we also get the ability to stash this content into Isolated Storage.

The best way for me to show this off is to do a sample, so I am going to build on the sample from the previous post, its also in the spikes directory on Codeplex. What we are going to add to this is a favourites page, wired up to a Favourites VM, and a favourites service that has the ability for our user to do an add to favourites from the list (Main VM)and an add to favourites from the details page (Child VM).

First, up we need to create an interface, in my case its called IFavouriteSearch and it going to provide a service to retrieve the current collection of favourites, add a new favourite, query to see if the service already contains a particular favourite and also remove a favourite from the collection.

using ServiceStyleRatherThanMessengerStyle.Model;

using WP7Contrib.Collections;

/// 
/// The favourites service contract.
/// 
public interface IFavouritesService
{
        #region Properties

        /// 
        /// Gets Favourites.
        /// 
        ReadOnlyObservableCollection Favourites { get; }

        #endregion

        #region Public Methods

        /// 
        /// The add.
        /// 
        /// 
        /// The currently selected person.
        /// 
        void Add(Person person);

        /// 
        /// The is a favourite.
        /// 
        /// 
        /// The person.
        /// 
        /// 
        /// The is a favourite.
        /// 
        bool IsAFavourite(Person person);

        /// 
        /// The remove favoutite.
        /// 
        /// 
        /// The person.
        /// 
        void RemoveFavourite(Person person);

        #endregion
}

That’s the service defined.

Next up we need to define a concrete class called the Favourite Service which implements the interface, the important part to remember here is that we want to stash the collection to isolated storage in order to persist the selected favourites between sessions. In order to do this we can simply pass into the constructor the IStorageService interface, if you wanted to use the logging parts of WP7C then you can added this into the constructor parameter list.

public FavouritesService(IStorageService storageService, ILog log)
{
   this.storageService = storageService;
   this.log = log;
}

So this is the cool part, when we expose the favourites collection all we need to do is work out if we are rehydrating the collection for the first time from Isolated Storage and load up the collection in ISO, otherwise we new up a collection of the required type. Each piece of content that is stored into ISO has its own key, in my case its called favourites and its used as the Unique ID to retrieve the specified content. The code to Load from Storage is boiler plate and done once it’s a rinse and repeat style pattern.

/// 
/// Gets Favourites.
/// 
public ReadOnlyObservableCollection Favourites
{
   get
   {
      if (!this.loaded)
      {
         this.LoadFromStorage();
      }

       return new ReadOnlyObservableCollection(this.favourites);
   }
}

The management methods that operate on the collection we build out as normal and then decorate this code with the storage calls. These are rather easy to remember; once the collection has been updated then we make a call to write the list into ISO associated with our Unique ID, then we flush the storage buffer.

/// 
/// Adds a person to the favourites.
/// 
/// 
/// The currently selected person.
/// 
public void Add(Person person)
{
   if (person == null)
   {
      return;
   }

   if (!this.loaded)
   {
      this.LoadFromStorage();
   }

   if (this.favourites.Contains(person))
   {
      return;
   }

   this.favourites.Add(person);
   this.storage.Write(StorageKey, this.favourites.ToList());
   this.storage.Flush();
}

/// 
/// The is a favourite.
/// 
/// 
/// The person.
/// 
/// 
/// Returns true if the person is a favourite.
/// 
public bool IsAFavourite(Person person)
{
   if (person == null)
   {
      return false;
   }

   if (!this.loaded)
   {
      this.LoadFromStorage();
   }

   return this.favourites.Contains(person);
}

/// 
/// The remove favoutite.
/// 
/// 
/// The persoh.
/// 
public void RemoveFavourite(Person person)
{
   if (person == null)
   {
      return;
   }

   if (!this.loaded)
   {
      this.LoadFromStorage();
   }

   if (!this.favourites.Contains(person))
   {
      return;
   }

   this.favourites.Remove(persoh);
   this.storage.Write(StorageKey, this.favourites);
   this.storage.Flush();
}

Lets now take a look at the Load From Storage method.

/// 
/// The load from storage.
/// 
private void LoadFromStorage()
{
   if (this.loaded)
   {
      return;
   }

   lock (this.sync)
   {
      if (this.loaded)
      {
         return;
      }

      this.favourites = new ObservableCollection();
      this.storage = this.storageService.OpenPersistent(StorageKey);

      var favs = this.storage.Read>(StorageKey);
      if (favs == null || favs.Count == 0)
      {
         this.log.Write("FavouritesService: No favourites");
      }
      else
      {
         foreach (Person fav in favs)
         {
              this.log.Write("FavouritesService: Loading Person, hash code - " + fav.GetHashCode());
              this.favourites.Add(fav);
         }
     }

      this.loaded = true;
   }
}

When we need to read the collection we use the Storage service to setup the storage mechanism once this has been done happy days simply call the Read method telling what type is being rehydrated using the specified Unique key that was defined earlier. Iterate over what comes out and add it to our collection.

Now we need to be able to use the service so we head over to the bootstrapper and crank out some register and resolve calls for the service.

this.Container.Register(c => new LoggingService("LastReplayMessenger"));

this.Container.Register(c => this.Container.Resolve());

var assemblies = new List { this.GetType().Assembly, typeof(BaseModel).Assembly };

this.Container.Register(c => new StorageService(c.Resolve(), assemblies));

this.Container.Register(
c => new FavouritesService(c.Resolve(), c.Resolve()));

And that’s our service registered and resolved, our next step is to inject the favourite service into the VM’s that are going to be using it.

this.Container.Register(
c =>
new MainViewModel(
c.Resolve(),
c.Resolve(),
c.Resolve(),
c.Resolve()));

this.Container.Register(
c =>
new ChildViewModel(
c.Resolve(),
c.Resolve(),
c.Resolve(),
c.Resolve()));

A common scenario is that we have a View which provides an experience that allows the user to add items via a list. In my case I choose a context menu which was added to the data template used by the list box. In order to do this I created a Relay Command and wired this up to the context menu from the toolkit in the data template. There are two implementations that we need to implement here first we need to be able to trigger a command from inside the data template of the listbox.

/// 
/// The select add to favourites command.
/// 
private RelayCommand selectAddToFavouritesCommand;

/// 
/// Gets SelectAddToFavouritesCommand.
/// 
public RelayCommand SelectAddToFavouritesCommand
{
   get
   {
      return this.selectAddToFavouritesCommand ??
      (this.selectAddToFavouritesCommand = new RelayCommand(this.ExecuteAddToFavouritesCommand));
   }

   private set
   {
      this.selectAddToFavouritesCommand = value;
   }
}

/// 
/// The execute add to favourites command.
/// 
/// 
/// The person.
/// 
private void ExecuteAddToFavouritesCommand(Person person)
{
   this.favouritesService.Add(person);
}

And the other implementation is from an app bar button.

/// 
/// The execute add to favourites command.
/// 
private void ExecuteAddToFavouritesCommand()
{
   this.favouritesService.Add(this.CurrentlySelectedPerson);
   this.NavigationService.Navigate(new Uri("/View/FavouritesPage.xaml", UriKind.Relative));
}

Lets just quickly circle back, what we have done thus far is implement the required add to favourites functionality, but ultimately we also want to allow the user to view their favourites so next we need to create the page and the favourites VM remembering to add the new VM to the VM Locator.

The favourites VM.

/// 
/// The favourites view model.
/// 
public class FavouritesViewModel : ViewModelBaseWp7
{
    #region Constants and Fields

    /// 
    /// The favourites service.
    /// 
    private readonly IFavouritesService favouritesService;

    /// 
    /// The currently selected person.
    /// 
    private Person currentlySelectedPerson;

    #endregion

    #region Constructors and Destructors

    /// 
    /// Initializes a new instance of the  class.
    /// 
    /// 
    /// The navigation service.
    /// 
    /// 
    /// The messenger.
    /// 
    /// 
    /// The log.
    /// 
    /// 
    /// The favourites service.
    /// 
    public FavouritesViewModel(
        INavigationService navigationService, IMessenger messenger, ILog log, IFavouritesService favouritesService)
        : base(navigationService, messenger, log)
    {
        this.favouritesService = favouritesService;

        ThreadPool.QueueUserWorkItem(
            state => { this.MessengerInstance.Register(this, this.OnReceiveMessage); });
    }

    #endregion

    /// 
    /// Gets CurrentlySelectedCurrentlySelectedPerson.
    /// 
    public Person CurrentlySelectedPerson
    {
        get
        {
            return this.currentlySelectedPerson;
        }

        private set
        {
            this.SetPropertyAndNotify(ref this.currentlySelectedPerson, value, "CurrentlySelectedPerson");
        }
    }

    public ReadOnlyObservableCollection Favourites
    {
        get
        {
            return this.favouritesService.Favourites;
        }
    }

    #region Methods

    private void OnReceiveMessage(SelectedPersonMessage obj)
    {
        if (obj == null)
        {
            return;
        }

        if (obj.Person == null)
        {
            return;
        }

        this.CurrentlySelectedPerson = obj.Person;
    }

    /// 
    /// The is being activated.
    /// 
    /// 
    /// The storage.
    /// 
    protected override void IsBeingActivated(IStorage storage)
    {
    }

    /// 
    /// The is being deactivated.
    /// 
    /// 
    /// The storage.
    /// 
    protected override void IsBeingDeactivated(IStorage storage)
    {
    }

    #endregion
}

And the favourites page which has a listbox data bound to the favourites collection exposed by the VM.

And we are done!

One thing that I did add here is the Last Replay Message Messenger and data binding to the selected item in the listbox so that I can highlight the newly added favourite.

A quick recap on what happened

Create the interface for the service and expose what you need usually a collection and some management methods for managing the data
Create the concrete implementation adding in the IStorageService into the constructor
In the concrete add logic to rehydrate and stash your data
Update the constructor on the VM’s that need to have the add to favourites functionality
In the Bootstrapper register the new service and Resolve them in the VM’s
Create relay commands in the VM and View to trigger the actions
Create the favourites page and VM
Update the Bootstrapper and VM Locator with the new VM
Expose a property for the collection so that it can be bound to in the View
[Optional] use the Last Replay Message to inform the favourites VM about the currently selected person

What is very interesting about all this is that we so often when using a framework get familiar with a certain technique and this becomes fashionable and we try to use it everywhere and there is nothing wrong with trying out new ways of doing something. However, there also has to be a realisation that when we start getting friction trying to bend the framework api to do something that it was not really meant for its time to use something solves the problem better.

Interested in your comments and you can find the code up on codeplex.

PathListBox Adventures – radial layout

rich — Mon, 29 Mar 2010 11:13:45 +0000

The PathListBox ROCKS, if you have not heard of this control before then checkout Christians blog for more details and also his session at mix 10. The PathListBox solves some of the tricky issues related to creating custom panels for a ListBox or ItemsControl. Previously when we need custom layout of visual elements inside of these controls we would typically create a custom Panel and crank C# code and some positioning logic to layout the elements as we needed. However, with the introduction of the PathListBox we nolonger have to resort to building a panel and thus lowers the barrier to entry for designers who want to create custom layouts without having to be reliant on a developer to build the panel.

To get going with the PathListBox I wanted to create an simple Silverlight app which pulled back some results from digg, this is something which I have done in the past to illustrate the basics of MVVM in my session from PDC. While on the topic of MVVM its great to see that we now have an MVVM template inside of Blend that we can use. In this post I am not going to talk about the MVVM templates as I have only started out with them and so to give a comparison would not be justifiable at this stage, but I will posting an article when I have it straighten out in my head.

So for this first adventure I created a new MVVM Silverlight application and added a Model and a Service folder. As we already have the code for the digg service and the model created I copied these classes and moved them into their respective folders in the project. Open up the VM that has been added into the project and we can see that it implements INPC. The other thing to notice is that the constructor in parameter less, which is unlike my VM’s where I would normally inject an interface. So for the purposes of this example i am going to new up the interface inside of the constructor.

Ok so there are 3 steps that we need to perform in order to recreate the radial panel visual layout that is illustrated above. First we need to create our path on the design surface and then add the PathListBox to the design surface and associate the path with the PathListBox. As with a regular ItemsControl or ListBox we need to bind it to a list of items which in this case is our collection of FeedItems. Blend 4 Beta does quite alot of work for free, you will notice it has created the DataTemplate, ItemContainerStyle and ItemPanelTemplate which is rather nice. So here we start our 3 Steps and each step is associated with the templates and style.

First select the DataTemplate of the PathListBox either from the crumb bar or from right clicking in the objects panel. What we need to do here is add a ChangePropertyAction which fires when we LeftMouseButtonDown on to the DataTemplate so that we can set a flag on the data bound object so that it gets removed from the current list and added to second list. Once we have added this we need to change the RotateTransform on the StackPanel to 90.

Navigate back to the PathListBox and this time we want to edit the orientation on the items on the path so that they are OrientToPath and check the Wrap Items checkbox.

The second step is to move into our ItemContainerStyle for the PathListBox and change the VSM states so that we have a nice transition for the items when they are loaded and unloaded. With the release of Blend 4 Beta a new set of states have been added to the ListBoxItem. PathListBoxItem subclasses ListBoxItem and so we have the ability to modify the transitions for the BeforeLoaded and AfterLoaded states. For these I

simply changed the Opacity on the root element so that we can have a simple fade in type transition. Next we need to change the length of the transition in this case to 0.3 seconds, and change the easing function to your desired choice. The other changes I made here was to enable the Fluid Layout and turned on the design time layout transitions so that you can see your transitions during design time. Navigate back to the PathListBox.

The final piece to the puzzle is to change the ItemPanelTemplate. Edit the template either via the assets panel or the crumb bar. Here we are looking to add the FluidMoveBehavior on to our PathPanel which will be responsible for providing the animation effect for moving items between the two PathListBox’s.

The important things to note here include; we have selected the Children option from the AppliesTo dropdown as we want this particular FluidMoveBehavior to effect all the items in the ListBox; I changed the duration and also the easing functions that I wanted to use; I also selected the DataContext option from the Tag dropdown as I want to capture the data object associated with the item that is being animated. Navigate back to the PathListBox……

And we are done.

3 simple steps for you to add a radial panel layout into your project.

Change the data template so that it can handle a user interaction
Change the ItemContainerStyle BeforeLoaded and AfterLoaded States
Change the ItemPanelTemplate by adding in the FluidMoveBehavior

We also used ChangePropertyAction to manipulate the data in our collections exposed by the VM, and we used the FluidMoveBehavior to animate selected items from one PathListBox to another. The ability to do this without having to write any C# is a great step forwards, it does have some consequences but the advantages from my prospective outweigh the disadvantages.

The next thing that I want to do is animate each individual PathListBoxItem depending on where they are on the Path associated with the PathListBox.

All the code for this example you can find on my SkyDrive Folder.

MVVM, design time data, and Blendability

rich — Fri, 02 Oct 2009 08:44:15 +0000

With the introduction of design time data support in Blend I thought that I would try and take advantage of using design time data and MVVM. For a while now I have been using Ninject, with a Service Locator Pattern to provide the ability to build WPF and Silverlight apps in an MVVM pattern where I prefer to use a View first mechanism. There are a number of benefits from using this approach, one of the ones that we are good to drill to in this post is around Blendability of the controls that developers create. Prior to me using Ninject I would have a heavy reliance on the DesignerProperties IsInDesignMode call to check to see if the control was being render in Blend, as i would normally have to do something to stop the control from crashing and allow myself and the designer to use Blend in order for us to Style and Template the controls we created.

What we are going to cover here is the journey which i went on when adding support for design time data to my project, I really like it as the refactoring from the standard inbuilt mechanism in Blend to the final output is a nice series of steps that feel good.

The screen shot on the right shows the simple looking UI displaying contextual data in Blend allowing the designer to see how the control will look. I think providing the ability for your application to look exactly the same at design time as at run time is going to mean that you can produce better looking applications quicker as the designer is design the screens in the context of the data.

When first adding the design time data to your project Blend takes over control and this means that you need to use Blend to shape your design time data classes to match your data types used in the system. So if we were building a throw away prototype then I would agree this is the best way forwards, but when you are moving from prototype to production this does not really work. On of the reasons behind the research for this post is around the transition from prototype to production and even from sketch to prototype, once we have sign off from the client on a number of ideas and we want to start to build these out then there is a high potential one will become production quality and because of this its good to have the right architecture in place, so reshaping to MVVM early on will almost certainly cost your client less.

The Xaml below is what i put together to represent the shape of data that was in the mock classes. Blend then hooks this data up to the design time data context for you.

Xaml data for shopping cart

When the design time data shape matches your real data shape you can then go ahead and use the new d:DataContext Dependency Property and bind your design time data to this property.

Xaml Source code for the control

Nothing too tricky there, the new design time data context is the key to making all this happen, it also means that you can bind any sort of data you want to the design time data context to provide contextual data in Blend during design time. It was at this point that i started to think about how we can really bend the design time data features. My initial refactor was not a great result in that I ended up with 2 sets of mock data; one set of data would be used by the designers in Blend; and the second set of data would be used by the unit test, Not nice, management nightmare to ensure that both data sets are keep in sync.

So the goal was to provide design time data which was the same data used by the unit tests, meaning that we only have one data set to maintain and manage, allowing us to leverage the powerful features of design time data in Blend and also keeping our unit tests looking sweet, pleasing both the designers and the developers on the team.

In order to do this I needed to restructure the existing shape of my data classes that I use in my mock service layer classes, first I needed to change the OnCompleted method to be a virtual implementation and also the method which retrieves the data. This simple change means that we can now provide two mock services that can be injected in.

Refactored mock service class with new virtual methods

    using System;
    using System.Collections.ObjectModel;

    public class MockShoppingCartService : IShoppingCartService
    {
        public event GetShoppingCartCompletedHandler GetShoppingCartCompleted;

        public bool LoginToShoppingCart(string username, string password)
        {
            throw new System.NotImplementedException();
        }

        public virtual void RetrieveShoppingCart()
        {
            this.OnGetShoppingCartCompleted(null, MockShoppingCartData.CreateShoppingCartRuntime());
        }

        protected virtual void OnGetShoppingCartCompleted(Exception error, ShoppingCart result)
        {
            if (this.GetShoppingCartCompleted != null)
            {
                this.GetShoppingCartCompleted(new GetShoppingCartCompletedEventArgs(error, result));
            }
        }
    }

The new mock service class which is used specifically for working with Blend

namespace DesignDataSample.Mocks
{
    public class MockShoppingCartServiceDesignData : MockShoppingCartService
    {
        public override void RetrieveShoppingCart()
        {
            this.OnGetShoppingCartCompleted(null, MockShoppingCartData.CreateShoppingCartDesigntime());
        }
    }
}

How we can use ninject to inject the service we want to use, design time data, mock or real.

this.Bind().To().OnlyIf(c => isBrowser);
this.Bind().To().OnlyIf(c => isBlend);
this.Bind().To().OnlyIf(c => isBrowser);
this.Bind().ToSelf();

Xaml code for how we leverage the data context and the new design time data context for providing contextual data.

So I hope that this article has opened your eyes to how useful design time data can be to enhance the Blendability of the controls which you produce both lookless and user. In the majority of cases designers that you are working with really like that they can view the control at deign time how it will appear when running in your application and populated with data. When implementing the MVVM pattern in you application incorporating support for design time data is also possible and provides you with the ultimate Xaml Ninja experience.

You can download the source from my Skydrive.