3

#ComDayBe – Flyout control in XAML through Callisto for Windows 8

@BartLannoeye ( his blog ) and I did a session on Building the Windows 8 Community app, last week at Community Day 2012, this as members of the WiPhug user group.

Here we are with part 3 and this time we will be talking about using the appbar and implementing a Flyout Control. More detail on what it is and when to use it, is given here…

But why would we need to put a blog post up about it, well because if you go through all the examples on the MSDN site, you’ll notice that there is no XAML version available!! Yep with Windows 8 RP there is still no XAML flyout control out of the box!

But there is a good alternative for this, that is by using the Callisto lib created by Tim Heuer! If you want you can simply add it through the Callisto NuGet. This lib contains several neat features, but for me the FlyOut control for XAML is by far the most valueable.

So once refernced, how do you add a flyout control… this is done through code behind on your view page. In our case we want to trigger the visibility of the flyout when the user presses an appbar button.

So we add an appbar, ad a button and hook up the Click event to a method on our code behind. This looks like this in XAML:

On thing to notice here, is the fact that I’m using a static resource for the button! It’s called FilterAppBarButonStyle, I’ve added this myself in the Common\StandardStyles.xaml file. It’s a Filter Icon for the appbar, looking like this:

FilterButton

This icon is actually a font instead of an image, and you can get it for free, because the font itself is already installed on your machine!! The style definition is done in XAML and the code is:

 

You’ll notice that we set a Content property to some special value, well this value represents one char from the font Segoe UI… and you can get that value by opening the Character map in Windows 8. More on this technique can be found explained here… by Jerry Nixon

Now that our button is in place we only need to create the flyout control in the code behind method, this is don like this:

The flyout control can contain any ui control, in our case we add a Menu control with ToggleMenuItems. If you look again, you’ll also see that at the beginning of the ShowFlyoutMenu method, we set the Placement of the Flyout above the sender, in this case the appbar button!

Well again nothing that difficult, but it gives your app a fancy UI element!

The demo can be found underneath…

Callisto AppBar demo solution

Depechie

3 Comments

  1. Thanks or the information. It was useful to me. But I have to tell you that the Lambda expressions here are incomprehensable. Necessary?

  2. Hey Jim,
    You mean for the select with the tapped event?
    It’s just to have any sort of checked animation on the menu in the app, you can change it to whatever you need 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *