FlyoutControl Class

Represents a flyout control.

Namespace: DevExpress.Xpf.Editors.Flyout

Assembly: DevExpress.Xpf.Core.v20.2.dll

Declaration

public class FlyoutControl :
    FlyoutBase
Public Class FlyoutControl
    Inherits FlyoutBase

Remarks

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

Flyout

Set the FlyoutBase.IsOpen to true to show the FlyoutControl. Set the FlyoutBase.StaysOpen property to true to make the FlyoutControl remain visible after clicking anywhere outside it.

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: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"
        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>
See Also