Flyout is a general purpose concept/control to give you a content control for the ‘popup’ behavior including light dismiss and positioning in accordance with Windows UI guidelines.
This control is likely primarily going to be used from some type of event handler from an AppBar button to accept input. It is not meant to be a message dialog of any sorts.
Thanks to Tim Heuer for developing this control.
As mentioned in the Flyout Wiki This control does not work declaratively i.e. via XAML. Well there is a simple way to do that. Here’s how:
1. Add a class called FlyoutHelper as below
[ContentProperty(Name = "FlyoutContent")]
public class FlyoutHelper : FrameworkElement
{
Flyout flyout;
public FlyoutHelper()
{
}
public object PlacementTarget
{
get { return (object)GetValue(PlacementTargetProperty); }
set { SetValue(PlacementTargetProperty, value); }
}
// Using a DependencyProperty as the backing store for PlacementTarget. This enables animation, styling, binding, etc...
public static readonly DependencyProperty PlacementTargetProperty =
DependencyProperty.Register("PlacementTarget", typeof(object), typeof(FlyoutHelper), new PropertyMetadata(null));
public object FlyoutContent
{
get { return (object)GetValue(FlyoutContentProperty); }
set { SetValue(FlyoutContentProperty, value); }
}
// Using a DependencyProperty as the backing store for FlyoutContent. This enables animation, styling, binding, etc...
public static readonly DependencyProperty FlyoutContentProperty =
DependencyProperty.Register("FlyoutContent", typeof(object), typeof(FlyoutHelper), new PropertyMetadata(null));
public void Show()
{
if (flyout == null)
flyout = new Flyout();
flyout.PlacementTarget = (FrameworkElement)PlacementTarget;
flyout.Content = FlyoutContent;
flyout.IsOpen = true;
}
public void Hide()
{
flyout.IsOpen = false;
}
public bool IsOpen { get { return flyout != null ? flyout.IsOpen : false; } }
}
The main parts are the two methods Show and Hide which do the most work. I have added two properties which help me create the flyout. You can add more if at all you require them.
2. XAML Usage
Now you have to just place the control where you need it and setting up the target control. Like below:
<Controls:FlyoutHelper x:Name="menu" PlacementTarget="{Binding ElementName=targetButton}">
<Border Background="{StaticResource ApplicationPageBackgroundThemeBrush}" BorderBrush="{StaticResource ButtonBorderThemeBrush}" BorderThickness="1" Padding="5">
<HyperlinkButton Content="Sample Button" Style="{StaticResource TextButtonStyle}"
Grid.Column="1" Grid.Row="1"
Click="Button_Click"/>
</Border>
</Controls:FlyoutHelper>
In the Button_Click event call the show method of the FlyoutHelper
public void Show(object sender, RoutedEventArgs e)
{
menu.Show();
}
Hope this helps in using the Callisto Controls. I might add publish this on Nuget soon.
Callisto: What Is It?
Callisto is a library for use in Windows 8 XAML applications (aka Metro style apps). The XAML framework in Windows.UI.Xaml is great, but has some functionality that isn’t provided in-the-box in a few controls and APIs. Callisto provides added functionality on top of the XAML UI framework for Windows.
Related Links
World Wide Code 
Hi, i tried this code but i cannot make it work. I just declare a button and i bind it to the PlacementTarget property but when i click on the button the flyoutout doesn’t show.
When i debug i see that the property is not set: did i miss something?
It would be great if i make it work.
Thanks.
How did you set the PlacementTarget? Similar to my code using data binding or on the C3 side of things?
What I haven’t shown in my post is the Button click event, in which, you should call the Show method. I thought this was already understood. I’ll update the post soon…
Hi , nice article, but you forgot to calle the Show and Hide methodws within you helper!
Change this:
// Using a DependencyProperty as the backing store for PlacementTarget. This enables animation, styling, binding, etc…
public static readonly DependencyProperty PlacementTargetProperty =
DependencyProperty.Register(“PlacementTarget”, typeof(object), typeof(FlyoutHelper), new PropertyMetadata(null, (sender, args) =>
{
var flyOut = sender as FlyoutHelper;
if (args.NewValue is Button)
{
var tempButton = args.NewValue as Button;
tempButton.Click +=flyOut.Show;
}
}));
public void Show(object sender, RoutedEventArgs e)
{
…..
}
In my reply earlier I had pointed out that the call to show is missing. I have updated the post to include the Show method call.
Thanks for your version of the code. I have not used you method to call the Show method internally. This is because the Placement Target may not be a button at all, it can be any UI element that can be interacted with. The button is just an example.