FlyoutControl

• Jun 07, 2019
• 2 minutes to read

Overview

The FlyoutControl is a contextual popup element that can be used to display hints, warnings or additional information.

The FlyoutControl offers the following features.

• Customizable target and placement

  You can attach a flyout to the chosen UI element using the FlyoutBase.PlacementTarget property. The FlyoutSettings.Placement property specifies the position of a flyout relative to the target element.

• Animation

  You can specify the animation type and duration using the FlyoutBase.AllowMoveAnimation and FlyoutBase.AnimationDuration properties.

• Customizable indicator

  The flyout indicator points to the target element. You can specify the indicator position using the FlyoutSettings.IndicatorHorizontalAlignment and FlyoutSettings.IndicatorVerticalAlignment properties. To control the indicator visibility, use the FlyoutSettings.ShowIndicator property.

Declaration

The following example demonstrates how to create a flyout control and change its target and placement.

XAML

<!--MainWindow.xaml-->
<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:FlyoutExample"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" x:Class="FlyoutExample.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="Top" TargetType="dxe:FlyoutControl">
            <Setter Property="Settings">
                <Setter.Value>
                    <dxe:FlyInSettings/>
                </Setter.Value>
            </Setter>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
        </Style>
        <Style x:Key="Button" TargetType="dxe:FlyoutControl">
            <Setter Property="Settings">
                <Setter.Value>
                    <dxe:FlyoutSettings ShowIndicator="True" Placement="Top" IndicatorHorizontalAlignment="Right"/>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid x:Name="LayoutRoot">
        <dxe:FlyoutControl
            x:Name="flyoutControl"
            FontSize="16"
            AllowMoveAnimation="False"
            FontFamily="Segoe UI Light"
            IsOpen="True"/>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <dx:SimpleButton Grid.Column="0" x:Name="simpleButton1" Content="Open flyout 1" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" Click="OpenFlyout"/>
            <dx:SimpleButton Grid.Column="1" x:Name="simpleButton2" Content="Open flyout 2" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" Click="OpenInnerFlyout"/>
        </Grid>
    </Grid>
</Window>

C#

//MainWindow.xaml.cs
using System.Windows;

namespace FlyoutExample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
        void OpenInnerFlyout(object sender, RoutedEventArgs e) {
            flyoutControl.PlacementTarget = LayoutRoot;
            flyoutControl.Content = "My target is " + LayoutRoot.GetType().ToString();
            flyoutControl.Style = Resources["Top"] as Style; 
            flyoutControl.IsOpen = true;
        }
        void OpenFlyout(object sender, RoutedEventArgs e) {
            flyoutControl.PlacementTarget = sender as FrameworkElement;
            flyoutControl.Content = "My target is " + flyoutControl.PlacementTarget.GetType().ToString();
            flyoutControl.Style = Resources["Button"] as Style;
            flyoutControl.IsOpen = true;
        }
    }
}