FlyoutControl

  • 2 min to read

Overview

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

Flyout

The FlyoutControl offers the following features.

Declaration

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

<!--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>