AtomUI/docs/Desktop.Controls/Skeleton/SkeletonStyling.md

Skeleton 自定义样式指南

Skeleton 系列控件的视觉表现通过 ControlTheme + Design Token 系统控制。由于 Skeleton 是一个控件族（包含多个子控件），每个子控件有独立的 ControlTheme，但共享同一套 SkeletonToken。

---

1. 使用属性直接控制

组合骨架屏

<!-- 基本骨架屏（标题 + 段落） -->
<atom:Skeleton IsLoading="True" />

<!-- 带头像的骨架屏 -->
<atom:Skeleton IsShowAvatar="True" IsLoading="True" />

<!-- 自定义段落行数 -->
<atom:Skeleton IsShowAvatar="True" ParagraphRows="4" IsLoading="True" />

<!-- 启用流光动画 -->
<atom:Skeleton IsActive="True" IsLoading="True" />

<!-- 胶囊形圆角 -->
<atom:Skeleton IsRound="True" IsLoading="True" />

<!-- 自定义标题宽度 -->
<atom:Skeleton TitleWidth="80%" IsLoading="True" />

<!-- 包裹真实内容 -->
<atom:Skeleton IsLoading="{Binding IsDataLoading}">
    <TextBlock>真实内容</TextBlock>
</atom:Skeleton>

独立元素骨架屏

<!-- 按钮骨架（不同形状） -->
<atom:SkeletonButton IsActive="True" Shape="Square" />
<atom:SkeletonButton IsActive="True" Shape="Round" />
<atom:SkeletonButton IsActive="True" Shape="Circle" />

<!-- 按钮骨架（不同尺寸） -->
<atom:SkeletonButton SizeType="Large" IsActive="True" />
<atom:SkeletonButton SizeType="Middle" IsActive="True" />
<atom:SkeletonButton SizeType="Small" IsActive="True" />

<!-- 按钮骨架（Block 模式） -->
<atom:SkeletonButton IsBlock="True" IsActive="True" />

<!-- 头像骨架 -->
<atom:SkeletonAvatar IsActive="True" Shape="Circle" />
<atom:SkeletonAvatar IsActive="True" Shape="Square" SizeType="Large" />

<!-- 输入框骨架 -->
<atom:SkeletonInput IsActive="True" />
<atom:SkeletonInput IsActive="True" IsBlock="True" />

<!-- 图片骨架 -->
<atom:SkeletonImage IsActive="True" />

<!-- 自定义节点骨架 -->
<atom:SkeletonNode IsActive="True">
    <antdicons:DotChartOutlined StrokeBrush="#bfbfbf" Width="40" Height="40" />
</atom:SkeletonNode>

<!-- 自定义节点（自定义宽度） -->
<atom:SkeletonNode IsActive="True" Width="160" />

📖 完整示例参考：controlgallery/AtomUIGallery/ShowCases/Views/Feedback/SkeletonShowCase.axaml

---

2. 通过 Style 覆盖样式

全局启用流光动画

<Window.Styles>
    <Style Selector="atom|Skeleton">
        <Setter Property="IsActive" Value="True" />
    </Style>
</Window.Styles>

自定义独立元素的默认尺寸

<Window.Styles>
    <Style Selector="atom|SkeletonButton">
        <Setter Property="SizeType" Value="Large" />
    </Style>
    <Style Selector="atom|SkeletonInput">
        <Setter Property="SizeType" Value="Large" />
    </Style>
</Window.Styles>

统一按钮骨架为胶囊形

<Window.Styles>
    <Style Selector="atom|SkeletonButton">
        <Setter Property="Shape" Value="Round" />
    </Style>
</Window.Styles>

自定义头像骨架为方形

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

组合骨架屏默认启用头像

<Window.Styles>
    <Style Selector="atom|Skeleton">
        <Setter Property="IsShowAvatar" Value="True" />
        <Setter Property="ParagraphRows" Value="4" />
    </Style>
</Window.Styles>

---

3. 尺寸控制

独立元素尺寸

通过 SizeType 控制 SkeletonButton、SkeletonInput、SkeletonAvatar 的高度：

<!-- 大号 -->
<atom:SkeletonButton SizeType="Large" IsActive="True" />
<atom:SkeletonAvatar SizeType="Large" IsActive="True" />
<atom:SkeletonInput SizeType="Large" IsActive="True" />

<!-- 小号 -->
<atom:SkeletonButton SizeType="Small" IsActive="True" />
<atom:SkeletonAvatar SizeType="Small" IsActive="True" />
<atom:SkeletonInput SizeType="Small" IsActive="True" />

Block 模式

<!-- SkeletonButton 和 SkeletonInput 支持 Block 模式 -->
<atom:SkeletonButton IsBlock="True" IsActive="True" />
<atom:SkeletonInput IsBlock="True" IsActive="True" />

自定义头像尺寸

<!-- 通过 Size 属性指定精确像素值 -->
<atom:SkeletonAvatar Size="64" IsActive="True" />

---

4. 动画控制

<!-- 启用流光动画 -->
<atom:Skeleton IsActive="True" IsLoading="True" />
<atom:SkeletonButton IsActive="True" />

<!-- 静态骨架（无动画） -->
<atom:Skeleton IsActive="False" IsLoading="True" />
<atom:SkeletonButton IsActive="False" />

尺寸和动画支持数据绑定：

<atom:SkeletonButton IsActive="{Binding IsSkeletonActive}"
                      SizeType="{Binding SkeletonSizeType}"
                      Shape="{Binding SkeletonButtonShape}" />

---

样式选择器速查

说明：Avalonia 样式选择器中使用 atom|Skeleton 语法引用 atom XML 命名空间下的控件类型，其中 | 是命名空间分隔符。

按控件类型选择

选择器	说明
atom|Skeleton	匹配组合骨架屏
atom|SkeletonButton	匹配按钮骨架
atom|SkeletonInput	匹配输入框骨架
atom|SkeletonAvatar	匹配头像骨架
atom|SkeletonImage	匹配图片骨架
atom|SkeletonNode	匹配自定义节点骨架
atom|SkeletonLine	匹配单行骨架（段落内子元素）
atom|SkeletonParagraph	匹配段落骨架

按属性选择

选择器	说明
atom|Skeleton[IsShowAvatar=True]	匹配显示头像的组合骨架屏
atom|Skeleton[IsShowTitle=True]	匹配显示标题的组合骨架屏
atom|Skeleton[IsShowParagraph=True]	匹配显示段落的组合骨架屏
atom|SkeletonButton[Shape=Circle]	匹配圆形按钮骨架
atom|SkeletonButton[Shape=Round]	匹配胶囊形按钮骨架
atom|SkeletonButton[IsBlock=True]	匹配 Block 模式的按钮骨架
atom|SkeletonAvatar[Shape=Square]	匹配方形头像骨架
atom|SkeletonButton[SizeType=Large]	匹配大号按钮骨架
atom|SkeletonButton[SizeType=Small]	匹配小号按钮骨架
atom|SkeletonLine[IsRound=True]	匹配胶囊形圆角的行骨架

模板部件选择器

选择器	说明
atom|Skeleton /template/ atom|SkeletonAvatar#PART_Avatar	组合骨架屏内的头像部件
atom|Skeleton /template/ atom|SkeletonTitle#PART_Title	组合骨架屏内的标题部件
atom|Skeleton /template/ atom|SkeletonParagraph#PART_Paragraph	组合骨架屏内的段落部件

组合选择器示例

选择器	说明
atom|Skeleton[IsShowAvatar=True][IsShowParagraph=True]	同时显示头像和段落的组合骨架屏
atom|Skeleton[IsShowAvatar=False][IsShowTitle=True]	无头像有标题的组合骨架屏（段落行数默认3）
atom|SkeletonButton[SizeType=Large][Shape=Round]	大号胶囊形按钮骨架
atom|SkeletonAvatar[Shape=Square][SizeType=Small]	小号方形头像骨架