Callisto Controls: Using Flyout in XAML
May 16, 2013 Leave a comment
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:<span class="hiddenSpellError">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"/>
</Border>
</Controls:FlyoutHelper>
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
Shubhan Chemburkar
