#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:


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

#ComDayBe – Share contract through MVVM in 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.

So this is the second post in reference to our session, this time on how you can use a share contract through MVVM.

So one of the new neat features of Windows 8 is the Share Contract, it allows you to ‘share data’ from within your own app with other apps. You can read in more detail here what it is all about and sure check this list of possible data types you can use to share data here…

In our app we currently only share simple text/html basically a title and a description that will contain an URL to an external webpage with more info. So in the Community Calendar app this will be enabled on the Event detail page, so that you can share the selected event through email for example. And on the User Group detail page, so you can share the selected user group.

Adding a share contract isn’t that difficult, but we faced one problem and that is that our data to shre resides inside our MVVM ViewModel and not on our View. So how do you go about this…

First thing you’ll need to do is create a ShareData class. This little class will represent our data that we will share to other apps. In our case a Title, Description and some Text. Depending on the target app, some of these data properties will be used to acquire data.


Secondly you need to create a ShareManager class, put it somewhere inside a folder in your project. It is a singleton class, because we will need a same instance to be accessible on different places.


The ShareManager holds your ShareData class and we will be filling that up from our ViewModels! In the Initialize method, you’ll need to hook up to the DataRequested event, because that event will be triggered when you click on the Share button on your Charms bar in Windows 8! The only thing to do inside the method you’ve hooked up, is presenting the needed ShareData to the requester.

Now if you want to enable the Sharing, you’ll need to let Windows 8 know which Views have the Share ability. You do this by instantiating the ShareManager in the code behind of the View.


There is nothing more you need to do in the View itself… the body work is done in the ViewModel. So also in the ViewModel you’ll need to instantiate the ShareManager and when we want to share Event Data we add it when our SelectedEvent data get’s set in the ViewModel by passing the data to the ShareManager.

And that’s it, nothing more to it 🙂

I added a demo project so you can go through the code yourself!

Share Contract demo solution

#ComDayBe – Image manipulation in Windows 8 metro app

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

During this session I presented some technical items on how to make your Windows 8 app more attractive… Because of the fact that we currently only shared the slide deck, I’ll be putting up some small blog posts with code references so you can use these inside your own app as well!

First post is about doing Image manipulation in Windows 8 metro.

Our Community app presents a list of events that contain sessions. Such a session can be given by one speaker or more speakers. What we wanted to achieve was to let the user of our app directly see the image(s) of the speaker(s) when he looks at the session list. But the trick here is that because of the use of XAML templates we only have one Image control inside our session list with a given Width and Height. So we need to transform the given images so that they will fit. The effect we are after is this, one speaker = one large image, more speakers = smaller images inside one large one:


Now how do you do this… well it’s very easy and this thanks to the WriteableBitmapEx lib available on codeplex or through NuGet. But let me suggest you get the source code because you’ll need to tweak one small thing to get a good result! ( more on this later ) This library gives you a whole range of different extensions on the WriteableBitmap class that is available in .Net namespace Windows.UI.Xaml.Media.Imaging. With these extensions you can manipulate your images.

So when you added a reference to the WriteableBitmapEx, you’ll only need a WriteableBitmap inside your code and you are set! What we do in our app, if the session is only given by one speaker we will just be downloading the image from the web ourselves and return it to the image control.

Downloading images from the web is done by using the FromStream extension.


UPDATE: if you get version of the WriteableBitmapEx, you don’t need to change the source code, because as of that version the problem has been fixed!

But befor we continue, do note that the current code base of the FromStream method swaps Red en Blue colour channels! The effect you’ll get are speaker images that look a lot like Navi people from Avatar 🙂 . So therefore, open up the WinRT project of the WriteableBitmapEx solution and search for the FromStream method, it is inside the WriteableBitmapConvertExtensions.cs file! Just put in comment the for block that is underneath the pixelData.DetachPixelData();

But what do we do when we have several speakers and only the same amount of image space inside our XAML? Well we just resize the original images and merge them inside one larger one at specific positions… we currently only support up to 4 speakers, so I didn’t use a sophisticated algorithm to do the transformations.

To do this kind of manipulation we use the Blit method. The Blit method is used on the Target image and you’ll have to give it a set of 4 parameters. The first one is a rectangle indicating where in the new Target image you will be placing the Original image. But the neat thing here is, that by setting this first rectangle parameter you can also in one go resize the Original image! The second parameter is the actual Original image itself. And the third parameter is a source rectangle, also here a neat thing, you can if you want only take out a part of the original image! But we use the complete image… The last parameter is a BlendMode and this is set to Additive.

Now how does this look in code:


So that’s it! Now you have everything in place to get the cool look we showed you in our app 🙂

I’ve added a demo solution – Visual Studio 2012 RC – with all the code, so you can try it out.

WriteableBitmapEx Demo solution