FlyoutControl Class

Represents a flyout control.

Namespace: DevExpress.Xpf.Editors.Flyout

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

Declaration

C#

public class FlyoutControl :
    FlyoutBase

VB.NET

Public Class FlyoutControl
    Inherits FlyoutBase

Remarks

The FlyoutControl represents a hint or popup panel displayed on either side of the screen.

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

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;
        }
    }
}

To learn more, see FlyoutControl.

Related GitHub Examples

The following code snippets (auto-collected from DevExpress Examples) contain references to the FlyoutControl class.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

C#

how-to-use-the-flyoutcontrol-e5092/VB/DXSample/MainWindow.xaml#L21

<Grid.Resources>
    <Style x:Key="CustomFlyoutControlStyle" TargetType="{x:Type dxe:FlyoutControl}">
        <Setter Property="StaysOpen" Value="True"/>

how-to-create-an-app-bar-menu-with-a-popup-t190919/VB/DXSample/MainWindow.xaml#L14

<Grid>
    <dxe:FlyoutControl
        x:Name="flyoutControl"

Inheritance

Object

DispatcherObject

DependencyObject

Visual

UIElement

FrameworkElement

Control

ContentControl

FlyoutBase

FlyoutControl

Extension Methods

GetErrorOperationCommands(Position)

GetErrorOperationCommands(Int32)

GetErrorOperationCommands(Point)