Avalonia UI
首页支持GitHub 仓库English Doc
  • 👋欢迎
  • 文档
    • ⚡快速开始
      • IDE 支持
        • JetBrains Rider 设置
      • 使用 Avalonia 开发
        • Model-View-ViewModel 模式(MVVM)
        • 控件和布局
        • 数据绑定
        • 图像和动画
      • Windows
      • UserControls
      • 资产
      • 开发者工具
      • 错误和警告日志
      • 未处理的异常
      • 应用生命周期
    • 🔁数据绑定
      • 数据上下文
      • 变化通知
      • 绑定
      • 编译绑定
      • 与控件绑定
      • 转换绑定值
      • 绑定到命令
      • 绑定到任务和可观察对象
      • 使用代码进行绑定
      • 在控件模板中实现绑定
      • 绑定Classes
      • 创建和绑定到附加属性
      • Data Validation
    • 🎨样式
      • 样式
      • 选择器
      • 资源
      • 疑难解答
    • 🧰控件
      • AutoCompleteBox
      • Border
      • Buttons
        • Button
        • RepeatButton
        • RadioButton
        • ToggleButton
        • ButtonSpinner
        • SplitButton
        • ToggleSplitButton
      • Calendar
      • Canvas
      • Carousel
      • CheckBox
      • ComboBox
      • ContentControl
      • ContextMenu
      • Decorator
      • DataGrid
        • DataGridColumns
      • DatePicker
      • DockPanel
      • Expander
      • Flyouts
      • Grid
      • GridSplitter
      • Image
      • ItemsControl
      • ItemsRepeater
      • LayoutTransformControl
      • ListBox
      • MaskedTextBox
      • Menu
      • NativeMenu
      • NumericUpDown
      • Panel
      • ProgressBar
      • RelativePanel
      • ScrollBar
      • ScrollViewer
      • Separator
      • Slider
      • SplitView
      • StackPanel
      • TabControl
      • TabStrip
      • TextBlock
      • TrayIcon
      • TreeDataGrid
        • Creating a Hierarchical TreeDataGrid
        • Creating a Flat TreeDataGrid
        • TreeDataGrid column types
      • TimePicker
      • TextBox
      • ToolTip
      • TreeView
      • TransitioningContentControl
      • UserControl
      • Viewbox
      • Window
      • WrapPanel
    • 📚模板
      • 数据模板
      • 在代码中创建数据模板
      • 实现 IDataTemplate 接口
    • ✏️自定义控件
      • 控件类别
      • 定义属性
    • 🖱️输入
      • 路由事件
      • 剪贴板
      • 鼠标与触控设备
      • 快捷键
    • 🔑动画
      • 关键帧动画
      • 过渡
      • 页面过渡
    • 📐布局
      • 面板概述
      • Alignment、Margin 和 Padding
      • 创建自定义面板
    • 📦发布/分发
      • macOS
  • API 参考
    • 🗒️命名空间
      • Avalonia
      • Avalonia.Animation
        • Avalonia.Animation.Easings
        • Avalonia.Animation.Animators
      • Avalonia.Collections
      • Avalonia.Controls
      • Avalonia.Data
        • Avalonia.Data.Core.Plugins
        • Avalonia.Data.Core
        • Avalonia.Data.Converters
      • Avalonia.Diagnostics
      • Avalonia.Dialogs
  • 指南
    • 🐣基础
      • XAML 介绍
      • Code-behind
      • MVVM 架构
      • 在UI线程上操作
    • 🤿深入
      • 在树莓派上运行你的应用
      • 在树莓派上运行你的应用(使用Raspbian Lite)
      • ReactiveUI
        • 视图激活机制
        • 路由
        • 数据持久化
        • 绑定到 Sorted/Filtered 数据
    • 👩‍💻👩💻 开发人员指南
      • 🏭从源代码中构建 Avalonia
      • Avalonia 与 WPF 和 UWP 之间的比较
      • Debugging Previewer
      • Debugging the XAML compiler
      • macOS 开发
      • Release Process
      • 维护稳定的分支
  • 教程
    • 📋待办事项应用
    • 📻音乐商店应用
    • 🕸️在浏览器中运行
    • 📱为移动设备开发
  • 杂项
    • 👪社区
    • 🖥️WPF 开发者建议
    • 📋正在使用 Avalonia 的项目
    • ❔常见问题
由 GitBook 提供支持
在本页
  • Overview
  • FlyoutBase
  • Common Properties for all Flyouts
  • Common Methods for all Flyouts
  • Reference
  • Source code
  • Flyout Types
  • Reference
  • Source code
  • Creating Flyouts
  • Attached Flyouts
  • Context Flyouts
  • Sharing Flyouts
  • Styling Flyouts
  • Creating Custom Flyouts

这有帮助吗?

在GitHub上编辑
  1. 文档
  2. 控件

Flyouts

Overview

Flyouts are light dismissible containers that show arbitrary UI content. Flyouts are not controls and can be declared as a resource and shared between multiple elements within your app.

FlyoutBase

FlyoutBase is the base class for all flyout implementations.

Common Properties for all Flyouts

Property
Description

IsOpen

Gets whether the Flyout is currently open.

Placement

Gets or sets where the Flyout opens relative to its target

ShowMode

Gets or sets the desired show mode of the Flyout, which determines if it is a transient (no focus) UI or not

Target

Gets the target the Flyout is currently assigned to

Common Methods for all Flyouts

Property
Description

ShowAt(Control)

Shows the Flyout at the specified target

ShowAt(Control, bool)

Shows the Flyout at the specified target, but places it at the current pointer position

Hide

Hides the Flyout

Reference

Source code

Flyout Types

There are two built-in types of Flyouts: Flyout and MenuFlyout. A regular Flyout has no special logic and is just a simple container for any arbitrary UI content.

MenuFlyout, as the name implies, creates a Menu.

Reference

Source code

Creating Flyouts

In order to be shown Flyouts have to be attached to a specific control, though this is not a static assignment and can be changed at runtime. Button has a Flyout property that can be used to open a Flyout upon click.

<Button Content="Click me">
    <Button.Flyout>
        <Flyout>
            <TextBlock Text="Flyout Content!" />
        </Flyout>
    </Button.Flyout>
</Button>

Attached Flyouts

For other controls that don't have built-in support for flyouts, one can be assigned using attached flyouts

<Border Background="Red" PointerPressed="Border_PointerPressed">
    <FlyoutBase.AttachedFlyout>
        <Flyout>
            <TextBlock Text="AttachedFlyout Content!" />
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</Border>

Attached Flyouts can be shown by calling the ShowAttachedFlyout method

public void Border_PointerPressed(object sender, RoutedEventArgs args)
{
    FlyoutBase.ShowAttachedFlyout(sender as Control);
}

Context Flyouts

Controls can also utilize Context Flyouts, which is an alternative/replacement to ContextMenus that provides a sharable, richer UI experience than simple context menus. NOTE: A control cannot have both a ContextFlyout and ContextMenu at the same time.

ContextFlyouts are invoked automatically like normal ContextMenus. Although custom behaviors and logic an be implemented by invoking it manually (like any other flyout: ContextFlyout.ShowAt(Control)) or responding to the ContextRequested event

Sharing Flyouts

As previously mentioned, Flyouts can be shared between various elements within your app.

<Window.Resources>
    <Flyout x:Key="MySharedFlyout">
        <!-- Flyout content here -->
    </Flyout>
</Window.Resources>

<Button Content="Click me!" Flyout="{StaticResource MySharedFlyout}" />

<Button Content="Now click me!" Flyout="{StaticResource MySharedFlyout}" />

Styling Flyouts

Although Flyouts are not controls themselves, their general appearance can still be customized by targeting the presenter the Flyout uses to display its content. For a normal Flyout this is FlyoutPresenter and for MenuFlyout this is MenuFlyoutPresenter. Because flyout presenters are not exposed, special style classes that should pertain to specific flyouts can be passed using the FlyoutPresenterClasses property on FlyoutBase

<Style Selector="FlyoutPresenter.mySpecialClass">
    <Setter Property="Background" Value="Red" />
</Style>

<Flyout FlyoutPresenterClasses="mySpecialClass">
    <!-- Flyout content here -->
</Flyout>

Creating Custom Flyouts

To create a custom flyout type, derive from FlyoutBase. You'll have to override the abstract method CreatePresenter() to specify the presenter the Flyout should use to display its content. This can be any type of control, but note that this is the root content for the inner popup and should be styled with background, border, corner radius, etc. to match other popups. You can still use a normal FlyoutPresenter if you wish

The following example creates a simple Flyout that hosts an image

public class MyImageFlyout : FlyoutBase
{
    public static readonly StyledProperty<IImage> ImageProperty = AvaloniaProperty.Register<MyImageFlyout, IImage>(nameof(Image));

    [Content]
    public IImage Image { get; set; }

    protected override Control CreatePresenter()
    {
        // In this example, we'll use the default FlyoutPresenter as the root content, and add an Image control to show our content
        return new FlyoutPresenter
        {
            Content = new Image
            {
                // Use binding here so the image automatically updates when the property updates
                [!Image.SourceProperty] = this[!ImageProperty]
            }
        };
    }
}
上一页Expander下一页Grid

最后更新于2年前

这有帮助吗?

🧰
FlyoutBase
FlyoutBase.cs
FlyoutShowMode.cs (enum)
FlyoutPlacementMode.cs (enum)
Flyout
MenuFlyout
Flyout.cs
MenuFlyout.cs
Basic Flyout
Basic MenuFlyout