Windows Store Apps quick tip: the sneaky selected item in CollectionViewSource

When assigning an ItemsSource there is a fundamental difference in CollectionViewSource vs “standard” collections: Using a CollectionViewSource will mark the first item as selected, using a “standard” collection will not.

Imagine if you will a ListView where you handle SelectionChanged and fetch data from somewhere depending on what item is selected. If you’re using a CollectionViewSource and navigate to the page you’ll fire that call twice – first for the default selected item, then for the passed in parameter that you’re likely using to the set SelectedItem.

That is all.

Windows Store Apps quick tip: getting the app version number

If you need to get the version information of your app from code, the details you want resides in Windows.ApplicationModel.Package.Current.Id.Version.

For example, to get a full version string you could use the below code:

string.Format("{0}.{1}.{2}.{3}", Windows.ApplicationModel.Package.Current.Id.Version.Major, 
                                 Windows.ApplicationModel.Package.Current.Id.Version.Minor, 
                                 Windows.ApplicationModel.Package.Current.Id.Version.Build, 
                                 Windows.ApplicationModel.Package.Current.Id.Version.Revision)

That is all.

Windows Store Apps – a generic connectivity-dropped control to take that worry from your brow

(If you can’t be bothered reading the text and just want the code it’s available for download here)

One of the requirements when publishing your Windows Store app is that the app needs to handle connectivity loss. No matter how much you curse at the certification requirements that one is there for a good reason (as many of them are), and it prevents the user experience from going haywire. So, it’s fair game, not much you can say about that. Usually what people do here is add a handler to the Application.UnhandledException event and swallow as many/few of the exceptions they can. Good on you. now your app is fool-proof.. or is it?

What about letting your user know something happened visually? well, you could show a MessageDialog with the details of that error. I suppose that, at least, gives a bit of context.

Back to connectivity. This shouldn’t be a concern. This houldn’t steal time from you that you can spend on implementing all your ideas. This should just be handled.
One way to handle these issues automagically is by creating a generic control that can visually present meaningful (hopefully, but up to you) context to your user while the app has lost connectivity.

Therefore, I give you ConnectivityPopUp.

ConnectivityPopUp is a custom control that pops up an overlay across the entire screen when your app looses connectivity. The guts of the control consists of a PopUp control containing a Grid with a FlipView and FlipViewIndicator (from the awesome Callisto framework), along with some dependency properties and a control template.

Once placed on your page it handles the hassle of connectivity for you – all you have to do is supply it with at least one ConnectivityPopUpPage and place the control on your page(s). Behind the scenes it then attaches to the Windows.Networking.Connectivity.NetworkInformation.NetworkStatusChanged event.

            var connectivityPages = new ObservableCollection<Usoniandream.WindowsStore.Controls.ConnectivityPopUpPage>()
                                        {
                                            new ConnectivityPopUpPage(){Title = "have you tried DiceFeud yet?", 
                                                                        _imagePath = "Assets/MediumGray.png", 
                                                                        Description = "Lorem ipsum … ante"}
                                        };
            this.DefaultViewModel["ConnectivityPages"] = connectivityPages;

Once that event is fired, and handled, it takes care of telling the UI to show the control on the appropriate thread. This is accomplished simply by travelling the action of setting IsOpen=true through Dispatcher.RunAsync().

The default layout of the control is fairly minimalistic and, yes, boring.

        <usoniandream:ConnectivityPopUp
            Pages="{Binding ConnectivityPages}" />

 

But it doesn’t have to be boring. You can customize it using BackgroundImagePath and BackgroundImageStretch properties to your liking.

Perhaps you instead want to create a Homer Simpson styled one..?

        <usoniandream:ConnectivityPopUp
            BackgroundImagePath="Assets/ohno.png" 
            BackgroundImageStretch="Uniform" 
            Pages="{Binding ConnectivityPages}" />

 

Or maybe HAL resides somewhere in the void of space in your app..?

        <usoniandream:ConnectivityPopUp
            BackgroundImagePath="Assets/space.png" 
            BackgroundImageStretch="UniformToFill" 
            Pages="{Binding ConnectivityPages}" />

The control is dependent on Tim Heuer’s Callisto framework since it uses the FlipViewIndicator from that framework.

This is just my take on handling connectivity issues in a generic way.

If it suits your needs – go grab it. Then use it.
If it doesn’t – go grab it anyway. Then turn it inside out. Change it. Invert it.

Windows Store Apps – a Panorama-ish GridView

The idea is simple: Take a GridView, tweak it to see if it’s possible to get a somewhat similar feeling as the Panorama control for Windows Phone.

If you search for panorama and windows store you’ll likely end up in discussions about something called “parallax background” – at least that’s what I did. One article that cought my eye was this one written by John Michael Hauck. He took an interesting approach and created a ParallaxConverter to sort it all out. Cudos to him – that’s the one I’m using in this example.

Also included in this marriage-of-a-lot-of-techniques is the tip from Jerry Nixon on how to use a variablesizedwrapgrid and custom gridview to make it a little prettier found here.

So, quick recap of the recipie for this sweet cake:

1. Implement “panorama-ish” effect thanks to John Michael Hauck.
2. Make the item layout a bit nicer thanks to Jerry Nixon.
3. Bake both together for 20 minutes
4. Ready to serve hot from the oven

I won’t dig into details of the code in this post, you have the sourcecode available for that if you wish to dive in.

If you observe the images below you’ll see that the background moves much slower than the gridview in the foreground – voila! mission accomplished!

This is an experimental, playful and far from perfect code. It’s just here to show you that it can be done, and that there are techniques out there that can help you a lot.

Feel free to grab the code in this zip archive. Use or modify it as you wish. If you got the balls to give credit where credit is deserved, go thank Jerry Nixon, John Michael Hauck and the other authors in the community for the effort they put into sharing what they know.