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