@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:
|
1 |
<Page.BottomAppBar> |
|
1 |
<AppBar x:Name=<span class="str">"BottomAppBar"</span> Padding=<span class="str">"10,0,10,0"</span> Visibility=<span class="str">"Visible"</span> IsSticky=<span class="str">"True"</span> IsOpen=<span class="str">"True"</span>> |
|
1 |
<Grid> |
|
1 |
<StackPanel x:Name=<span class="str">"RightPanel"</span> Orientation=<span class="str">"Horizontal"</span> Grid.Column=<span class="str">"0"</span> HorizontalAlignment=<span class="str">"Right"</span>> |
|
1 |
<Button Style=<span class="str">"{StaticResource FilterAppBarButtonStyle}"</span> Tag=<span class="str">"Filter"</span> Click=<span class="str">"ShowFlyoutMenu"</span> /> |
|
1 |
</StackPanel> |
|
1 |
</Grid> |
|
1 |
</AppBar> |
|
1 |
</Page.BottomAppBar> |
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:
|
1 |
<Style x:Key=<span class="str">"FilterAppBarButtonStyle"</span> TargetType=<span class="str">"Button"</span> BasedOn=<span class="str">"{StaticResource AppBarButtonStyle}"</span>> |
|
1 |
<Setter Property=<span class="str">"AutomationProperties.AutomationId"</span> Value=<span class="str">"FilterAppBarButton"</span>/> |
|
1 |
<Setter Property=<span class="str">"AutomationProperties.Name"</span> Value=<span class="str">"Filter"</span>/> |
|
1 |
<Setter Property=<span class="str">"Content"</span> Value=<span class="str">"&#xE16E;"</span>/> |
|
1 |
</Style> |
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:
|
1 |
<span class="kwrd">private</span> <span class="kwrd">void</span> ShowFlyoutMenu(<span class="kwrd">object</span> sender, RoutedEventArgs e) |
|
1 |
{ |
|
1 |
Flyout flyOut = <span class="kwrd">new</span> Flyout(); |
|
1 |
flyOut.PlacementTarget = sender <span class="kwrd">as</span> UIElement; |
|
1 |
flyOut.Placement = PlacementMode.Top; |
|
1 |
  |
|
1 |
Menu menu = <span class="kwrd">new</span> Menu(); |
|
1 |
<span class="rem">// Do set a width, because there is currently a small issue with Flyout control if you only use ToggleMenuItems</span> |
|
1 |
<span class="rem">// https://github.com/timheuer/callisto/issues/24</span> |
|
1 |
menu.MinWidth = 110; |
|
1 |
  |
|
1 |
ToggleMenuItem tmiAll = <span class="kwrd">new</span> ToggleMenuItem(); |
|
1 |
tmiAll.Text = <span class="str">"All"</span>; |
|
1 |
tmiAll.Tapped += (a, b) => |
|
1 |
{ |
|
1 |
_toggleMenuChecked[<span class="str">"All"</span>] = !_toggleMenuChecked[<span class="str">"All"</span>]; |
|
1 |
  |
|
1 |
<span class="kwrd">foreach</span> (<span class="kwrd">string</span> key <span class="kwrd">in</span> _toggleMenuChecked.Keys.ToList()) |
|
1 |
{ |
|
1 |
<span class="kwrd">if</span> (!key.Equals(<span class="str">"All"</span>)) |
|
1 |
_toggleMenuChecked[key] = _toggleMenuChecked[<span class="str">"All"</span>]; |
|
1 |
} |
|
1 |
}; |
|
1 |
  |
|
1 |
ToggleMenuItem tmiFirst = <span class="kwrd">new</span> ToggleMenuItem(); |
|
1 |
tmiFirst.Text = <span class="str">"First"</span>; |
|
1 |
ToggleMenuItem tmiSecond = <span class="kwrd">new</span> ToggleMenuItem(); |
|
1 |
tmiSecond.Text = <span class="str">"Second"</span>; |
|
1 |
ToggleMenuItem tmiThird = <span class="kwrd">new</span> ToggleMenuItem(); |
|
1 |
tmiThird.Text = <span class="str">"Third"</span>; |
|
1 |
  |
|
1 |
menu.Items.Add(tmiAll); |
|
1 |
menu.Items.Add(<span class="kwrd">new</span> MenuItemSeparator()); |
|
1 |
menu.Items.Add(tmiFirst); |
|
1 |
menu.Items.Add(tmiSecond); |
|
1 |
menu.Items.Add(tmiThird); |
|
1 |
  |
|
1 |
menu.Items.Select(item => { |
|
1 |
<span class="kwrd">if</span> (item <span class="kwrd">is</span> ToggleMenuItem) |
|
1 |
{ |
|
1 |
item.Tapped += (a, b) => _toggleMenuChecked[((ToggleMenuItem)item).Text] = !_toggleMenuChecked[((ToggleMenuItem)item).Text]; |
|
1 |
((ToggleMenuItem)item).IsChecked = _toggleMenuChecked[((ToggleMenuItem)item).Text]; |
|
1 |
} |
|
1 |
  |
|
1 |
<span class="kwrd">return</span> item; |
|
1 |
}).ToList(); |
|
1 |
  |
|
1 |
flyOut.Content = menu; |
|
1 |
flyOut.IsOpen = <span class="kwrd">true</span>; |
|
1 |
  |
|
1 |
UpdateLayout(); |
|
1 |
} |
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…
Thanks or the information. It was useful to me. But I have to tell you that the Lambda expressions here are incomprehensable. Necessary?
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 🙂