Nick's .NET Travels

Continually looking for the yellow brick road so I can catch me a wizard....

Using Universal Share Projects for Windows Phone Silverlight 8.0 and 8.1 Upgrade Path

Of course with the announcement of Windows Phone 8.1 XAML applications (ie applications for WP8.1 written in Windows XAML) and support for Universal applications, not everyone is going to immediately rebuild their Windows Phone application. Instead, existing developers need a mechanism to upgrade to the new runtime to leverage the new features without having to redeveloper all their pages. This is where Silverlight 8.1 applications come in.

There is only minimal support within Visual Studio to support developers upgrading to Silverlight 8.1, allowing them to “Retarget to Windows Phone 8.1”.

image

Retargeting works well and typically your application will continue to run. However, in most cases you’ll want to maintain both a Silverlight 8.0 and 8.1 versions of your application. An alternative is to create a copy of your Silverlight 8.0 application and upgrade that – now you have two versions of your application that you have to support. Luckily this is an area where the new Shared project support, added to enable universal applications across Windows Phone and Windows, can be used to maintain code that is used by both a Silverlight 8.0 and 8.1 application (sort of Linked files on steroids).

Steps:

- Install the Shared Project Reference Manager (http://visualstudiogallery.msdn.microsoft.com/315c13a7-2787-4f57-bdf7-adae6ed54450) – this makes creating Shared Projects much easier

- Create a new Shared Project eg MyApplication.Shared

- Unload you Windows Phone project

- Edit your Windows Phone project file

- Add a Shared Project Reference via the right-click shortcut menu on your Windows Phone project (Note: for some reason adding a shared project reference isn’t supported for Windows Phone projects, so we need to do it the manual way)

- Add Import to end of project file which references the shared project file eg

<Import Project="..\MyApplication.Shared\MyApplication.Shared.projitems" Label="Shared" />

- Reload your Windows Phone project – you should see a reference to your Shared project under References node

image

- Move as many files as possible from your Windows Phone project into the Shared project

- Note that you may experience some of these issues:

> AppResources.resx doesn’t move easily. You’ll need to make sure that both the resx and the designer.cs file are moved and that the Build Action is correct (resx file should have a Build Action of Embedded Resource and a Custom Tool of PublicResXFileCodeGenerator). You also need to remove the “.Resources” from the name of the resource being loaded and the namespace.

> You need to keep any images referenced in the WMAppManifest.xml file in the Windows Phone project. This is ApplicationIcon.png and FlipCyleTileMedium.png by default

> You still need an App.xaml file in your Windows Phone project

- Check that your Windows Phone application builds and runs (fix any build errors!)

- In Windows Explorer take a copy of your Windows Phone application and rename the folder and project files eg MyApplication.SL81

- Add the copied project into the same solution

- Right click on the project you just added and select “Retarget to Windows Phone 8.1”. Your solution structure should now look similar to the following

image

- Build and run your new Windows Phone 8.1 application

The upshot after all this is that you have a Shared project where you can store shared files across your Windows Phone Silverlight 8.0 and 8.1 applications.

XAML and Databinding Debugging for Windows and Windows Phone

A question that came up today during the //learn/ event was how to debug data binding in Windows and Windows Phone projects.Normally I start by checking out the Output window – in most cases any issue with data binding is usually a naming issue, which will result in a bindingexpression path error in the Output window as follows:

Error: BindingExpression path error: 'test' property not found on 'App4.MainViewModel, App4, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null'. BindingExpression: Path='test' DataItem='App4.MainViewModel, App4, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null'; target element is 'Windows.UI.Xaml.Controls.TextBlock' (Name='null'); target property is 'Text' (type 'String')

I was reminded that Xmlspy is a great tool for diagnosing XAML issues, as well as data binding expressions. I downloaded the latest version and was surprised to see that there is full support for all types of Windows Phone 8.1 applications. The only issue I saw was getting it to attach to Windows Phone applications but this was due to my firewall getting in the way. Here’s how you can check and fix this issue:

  • Open the XAML Spy Explorer window (View menu–> Other Windows –> XAML Spy Explorer)
  • Click on the “cog” icon in the window toolbar
  • Find the “Enable remote debugging” option and set it to Yes. You’ll be prompted to permit elevated privileges (I assume to configure firewall).

image 

Now you should be good to debug your application on the emulator/device. The XAML Spy Explorer window will automatically populate with information about your application

image

Note that you can debug much more than just XAML, including sensors, storage and package deployment information.

Upcoming Windows Platform Events for Windows and Windows Phone

Hot off the heals of //Build/ are a whole slew of local activities to get you updated and building for the new Windows platform (aka Windows and Windows Phone). Here they are:

24th April 2014    //Learn/ 

Whether you are a New Windows App Developer or an Experienced one- we have something for you!

Join us and take a deep dive into the latest features and technologies for Windows Phones, PCs and Tablets.//learn/ from our community in this “to the community, for the community and by the community” event where our MVPs and Expert Developers will help you better understand all that’s new with Windows.

Want to learn how to easily share code between store apps of different form factors? or Want to build your own Universal App? You are at the right place. These sessions will cover all the basic concepts to develop Universal Windows apps –One App for all form factors (PC, Table and Phone), Windows Phone 8.1 apps: the new application lifecycle, the new XAML etc.-with live chat and Q&A with our speakers

No need to dress up or step out you can watch and learn from the comforts of your home/office in this online webcast of informative sessions delivered by our community experts. That’s not all, our local experts will deliver these sessions in not 1 but 8 languages from across the globe(each accommodating the local time zone) to help you learn and leverage the new features and technologies.

So get started and Register Now!

17th May 2014    //Publish/

Locations TBA but Sydney, Melbourne and Brisbane are likely – more announcements to come

Whether you’re looking for expert guidance to help you get started or to cross the finish line at a local event, Microsoft experts are here to help you out every step of the way.

You can even win awards and prizes just for publishing before June 1, 2014.

Windows Phone 8.1 Developer Community Workshop

2nd May 2014 – Melbourne
9th May 2014 – Sydney
16th May 2014 - Brisbane

The Windows Phone 8.1 SDK is now available, and with it brings a wealth of new features and capabilities to take your Windows Phone applications further than before.

We've taken the best from //Build, it'll be a big day, jam packed with topics including:-

  1. The new WP 8.1 runtime
  2. Universal applications and building across WP 8.1 and Windows 8.1
  3. Bluetooth and NFC and the internet of things
  4. People Hub
  5. Notifications
  6. Javascript WinJS comes to phone Geofencing And more...

With trainers from Nokia, Microsoft, Build To Roam, and your local Windows Phone super stars, you don't want to miss out. Seats are limited, so get in fast.

Coded Design Time Data using Mvvmcross for Windows and Windows Phone

A question came in today regarding the use of design time data in conjunction with Mvvmcross. My initial response was “it just works” because I assumed that everyone does design time data in Blend….. and I’m still not sure why you won’t do this, since it promotes better design by giving designers the freedom to dictate the information architecture of each page. As it happens what they were really after was a way to plug in design time data that is generated in code. Without using mvvmcross this was relatively easy using a ViewModelLocator pattern – as part of serving up the view models, you could simply change the data source to be design time data when running in the dev tools. Because mvvmcross abstracts a lot of the work involved in associating pages with view models, it also means that it’s a bit harder to wire up coded design time data. In this post I’ll provide a summary (read “crude”) way I found to do this:

The assumption here is that your Mvvmcross project follows how Stuart describes a typical project in any of his getting started videos. Essentially this means a UI project (eg a Windows Phone project), that would contain your views (eg pages) and a Portable Class Library, that would contain your view models. There is also an App class in the PCL which is used to initialise mvvmcross. In this example we’re just going to work with the FirstView and its corresponding FirstViewModel but we’re going to add in support for a service which is used to populate data. Here’s the FirstViewModel:

public class FirstViewModel
    : MvxViewModel
{
    private IDataService Data { get; set; }

    public FirstViewModel(IDataService data)
    {
        Data = data;
    }

    public string Hello
    {
        get { return Data!=null?Data.TestData:"Missing"; }
    }
}

The IDataService has two implementations: DataService and DesignData, as illustrated here:

public interface IDataService
{
    string TestData { get; }
}

public class DesignData : IDataService
{
    public string TestData
    {
        get
        {
            return "Designtime";
        }
    }
}

public class DataService:IDataService
{
    public string TestData
    {
        get
        {
            return "Runtime";
        }
    }
}

At runtime we don’t need to worry about creating an instance of the DataService as it is automatically picked up by mvvmcross and injected into the FirstViewModel constructor. However, the DesignData is a little harder to use. At design time we somehow have to coerce mvvmcross to generate the FirstViewModel and populate it with an instance of DesignData. One option would be to go down the ViewModelLocator path again and use it only at design time to create our view model using design time data. However, this is rather clumsy given we have a perfectly good DI framework that we can leverage. The other thing is we’d have to continually update it to expose properties for each view model we want.

An alternative is to use a Factory pattern coupled with a Converter to dynamically create the appropriate view model. This is a bit of a chicken-and-egg thing to describe so I’ll start with how we wire it up in the UI project. Firstly, in the App.xaml we need to create both the Factory and Converter as resources:

<Application.Resources>
   <codedDesignTimeData:DesignFactory x:Key="Factory"/>
    <codedDesignTimeData:DesignTimeConverter x:Key="DesignConverter" />
</Application.Resources>

Next, in the page we set the d:DataContext (ie the design time data context) as follows:

<views:MvxPhonePage
    x:Class="CodedDesignTimeData.Views.FirstView"
    d:DataContext="{Binding Source={StaticResource Factory}, Converter={StaticResource DesignConverter}, ConverterParameter=FirstViewModel}"
    ... >

Let’s read through what this is saying – at design time, the DataContext for this page is going to be the Factory, passed through the Converter with the parameter “FirstViewModel”. As you can imagine what we’re really saying is that we’re asking the Factory to produce an instance of the FirstViewModel that we can data bind to.

Ok, so now we know what it’s saying, let’s look at the implementation of firstly the Converter, and then the Factory itself:

public class DesignTimeConverter:IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    { 
        var typeName = parameter as string;
        if (string.IsNullOrWhiteSpace(typeName)) return null;

        var factory = value as DesignFactory;
        return factory.Create(typeName);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}

There isn’t much to the converter, it simply passes the parameter (ie the type of the view model to be created) into the Create method on the Factory object.

public class DesignFactory
{
    private Core.App app;
    public object Create(string typeName)
    {

        if (app==null)
        {
            MvxSimpleIoCContainer.Initialize();

                app = new Core.App();
            app.Initialize();

            Mvx.RegisterType<IDataService,DesignData>();
        }

        var type = app.FindViewModelTypeByName(typeName);

        if (type == null) return null;

        var req = MvxViewModelRequest.GetDefaultRequest(type);
        if (req == null) return null;
        var locator = app.FindViewModelLocator(req);
        if (locator == null) return null;

        IMvxViewModel vm;
        if (locator.TryLoad(type, null, null, out vm))
        {
            return vm;
        }

        return null;
    }
}

The factory is where all the smarts are. The first thing we do is make sure that mvvmcross is initialized – this is similar to what happens in your app. We then call FindViewModelTypeByName (see below for implementation) to exchange the view model type name with a reference to the actual type. Next we invoke the view model locator infrastructure within mvvmcross to retrieve an actual instance to the view model we’re after, which we then return (and is subsequently set as the DataContext for the page).

public Type FindViewModelTypeByName(string typeName)
{
    return CreatableTypes().FirstOrDefault(t => t.Name == typeName);
}

Ok, but wouldn’t is just be better to create an instance of the view model, once we have a reference to the type? No, because that view model may have any number of dependencies, which is why we need to rely on the DI framework provided by mvvmcross. You’ll notice I skipped over one quite important line, which was that we register the type DesignData as the implementation of IDataService we want to use. By default the Initialize method on our App class will look for types that end in “Service” and register them, which is why our DesignData doesn’t end in “Service”, but it also means we have to manually register it.

The upshot of this is that an instance of the DesignData class will be used to service up design time data for our view models in Blend. I hope this helps anyone working with mvvmcross.

Building Apps for OneNote for Windows Phone, Windows Store and other platforms

There are newly published apis for accessing OneNote that you can get started building apps for today. http://msdn.microsoft.com/en-us/library/office/dn575420(v=office.15).aspx

WPCentral has good coverage on the new OneNote features that were recently announced:  Microsoft introduces new OneNote APIs, free desktop apps for Mac and Windows

Personally the one I find most interesting is the [email protected] feature where you can simply send an email and have the contents appear within OneNote (yeh I know Evernote’s had that for years). What I love is the simplicity – it detects which Microsoft account based on which email address you send it from. All you have to do is remember [email protected]”. To get started:

* Go to http://www.onenote.com/apps 

* Click through to “Email to OneNote”

* Enrol your email address.

* Start sending emails to [email protected]

Sochi Apps for Windows Phone but not Windows

The Unwired has a good summary of the two Windows Phone applications covering the Sochi winter Olympics. I had already downloaded them yesterday and must admit I was quite impressed with the attention to details. The apps are clean and responsive – of course, I reserve the right to change this opinion when the event actually starts and I want to see actual results and to be notified when events are on.

I just took a quick look on the Windows Store but alas there are no official applications there. There are a couple of third party applications but no official ones.

Building Charming Apps for Windows and Windows Phone

Fellow MVP and owner of In the Hand, Peter Foot has published a number of helper classes for developers targeting both Windows and Windows Phone. I particularly love that these enable developers to “build charming apps!”

Charming ApplicationModel
Charming Display
Charming NFC Share
Charming Popups
Charming Search
Charming Settings
Charming Share
Charming Storage

Get them directly from NuGet or visit the CodePlex site for more information.

http://charming.codeplex.com/

Aligning Characters and Spacing in Windows 8.1

When designing applications for Windows Phone we spend a lot of time aligning the left edge of virtually everything to either each other or to the imaginary grid drawn over the page. Unfortunately the SDK doesn’t make life easy for us as the TextBlock element doesn’t automatically trim white space on the left of the contents. The net effect is illustrated in the left of the following image where the “a” and “b” aren’t left aligned, despite being offset by exactly the same amount from the left edge of the page.

image

Windows 8.1 includes the OpticalMarginAlignment property which you can set to TrimSideBearings in order to remove excess whitespace. The net effect is shown in the right side of the image where the “a” and “b” are now left aligned.

Intercepting DataContext Change in Windows and Windows Phone

Often when working with UserControls you need to wire/unwire logic when the DataContext of the control changes (eg it’s used on a page and the viewmodel which is bound to the page flows into the UserControl as the DataContext). Unfortunately prior to Windows 8.1 there wasn’t an easy way to do this. In Windows 8.1 you can do the following in order to hook up to the DataContextChanged event handler

public class TestControl : UserControl
{
    public TestControl()
    {
        DataContextChanged += TestControl_DataContextChanged;
    }

    void TestControl_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
    {
        // Do stuff with the new Data Context
    }
}

So, how would you do this prior to Windows 8.1 and for Windows Phone? Well, one option, and I’m not saying this is the only option, is to create a different dependency property and connect it using data binding. For example:

public class TestControl : UserControl

   public object CustomDataContext
    {
        get { return GetValue(CustomDataContextProperty); }
        set { SetValue(CustomDataContextProperty, value); }
    }

   public static readonly DependencyProperty CustomDataContextProperty =
        DependencyProperty.Register("CustomDataContext", typeof(object), typeof(TestControl), new PropertyMetadata(null,DataContextChanged));

    private static void DataContextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        // Do stuff with the new Data Context
    }
}

And when you use this control, you’ll need to data bind to the CustomDataContext property:

<local:TestControl CustomDataContext="{Binding}"/>

The “{Binding}” without a path simply means that the current DataContext for the control will be passed in. You’re then free to do whatever you want with the real DataContext as you can be assured it would have been set at this point.

Data Exchange for Application Extensibility on Windows Phone and Windows

Both Windows and Windows Phone support launching applications based on file extensions or via a custom uri protocol. This is the equivalent of “open in” capability that other platforms have and it is a fundamental mechanism for sharing data from one application to another. For example you might have a dropbox application which can list various files but doesn’t provide a mechanism for opening or editing all possible file types. Instead when a user clicks on a file to open it, the application can simply attempt to launch the file, allowing the platform to pass off the file to the appropriate application. This is implemented by taking a copy of the file and passing it to the destination app. Unfortunately this then means that the view/editing application can’t save it back to dropbox. The round-about way to save the changes is to then launch the file, this time with the file being picked up by dropbox.

What’s interesting is that this is expressly prohibited by the Windows Store App certification requirements. Point 3.1 states that applications can’t implement bi-directional data exchange:

image

My view is that this clause was written by a completely different team (probably a security “expert”) to the one that actually implemented file/uri handling and doesn’t really understand why they were implemented in the first place. In Windows you can implement Share contracts but this is not really a great way to data exchange between apps – it works well for “share to social” or similar scenarios. Take the Facebook Login for Windows Phone this uses bi-directional data flow to authenticate users via Facebook for applications wanting to connect to Facebook (similar to the way iOS works for Facebook auth). With the current Windows Store requirements I don’t see this as being possible.

 

References

Auto-launching apps using file and URI associations for Windows Phone 8

Auto-launching with file and URI associations Windows Store apps

Getting Started with Design for Windows, Windows Phone, iOS and Android

Here’s a summary of some of the design guidelines for the various mobile platforms:

Windows Phone
http://developer.windowsphone.com/en-us/design

Windows
http://msdn.microsoft.com/en-au/windows/apps/hh779072.aspx

Android
http://developer.android.com/design/index.html

iOS
https://developer.apple.com/library/ios/design/index.html

 

Another great resource on user experience design is the UX Mastery website

http://uxmastery.com/

In particular the book Everyday UX is worth purchasing:

http://uxmastery.com/everyday-ux-remarkable-people-telling-their-stories/

Much needed updates to the Windows Store

Just in case you missed the announcement regarding changes to the Windows Store: More control for app developers in the Windows Store

The main updates are

*    Setting your app’s release date and time
*    Managing your app’s availability
        - Temporarily removing the app from store
        - Support for Windows 8 (ie only show a Windows 8.1 listing)
*    Simplified certification requirements

Data Validation and Visual States for Windows Phone and Windows

One of the developers we’ve been working with recently suggested incorporating the INotifyDataError interface into some of the view models on a particular project. As a lot of the applications we typically  work on are more consumption style applications I haven’t seen the need to add complex data validation logic; where we do need to validate one or two values we typically just have a different visual state that represents when the user hasn’t correctly filled in the required fields.

I just had a quick hunt and found http://dotnet-redzone.blogspot.com.au/2012/12/windows-phone-8-easy-and-intuitive-way.html. This post is a great starting point for implementing visual states into a Windows Phone project. A number of controls support data validation. For example the TextBox has a ValidationStates visual state group, with states for valid and invalid data. The default template doesn’t specify what these states look like but it would be easy to modify the template to provide a visual indicator when data doesn’t validate.

Modifying the validation states for a control is fine for individual controls but if you need to modify the visual state for the rest of the page you’d need to capture the ErrorsChanged event and change the visual state of the page.

One of the biggest weaknesses of the data binding framework for both Windows and Windows Phone is that there isn’t a built in mechanism for changing visual states from within a view model. There are some solutions, such as data triggers or raising an even that is captured by the page and converted into a state change. These could be combined with the ErrorsChanged event in order to build a more versatile data validation framework.

Visual States in Windows Phone and Windows Applications using MvvmCross

I’m a big fan of using Visual States defined in Blend to be able to see all the different states that a page/view within your application would look like under different conditions. Most of these conditions are reflected in the state of your view model. However, there is no built in mechanism for data binding to a visual state. There are a number of different ways to tackle this problem, for example data triggers to control state changes. On technique we’ve used quite successfully is to simply bubble up appropriate state changed events from the view model, which in turn triggers a state change at the page level. In this post I’m going to walk you through how we’ve extended MvvmCross to include our own base view model and base page which allows us to trigger and track the state of the page.

We’ll start by defining an interface which will be implemented by our base view model. This includes the StateChanged event and methods for invoking a state change, ChangePageState, and querying the current state, CurrentState. You’ll notice that these methods take a type parameter, this is so that we can use an enumeration, rather than string literals to define our states.

public interface IStateAndTransitions
{
    event EventHandler<DualParameterEventArgs<string, bool>> StateChanged;
    void ChangePageState<T>(T stateName, bool useTransitions = true) where T : struct;
    T CurrentState<T>() where T : struct;
}

Next, we’ll implement the IStateAndTransitions interface in our BaseViewModel class. This class also inherits from MvxViewModel, bringing with it all the goodness of MvvmCross.

public class BaseViewModel : MvxViewModel, IStateAndTransitions
{
    public event EventHandler<DualParameterEventArgs<string, bool>> StateChanged;

    private readonly Dictionary<string, string> currentStates = new Dictionary<string, string>();
    public T CurrentState<T>() where T : struct
    {
        var current = currentStates.SafeDictionaryValue<string, string, string>(typeof(T).FullName);
        var tvalue = current.EnumParse<T>();
        return tvalue;
    }

    public void ChangePageState<T>(T stateName, bool useTransitions = true) where T : struct
    {
        var current = currentStates.SafeDictionaryValue<string, string, string>(typeof(T).FullName);
        var newState = stateName.ToString();
        if (string.IsNullOrWhiteSpace(current) || current != newState)
        {
            currentStates[typeof(T).FullName] = newState;
            StateChanged.SafeRaise(this, newState, useTransitions);
        }
    }
}

The last thing to do is to extend the MvxPhonePage to wire up an event handler for the StateChanged event. The event handler simply invokes the state change by calling GoToState on the VisualStateManager.

public class BasePhonePage : MvxPhonePage
{

    protected IStateAndTransitions StatesAndTransitionsViewModel
    {
        get
        {
            return DataContext as IStateAndTransitions;
        }
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);

        var satvm = StatesAndTransitionsViewModel;
        if (satvm != null)
        {
            satvm.StateChanged += ViewModelStateChanged;
        }
    }

    private void ViewModelStateChanged(object sender, DualParameterEventArgs<string, bool> e)
    {
        //var controlName = e.Parameter1;
        var stateName = e.Parameter1;
        var useTransitions = e.Parameter2;

        // Locate the control to change state of (use this Page if controlNAme is null)
        Control control = this;
        VisualStateManager.GoToState(control, stateName, useTransitions);
    }

    protected override void OnNavigatedFrom(NavigationEventArgs e)
    {
        var satvm = StatesAndTransitionsViewModel;
        if (satvm != null)
        {
            satvm.StateChanged -= ViewModelStateChanged;
        }

        base.OnNavigatedFrom(e);
    }
}

For completeness you’ll also need the parameter and dualparameter event args classes. These are used to make it easier to pass data values around when raising events.

public class ParameterEventArgs<T> : EventArgs
{
    public T Parameter1 { get; set; }

    public ParameterEventArgs(T parameter)
    {
        Parameter1 = parameter;
    }

  public static implicit operator ParameterEventArgs<T>(T parameter)
    {
        return new ParameterEventArgs<T>(parameter);
    }
}

public class DualParameterEventArgs<T1, T2> : ParameterEventArgs<T1>
{
    public T2 Parameter2 { get; set; }

    public DualParameterEventArgs(T1 parameter1, T2 parameter2):base(parameter1)
    {
        Parameter2 = parameter2;
    }

    public static implicit operator DualParameterEventArgs<T1, T2>(object[] parameters )
    {
        if(parameters==null || parameters.Length!=2) return null;
        return new DualParameterEventArgs<T1, T2>((T1)parameters[0], (T2)parameters[1]);
    }
}

Now, let’s see this in action in a view model, FirstViewModel:

public class FirstViewModel : BaseViewModel
{
    public enum FirstStates
    {
        Base,
        Loading,
        Loaded
    }

    public async Task LoadData()
    {
        ChangePageState(FirstStates.Loading);
        // Load some data (async to ensure no UI blocking)
        ChangePageState(FristStates.Loaded);
    }
}

Your page, FirstView, needs to inherit from BasePhonePage and have visual states called Loading and Loaded. The “Base” enumeration value is there just to represent the default state of the page. You should never have a state called “Base”, nor should you call ChangePageState with a value of Base. You can however, call CurrentState and compare the value to Base to see if a state has been set.

Hope this makes it easier for you to build your visual states in Blend.

Querying data from the Windows Phone and Windows Stores

We had a requirement today to query both the Windows Phone and Windows Stores for information about some of the apps we’ve been working on. Since both stores have a rich client interface it’s only natural that the store can be queried via a hidden pseudo api (“pseudo” because they’re more feed-like than a real api).

To work out how the api is structured the easiest thing to do is to setup Fiddler with SSL decoding and remote connections enabled on one computer and then on your Windows Phone and/or Windows 8 device you set the Fiddler computer to be the proxy. In order for this to work you’ll need to install the Fiddler certificate onto the device (Windows Phone installs the certificate correctly by default; Windows 8 you’ll need to put the certificate into the Trusted Root Certificate Authorities store for it to work).

Here’s what I pulled from my Windows Phone:

Application Info URL

http://marketplaceedgeservice.windowsphone.com/v8/catalog/apps/{app guid}?os=8.0.10211.0&cc=AU&lang=en-US

Replace “app guid” with the Guid for your application. You can find the Guid for your application by finding the application in the web version of the Windows Phone Store and then looking in the address bar.

Image URL

http://cdn.marketplaceimages.windowsphone.com/v8/images/{image guid}?hw=486577666&imagetype=icon_small

Replace “image guid” with the Guid for the image you want to retrieve. The image Guids are listed in the information returned from the application info URL.

 

Here’s what I pulled from my Windows 8 device:

Application Info URL

https://next-services.apps.microsoft.com/browse/6.3.9600-0/776/en-GB_en-AU.en-US.en/c/AU/cp/10005001/Apps/{app guid}

Replace “app guid” with the Guid for your application. You can find the Guid for your application by finding the application in the web version of the Windows Store and then looking in the address bar.

Image URL

http://wscont1.apps.microsoft.com/winstore/1.4x/{image path}

Replace “image path” with the relative path to the image that you want which can be found in the Application Info URL

Windows Store In App Purchase ArgumentException when calling LoadListingInformationAsync

When you couple poor API documentation with dumb developer decisions you can cause developers to waste hours trying to diagnose issues with their apps. We’ve just tracked down an issue with calling CurrentApp.LoadListingInformationAsync from a Windows Store application we’re building. Whilst calling the same method on the CurrentSimulatorApp works without throwing exception, calling the method on CurrentApp throws an ArgumentException with message "Value does not fall within the expected range."

Initially we thought that this issue was related to the app not being published in the Store, so we submitted and published the app. Unfortunately the exception continues….

This thread: http://social.msdn.microsoft.com/Forums/windowsapps/en-US/0de52a76-2ec3-4b82-8d38-7385f22132f0/currentapploadlistinginformationasync-throws-argumentexception

holds the answer – you need to call this method from the UI thread.

Points to remember when building an API:

- You shouldn’t design an API that needs to run on the UI thread, that isn’t UI related

- You should document possible exceptions

- If you’re going to provide a simulator API

    - The simulator should implement an interface so it can be mocked properly

    - The simulator should mirror the behaviour of the real thing (in throw similar exceptions!)

App Generators: Windows Phone App Studio and Project Siena

With all the recent interest in app generators by Microsoft, I’m wondering whether there is going to be a run on app-kiddies (kick back to “script kiddies” who plagued the internet a decade or so ago): Application builders who don’t have a clue how to write an application but seem to be able to coble together a number of applications, that all look surprisingly similar, using generators.

The two app generators I’m referring to are:

Windows Phone App Studio

“Take your app from idea to Windows Phone in record time”

Microsoft Project Siena (Beta)

“Unleash your expertise and imagination”

Having checked out the capabilities of these generators I don’t feel that my job as a Windows platform developer is in jeopardy. In fact, I think these generators allow would-be app creators to get started with the basics. Once they hit the limitations of the tools, that’s when they can come to us to fill out the gaps. This is a great way to test a concept, or two, before over-investing in any particular idea.

Windows and Windows Phone app convergence

One of the things that is becoming apparent is that the convergence between Windows and Windows Phone applications it a hot topic. Developers often ask why we have two development platforms to target, where as iOS and Android only have the one. For example iOS you can build a single package which includes both iPad and iPhone versions of an application. This argument is of course completely flawed since we’re comparing apples and oranges. If you widen the scope to include Mac development then those in the Apple world also have to target two platforms. This argument doesn’t really apply to Android since it doesn’t really feature in the desktop space.

What we are seeing is that we can increasingly share resources between our Windows and Windows Phone applications. The continual evolution of Portable Class Libraries mean that we can build reusable libraries that will work without recompilation across both Windows and Windows Phone applications. In fact you can even use these libraries in your iOS and Android projects, assuming you’re using Xamarin as your cross platform approach.

Unfortunately all this discussion of convergence at an dev platform layer completely ignores what’s going on at the user experience level. The reality is that you don’t need technology convergence in order to build a consistent user experience across both platforms. What’s been interesting to watch is how Microsoft tries to converge the look of Windows and Windows Phone first party applications. Whilst  both interfaces are laced with the essence of Metro Modern UI, there are some significant differences between them.

Take for example the Hub/Panorama experience – Windows 8 didn’t have a control for this, where as Windows Phone has the Panorama control; Windows 8.1 now has the Hub control which makes it easier for developers to build a hub style experience. The Hub and Panorama controls aren’t the same eg the hub control typically has a hero pane, where as the panorama has a background image which has parallax scrolling.

If you look at some of the Microsoft applications, such as Bing News, you’ll see that they’ve taken UX convergence to the next level, attempting to minimize any difference between the platforms. Below you can see the Windows Phone Bing News app, followed by the Windows version.

1 of 6 2 of 6 3 of 6

 

Screen shot 1

The question you should be asking (and Microsoft should be answering) is whether you should be sticking to the standard Panorama look and feel, or should you be trying to match what Bing News is doing and aligning with the Windows Hub control?

Windows 8.1, the Hub Control and Visual States

The more I use the Windows 8.1 Hub control the more I get frustrated by it. In my previous post Databinding with the Windows 8.1 Hub control, I talked about getting data binding to work. This is useful if you’re going to have a series of panes all with similar structure. However, you could probably get the same effect using grouping in a GridView. A more common scenario is to have a number of different panes, which hold content coming from different sources. In this case, each pane is going to be loading data independently and you’ll probably want each pane to have different visual states representing loading, data loaded successfully, data load failed, data loaded successfully but no data available etc. If we were building this using the Panorama control for Windows Phone, or using the deprecated method of a horizontal stack panel inside a scrollviewer, then we could simply drop in a couple of extra elements and then control which ones are visible using visual states. As the view model for the page is typically responsible for controlling the loading of content across each of the panes (it simply loads the data, and data binding does the rest), it is also responsible for controlling the visual states across the page. Unfortunately this doesn’t work with the Hub control – the contents

As a starting point for this post I’m going to use the source code sample from the article States, Navigation and Testing with Portable Class Libraries for Windows Phone, as this will give us the basic infrastructure for raising state changed events from our view model. I won’t go through the details of wiring up the Windows application to use the locator  pattern – it’s essentially the same as for Windows Phone. What we will be focussing on is the hub control and how we can use state change events to control the content for each pane. The Panorama control used in Windows Phone applications, is made up of PanoramaItems and the contents of each pane is simply added as content. The Hub control is made up of HubSections but the contents for each pane is added into a data template, similar to the following:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:userControls="using:StatesAndNavigation.Win.UserControls"
      x:Class="StatesAndNavigation.Win.MainPage"
      DataContext="{Binding Main, Source={StaticResource Locator}}"
      mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Hub>
            <HubSection>
                <DataTemplate>
                …
                </DataTemplate>
            </HubSection>
        </Hub>
    </Grid>
</Page>

Initially this works fine and Blend can be used to design each HubSection. However, if you attempt to wire up visual states which need to reference elements inside the datatemplate you’ll discover it won’t work. For example you might want to have different content for loading and then when the data has loaded. One solution is to create a usercontrol which has these states:

<UserControl x:Class="StatesAndNavigation.Win.UserControls.MainFirstPaneUserControl"
             xmlns="
http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="LoadingStates">
                <VisualState x:Name="Loading">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="SP_Loading">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ProgressRing.IsActive)"
                                                       Storyboard.TargetName="progressRing">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Boolean>True</x:Boolean>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Loaded">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="GD_Loaded">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="NotAbleToLoad">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="GD_NotAbleToLoad">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel x:Name="SP_Loading"
                    Visibility="Collapsed">
            <TextBlock Text="Loading...."
                       FontSize="48" />
            <ProgressRing x:Name="progressRing"
                          Width="50"
                          Height="50" />

        </StackPanel>
        <Grid x:Name="GD_Loaded"
              Visibility="Collapsed">
            <TextBlock Text="All data loaded"
                       FontSize="48" />
        </Grid>
        <Grid x:Name="GD_NotAbleToLoad"
              Visibility="Collapsed">
            <TextBlock Text="Not able to load"
                       FontSize="48" />
        </Grid>
    </Grid>
</UserControl>

This usercontrol would then be added to the datatemplate for the hubsection:

<HubSection>
    <DataTemplate>
        <userControls:MainFirstPaneUserControl />
    </DataTemplate>
</HubSection>

The issue is that we need some mechanism for triggering the visual state change from the view model for the page. In the same way as the page wires an event handler for the StateChanged event on the viewmodel, the usercontrol also has to wire up to this event. As the usercontrol inherits the DataContext from the page, the usercontrol can listen to the DataContextChanged event and wire up to the StateChanged event at that point.

public sealed partial class MainFirstPaneUserControl
{
    public MainFirstPaneUserControl()
    {
        InitializeComponent();

        DataContextChanged += MainFirstPaneUserControl_DataContextChanged;
    }

    void MainFirstPaneUserControl_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
    {
        var ctrl = sender as MainFirstPaneUserControl;
        ctrl.WireStateChanged();

    }

    private void WireStateChanged()
    {
        ViewModel.StateChanged += ViewModelStateChanged;
    }

    private void ViewModelStateChanged(object sender, StateChangedEventArgs e)
    {
        VisualStateManager.GoToState(this, e.StateName, e.UseTransitions);
    }

    private BaseStateChange ViewModel
    {
        get
        {
            return DataContext as BaseViewModel;
        }
    }
}

This appears to work, except the initial state changed event is skipped. The Hub, by design, lazy loads the hubsections, meaning that the OnNavigatedTo for the page gets run before the hubsection has been created and wired up. To resolve this problem the view model needs to track the current visual state:

public event EventHandler<StateChangedEventArgs> StateChanged;
private readonly Dictionary<Type,object> currentState = new Dictionary<Type, object>();
protected void OnStateChanged<T>(T state, bool useTransitions = true) where T : struct
{
    currentState[typeof (T)] = state;

    if (StateChanged != null)
    {
        StateChanged(this, new StateChangedEventArgs { StateName = state.ToString(), UseTransitions = useTransitions });
    }
}

public T CurrentState<T>()
{
    object current;
    currentState.TryGetValue(typeof (T), out current);
    return (T) current;
}

And the usercontrol needs to query it at the point the state changed event is wired up:

private void WireStateChanged()
{
    var current = ViewModel.CurrentState<MainViewModel.LoadingStates>();
    if (current != MainViewModel.LoadingStates.Base)
    {
        VisualStateManager.GoToState(this, current.ToString(), false);
    }
    ViewModel.StateChanged += ViewModelStateChanged;
}

When we run this, we’ll see the visual state for the hubsection switch between loading and loaded states.

image     image

Download the code

Databinding with the Windows 8.1 Hub control

One of the controls that was introduced with Windows 8.1 is the Hub control. This control is fantastic as it provides a great starting point for application developers to build applications that use the default L structure common to most Windows 8 style applications. Visual Studio 2013 comes with a dedicated Hub project template which is a useful starting point but the XAML Hub Control Sample is an even better resource in terms of getting familiar with the control. It includes:

  • Basic usage.
  • Adding an image in a section which displays from edge to edge of the screen.
  • Adding interactive headers.
  • Adding semantic zoom.
  • Adding a vertical layout.

     

    Specifically if you looking to replicate the structure of any of the Bing apps (eg Bing News) where there is a Hub experience and Semantic zoom to jump through sections, this sample is the place to start.

    There are however two areas where this control is just plain awful and no consideration was given to how the control was to be used in practice:

    1) Support in Blend is woeful. Each hub section  has to be developed as a content template which is fine, except that you then can’t use visual states to control layout changes within a hub section. This is just plain disappointing.

    2) Minimal data binding support. Yes, you can set data context and data bind individual sections but unlike the gridview/listview which support grouping, the Hub control doesn’t support data binding the sections to a data source. If you look at the Panorama or Pivot controls on Windows Phone if you have a collection of sections, you can data bind this to the ItemsSource property which will dynamically create the appropriate number of panoramaitem or pivotitems. No such luck (unless I missed something) with the Hub control.

    The good news is that it’s not that hard to build a DYI data binding solution. Here’s a snippet that’ll get you started:

    public class HubBinder : DependencyObject
    {
        public static readonly DependencyProperty HeaderTemplateProperty = DependencyProperty.RegisterAttached(
            "HeaderTemplate",
            typeof(DataTemplate),
            typeof(HubBinder), new PropertyMetadata(null, HeaderTemplateChanged)
            );

        private static void HeaderTemplateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var hub = d as Hub;
            if (hub == null) return;
            var template = e.NewValue as DataTemplate;
            if (template == null) return;
            foreach (var hubSection in hub.Sections)
            {
                hubSection.HeaderTemplate = template;
            }
        }
        public static void SetHeaderTemplate(UIElement element, DataTemplate value)
        {
            element.SetValue(HeaderTemplateProperty, value);
        }

        public static DataTemplate GetHeaderTemplate(UIElement element)
        {
            return element.GetValue(HeaderTemplateProperty) as DataTemplate;
        }

        public static readonly DependencyProperty SectionTemplateProperty = DependencyProperty.RegisterAttached(
            "SectionTemplate",
            typeof(DataTemplate),
            typeof(HubBinder), new PropertyMetadata(null, SectionTemplateChanged)
            );

        private static void SectionTemplateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var hub = d as Hub;
            if (hub == null) return;
            var template = e.NewValue as DataTemplate;
            if (template == null) return;
            foreach (var hubSection in hub.Sections)
            {
                hubSection.ContentTemplate = template;
            }
        }
        public static void SetSectionTemplate(UIElement element, DataTemplate value)
        {
            element.SetValue(SectionTemplateProperty, value);
        }

        public static DataTemplate GetSectionTemplate(UIElement element)
        {
            return element.GetValue(SectionTemplateProperty) as DataTemplate;
        }
        public static readonly DependencyProperty DataSourceProperty = DependencyProperty.RegisterAttached(
            "DataSource",
            typeof (object),
            typeof (HubBinder), new PropertyMetadata(null, DataSourceChanged)
            );

        private static void DataSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var data = e.NewValue as IEnumerable;
            var hub = d as Hub;
            var template = GetSectionTemplate(hub);
            var header = GetHeaderTemplate(hub);
            if (data == null || hub == null) return;
            foreach (var section in data)
            {
                var sect = new HubSection { DataContext = section, ContentTemplate = template, HeaderTemplate = header };
                var hubData = section as IHubData;
                if (hubData != null)
                {
                    sect.Header = hubData.Header;
                    }

                hub.Sections.Add(sect);
            }
        }

        public static void SetDataSource(UIElement element, object value)
        {
            element.SetValue(DataSourceProperty, value);
        }

        public static object GetDataSource(UIElement element)
        {
            return  element.GetValue(DataSourceProperty);
        }
    }

    public interface IHubData
    {
        object Header { get; }

    }

    To use this attached property you simply need to add the DataSource attribute to your Hub control and create a data template called HubSectionTemplate:

    <Page x:Class="App2.MainPage"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:local="using:App2"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          mc:Ignorable="d">
        <Page.Resources>
            <DataTemplate x:Key="HubSectionTemplate">
                <StackPanel>
                    <TextBlock Text="{Binding Content}"
                               FontSize="26.667"
                               Foreground="#FF1133A6" />
                </StackPanel>
            </DataTemplate>
            <DataTemplate x:Key="HubHeaderTemplate">
                <StackPanel>
                    <TextBlock Text="{Binding}"
                               FontSize="40"
                               Foreground="White" />
                </StackPanel>
            </DataTemplate>
        </Page.Resources>

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Hub local:HubBinder.DataSource="{Binding Sections}"
                 local:HubBinder.SectionTemplate="{StaticResource HubSectionTemplate}"
                 local:HubBinder.HeaderTemplate="{StaticResource HubHeaderTemplate}">

            </Hub>
        </Grid>
    </Page>

    It’s definitely not a fully fledged data binding solution but it should be enough to get those who are stuck looking up and running. The view model for the page could then look like:

  • public class MainViewModel
        {
            private ObservableCollection<Section> sections = new ObservableCollection<Section>();

            public ObservableCollection<Section> Sections
            {
                get
                {
                    return sections;
                }
            }
        }

        public class Section:IHubData
        {
            public string Title { get; set; }
            public string Content { get; set; }

            public object Header
            {
                get
                {
                    return Title;
                }
            }
        }