AtomUI/docs/Desktop.Controls/FloatButton/FloatButtonStyling.md

FloatButton 自定义样式指南

本文档介绍如何通过属性、Style 选择器和 ControlTheme 自定义 AtomUI FloatButton 的外观。

📖 Gallery 源码位置：controlgallery/AtomUIGallery/ShowCases/Views/General/FloatButtonShowCase.axaml

---

1. 通过属性直接控制

按钮类型

<atom:FloatButtonHost ButtonType="Default" />
<atom:FloatButtonHost ButtonType="Primary" />

按钮形状

<atom:FloatButtonHost Shape="Circle" />
<atom:FloatButtonHost Shape="Square" />

自定义图标

<atom:FloatButtonHost Icon="{antdicons:AntDesignIconProvider Kind=CustomerServiceOutlined}" />

自定义位置和偏移

<atom:FloatButtonHost Placement="BottomRight" FloatOffsetX="40" FloatOffsetY="40" />

带描述文本（Square 形状）

<atom:FloatButtonHost Shape="Square"
                       Icon="{antdicons:AntDesignIconProvider Kind=FileTextOutlined}"
                       Description="HELP INFO" />

带 Tooltip

<atom:FloatButtonHost Tooltip="Documents" />
<atom:FloatButtonHost Tooltip="Since 5.25.0+" TooltipColor="blue" />

徽标

<!-- 圆点徽标 -->
<atom:FloatButtonHost IsBadgeEnabled="True" IsDotBadge="True" />

<!-- 数字徽标 -->
<atom:FloatButtonHost IsBadgeEnabled="True" IsDotBadge="False"
                       BadgeCount="5" BadgeColor="blue" />

---

2. 通过 Style 覆盖

统一按钮样式

<Window.Styles>
    <Style Selector="atom|FloatButtonHost">
        <Setter Property="Shape" Value="Square" />
        <Setter Property="ButtonType" Value="Primary" />
    </Style>
</Window.Styles>

统一按钮组样式

<Window.Styles>
    <Style Selector="atom|FloatButtonGroupHost">
        <Setter Property="Shape" Value="Circle" />
        <Setter Property="ButtonType" Value="Primary" />
    </Style>
</Window.Styles>

---

3. 分组触发模式

始终展开模式

<atom:FloatButtonGroupHost Shape="Circle">
    <atom:FloatButton Icon="{antdicons:AntDesignIconProvider Kind=QuestionCircleOutlined}" />
    <atom:FloatButton />
    <atom:BackTopFloatButton />
</atom:FloatButtonGroupHost>

点击触发展开

<atom:FloatButtonGroupHost Trigger="Click"
                            Icon="{antdicons:AntDesignIconProvider Kind=CustomerServiceOutlined}"
                            ButtonType="Primary">
    <atom:FloatButton />
    <atom:FloatButton Icon="{antdicons:AntDesignIconProvider Kind=CommentOutlined}" />
</atom:FloatButtonGroupHost>

悬浮触发展开

<atom:FloatButtonGroupHost Trigger="Hover"
                            Icon="{antdicons:AntDesignIconProvider Kind=CustomerServiceOutlined}"
                            ButtonType="Primary">
    <atom:FloatButton />
    <atom:FloatButton Icon="{antdicons:AntDesignIconProvider Kind=CommentOutlined}" />
</atom:FloatButtonGroupHost>

自定义展开方向

<atom:FloatButtonGroupHost Trigger="Click" Placement="Center"
                            MenuPlacement="Top"
                            Icon="{antdicons:AntDesignIconProvider Kind=UpOutlined}">
    <atom:FloatButton Icon="{antdicons:AntDesignIconProvider Kind=WechatOutlined}" />
    <atom:FloatButton Icon="{antdicons:AntDesignIconProvider Kind=QqOutlined}" />
</atom:FloatButtonGroupHost>

---

4. 返回顶部

<atom:ScrollViewer Height="300">
    <Panel Height="1000">
        <atom:BackTopFloatButtonHost ButtonType="Default" />
    </Panel>
</atom:ScrollViewer>

---

样式选择器速查

选择器	说明
atom|FloatButton	匹配单个 FloatButton
atom|FloatButtonHost	匹配 FloatButtonHost
atom|FloatButtonGroupHost	匹配按钮分组宿主
atom|BackTopFloatButtonHost	匹配返回顶部宿主
atom|FloatButton:pointerover	鼠标悬浮
atom|FloatButton:pressed	按下
atom|FloatButton:icononly	仅图标模式
atom|FloatButton:disabled	禁用