Sunday, October 14, 2012

Using custom vector data for app bar buttons in WinRT XAML - revisited

Windows 8 store apps have this concept of an App Bar where you host buttons that allow the user to perform various actions / commands.

In my app, it looks like this:

App Bar

As you can see, I have two types of buttons. On the right, I have a regular appbar button that is styled based on glyphs that come from a font. So the ' + ' is just text. On the left, I have custom vector graphics I pulled from Syncfusion’s Metro Studio. The styles are slightly different because I've not yet got around to setting the proper opacity for the buttons on the right.

Anyway, in WinRT XAML, which I used to make this app, I used a style for the buttons on the left that looks something like this:

To get it to look right and work with mouse over / click styling, I had to override the entire control template for each button - ugly! Then I saw Tim Heuer's blog post on using vector data explaining why the problem occurs and how to solve it - in a very elegant way without duplicating the entire control template for each button.

However, I was still not fully satisfied with the final result where you define buttons as follows:

I still wasn't happy enough with the part where you define the full path data in the button's content property. I prefer to keep that sort of a thing in a style resource. So, I modified it to bind the button's style to a view model property and use a value converter to return the appropriate style (which is defined as a resource in a XAML file):

- A common path based app bar button base style (basically the same thing shown in Tim's blog post)

- Binding a view model's stylekey property to a button's style property and using a value converter:

The button is bound to an object that looks like:

Finally, I have something that I'm happy with - cleanly seperated styles and working app bar buttons with custom vector-based icons. Till next time... happy coding!

Friday, September 7, 2012

Getting ItemClick and item selection to work together in the XAML GridView in Windows 8

The GridView control in the Metro Windows 8 XAML framework (@!#!$#@!! what's it called now?) is an interesting beast.

Most apps will use it to show collections of something.

In general, it is a pretty nifty control with lots of built-in features for various interaction modes (touch, mouse, keyboard) - but at times it can throw you a curve-ball. I was faced with such a situation when I wanted to handle the click event on an item and perform an action.
I could do something like the below.(Ok, in a serious app, I'd use something like a EventToCommand to make it more MVVM-y, testable etc, but this will suffice for showing the problem I'm describing:

But with the GridView, that doesn't work! You need to set the IsItemClickEnabled property to true to get ItemClick events:

So far so good. But now, the default item selection behaviour is lost! If item click is not enabled, the default GridView behaviour is to handle clicks / taps and select / de-select the item that was clicked/tapped.

If item click is handled then you need to handle selection yourself. To do that, just bind a property of the view model for the view to the selected item:

So there you have it! GridView with item click and selection working together.

Now, what if you want to handle multiple selections? Well, that's a post for another time :)

Happy coding...

Sunday, September 2, 2012

HOWTO: Provide in-app help using HTML content in Windows 8 Metro-style apps (XAML)

In my Windows 8 XAML app, I was looking to provide some basic integrated help content. I had some simple requirements:

  • Provide integrated help that looks and feels like it is part of the app
  • Also provide help online for those who visit the apps' website to check it out
  • Avoid duplicating content
  • Be able to deliver updated help to the app after the it has been installed on a device
  • Always provide meaningful help content in the app even when there is no network connection available

To me, an easy choice was to create the help content using HTML, host it online - and have the app pull the content from the internet. This meant hosting a web browser control in XAML and providing some fallback in case there are connectivity problems or if the site isn't reachable for some reason. 

To achieve this, I created a wrapper around the web browser control in WinRT XAML to display HTML content from my support website and fallback to local HTML resources shipped with the app. The key part of the control is to try to load a URL, and if that is not possible, try to show a local HTML file (packaged with the app).

Using the control is simple - just set the Url, and FallbackUrl:

The actual control is implemented as follows:

That's it - and you have a quick and easy way to show some simple HTML content from the web in your XAML app - which is useful for things like in-app help.

I've hosted the sample on github: if you want to check it out.