WPF骨架屏控件(Skeleton)

一．骨架屏介绍

骨架屏（Skeleton）是一种用于提升用户体验的界面设计技术，通过在页面数据加载前展示简化的页面框架结构（如占位符、灰色块等），模拟真实内容的布局，避免用户面对空白页面或长时间等待的焦虑感。
特点及原理：
1.占位展示： 骨架屏由基本框架和占位元素（如线条、矩形）组成，形状与实际内容布局一致，例如用短横线模拟文本、矩形框模拟图片区域。
2.动态替换： 当真实数据加载完成后，骨架屏会被无缝替换为实际内容，通过渐变或动画实现平滑过渡。
3.设计原则： 通常采用低饱和度色调（如灰色）和简洁的动画效果，避免视觉干扰，同时传达“加载中”的信号。
优势：
1.提升感知速度： 虽然不缩短实际加载时间，但通过视觉反馈让用户感觉加载更快。
2.降低跳出率： 减少因空白页面导致的用户流失。
3.兼容性： 适用于各种异步加载场景。

二．骨架屏控件设计

2.1 骨架的构成

从骨架屏的特点可以看出，骨架主要由方形、圆形、条形几种基本图案构成，将它们以不同的方式排列，即可完成骨架的搭建，下面我们来看看几种比较典型的情况。

图 2.1.1 文本骨架屏

图 2.1.2 带操作的骨架屏

图 2.1.3 带头像的骨架屏

图 2.1.4 带图片和视频的骨架屏

2.2 骨架的绘制

我们来看看怎么将这些方形、圆形、条形画到控件上，如果按常规的方式，先使用一个布局面板控件设计好骨架，然后再往里面填充Rectangle或Ellipse，这样就能达到骨架屏的效果，但是如果每一种布局都这样去写一遍，那就太繁琐了，得不偿失。如果通过一些参数去自动设置布局及填充，理论上是可以的，但是这种方式也有一个问题，那就是动画，为了表示骨架下的页面元素正在加载，一般会给它设计一个光影流动的效果，如果按照这种方式，每个骨架组件都是独立的，那么我们控制光影流动（渐变画刷）就会变得比较麻烦，虽然也有办法实现，但是从代码量和性能上来说都不是一个好的选择。那么有没有可以单独添加图形，又方便控制渐变效果，还性能好的控件呢，答案是有，它就是Path，我们可以往Path中添加各种图形，又可以整体控制它的渐变效果。以下是简单的示例：

<Path HorizontalAlignment="Center" VerticalAlignment="Center">
   <Path.Fill>
       <RadialGradientBrush>
           <GradientStop Color="#FFBBBBBB" Offset="1"/>
           <GradientStop Color="White" Offset="0"/>
       </RadialGradientBrush>
   </Path.Fill>
   <Path.Data>
       <GeometryGroup>
           <RectangleGeometry Rect="0,0,100,100" RadiusX="50" RadiusY="50"/>
           <RectangleGeometry Rect="105,0,100,100" />
           <RectangleGeometry Rect="210,40,100,20" />
       </GeometryGroup>
   </Path.Data>
</Path>

2.3 骨架的排列

通过以上示例代码可以看出，在Path中添加图形需要设置关键属性Rect，Rect需要4个double类型的参数，前两个参数为X和Y坐标，后两个为Width和Height，只要设置了正确的参数，就可以显示出我们需要的骨架，但是如果每次都要去自己计算坐标和尺寸，那肯定不太现实，所以我们需要设计一种排列规则，只要设置参数就可以让它按照正确的方式排列。

在真实的项目中，页面元素的布局千变万化，所以骨架的排列应考虑到是否能够满足各种不同的情况，同时还要兼顾易用性，不能设计得太复杂，学习成本越低越好。基于以上考虑，我们可以借鉴Grid的布局逻辑，我们都知道在Grid中布局需要预先设置行数和列数，并在添加到Grid中的控件上设置Grid.Row和Grid.Column附加属性来确定当前控件是属于哪个位置，请看以下代码：

<Grid>
    <Grid.RowDefinitions>
       <RowDefinition Height="*" />
       <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto" />
       <ColumnDefinition Width="10" />
       <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Rectangle Grid.Row="0" Grid.Column="0"/>
</Grid>

Grid的这种设计可以应对各种复杂的布局，我们只是为了显示骨架，显然不需要这么复杂的功能，我们可以将它精简一下，只要能满足布局需求就可以了，我们可以将Path中添加的RectangleGeometry的Width和Height使用Grid中设置Width和Height的方式来设置，Grid中的Width和Height都是GridLengh类型，它使用自动(Auto)、像素(Pixel)、比例(Star)三种方式来设置Width和Height，由于我们不会有根据内容来确定宽度和高度的需求，所我们实际只会用到像素(Pixel)和比例(Star)两种方式来布局。

基于以上理论，我们可以将业务大致抽象，形成以下设计：

1.Skeleton类

骨架控件，有一个Items属性，该属性可以设置SkeletonItem或SkeletonGroup类型值，该属性包含了所有的骨架绘制参数。

2.SkeletonItem类

骨架项，所有能看到的部分（方形、圆形、条形）都由它绘制、可以通过Width和Height属性控制宽度和高度，可以通过Margin属性设置边距，可以通过HorizontalAlignment和VerticalAlignment属性设置水平和垂直对齐方向，可以通过RadiusX和RadiusY属性设置圆角半径，可以通过IsVisible属性控制可见性。

3.SkeletonGroup类

骨架分组，可以将多个SkeletonItem和SkeletonGroup放置到Children属性中，形成嵌套关系，再配合Orientation属性设置排列方向，就可以实现复杂的布局，除此之外，它还可以像SkeletonItem一样，设置Width、Height、HorizontalAlignment、VerticalAlignment等属性。

2.3 动画效果

光影效果只需要控制画刷的横向位置变化就行了，这里我们使用的是RadialGradientBrush来填充Path的背景，我们可以添加一个动画，控制RadialGradientBrush的RelativeTransform属性中的TranslateTransform参数。
Path代码：

<Path HorizontalAlignment="Center" VerticalAlignment="Center">
   <Path.Fill>
       <RadialGradientBrush>
           <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                      <ScaleTransform />
                      <SkewTransform />
                      <RotateTransform />
                      <TranslateTransform X="-6" />
                  </TransformGroup>
           </RadialGradientBrush.RelativeTransform>
           <GradientStop Color="#FFBBBBBB" Offset="1"/>
           <GradientStop Color="White" Offset="0"/>
       </RadialGradientBrush>
   </Path.Fill>
   <Path.Data>
       <GeometryGroup>
           <RectangleGeometry Rect="0,0,100,100" RadiusX="50" RadiusY="50"/>
           <RectangleGeometry Rect="105,0,100,100" />
           <RectangleGeometry Rect="210,40,100,20" />
       </GeometryGroup>
   </Path.Data>
</Path>

动画代码：

<Storyboard
    AutoReverse="False"
    RepeatBehavior="Forever">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
       <EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

三．骨架屏控件实现

根据以上设计思路，我们需要Skeleton、SkeletonItem、SkeletonGroup三个类来实现骨架功能，其中SkeletonItem、SkeletonGroup同属骨架的组成部分，它们有一些相同的属性，所以它们可以抽象出一个共同的父类SkeletonComponent，以下是部分关键代码，仅供参考。

3.1 Skeleton

[ContentProperty("Items")]
public class Skeleton : FrameworkElement
{
    public SkeletonComponent Items
    {
       get { return (SkeletonComponent)GetValue(ItemsProperty); }
       set { SetValue(ItemsProperty, value); }
    }
 
    public static readonly DependencyProperty ItemsProperty =
       DependencyProperty.Register("Items", typeof(SkeletonComponent), typeof(Skeleton), new FrameworkPropertyMetadata(null));
}

3.2 SkeletonComponent

public abstract class SkeletonComponent : DependencyObject
{
    public GridLength Width
    {
       get { return (GridLength)GetValue(WidthProperty); }
       set { SetValue(WidthProperty, value); }
    }
 
    public static readonly DependencyProperty WidthProperty =
       DependencyProperty.Register("Width", typeof(GridLength), typeof(SkeletonComponent), new PropertyMetadata(new GridLength(1.0, GridUnitType.Star)));
 
 
    public GridLength Height
    {
       get { return (GridLength)GetValue(HeightProperty); }
       set { SetValue(HeightProperty, value); }
    }
 
    public static readonly DependencyProperty HeightProperty =
       DependencyProperty.Register("Height", typeof(GridLength), typeof(SkeletonComponent), new PropertyMetadata(new GridLength(1.0, GridUnitType.Star));
 
    public Thickness Margin
    {
       get { return (Thickness)GetValue(MarginProperty); }
       set { SetValue(MarginProperty, value); }
    }
 
    public static readonly DependencyProperty MarginProperty =
       DependencyProperty.Register("Margin", typeof(Thickness), typeof(SkeletonComponent));
 
 
    public HorizontalAlignment HorizontalAlignment
    {
       get { return (HorizontalAlignment)GetValue(HorizontalAlignmentProperty); }
       set { SetValue(HorizontalAlignmentProperty, value); }
    }
 
    public static readonly DependencyProperty HorizontalAlignmentProperty =
       DependencyProperty.Register("HorizontalAlignment", typeof(HorizontalAlignment), typeof(SkeletonComponent), new PropertyMetadata(HorizontalAlignment.Left));
 
 
    public VerticalAlignment VerticalAlignment
    {
       get { return (VerticalAlignment)GetValue(VerticalAlignmentProperty); }
       set { SetValue(VerticalAlignmentProperty, value); }
    }
 
    public static readonly DependencyProperty VerticalAlignmentProperty =
       DependencyProperty.Register("VerticalAlignment", typeof(VerticalAlignment), typeof(SkeletonComponent), new PropertyMetadata(VerticalAlignment.Top));
}

3.3 SkeletonItem

public class SkeletonItem : SkeletonComponent
{
    public double RadiusX
    {
       get { return (double)GetValue(RadiusXProperty); }
       set { SetValue(RadiusXProperty, value); }
    }
 
    public static readonly DependencyProperty RadiusXProperty =
       DependencyProperty.Register("RadiusX", typeof(double), typeof(SkeletonItem), new PropertyMetadata(0d));
 
    public double RadiusY
    {
       get { return (double)GetValue(RadiusYProperty); }
       set { SetValue(RadiusYProperty, value); }
    }
 
    public static readonly DependencyProperty RadiusYProperty =
       DependencyProperty.Register("RadiusY", typeof(double), typeof(SkeletonItem), new PropertyMetadata(0d));
 
    public bool IsVisible
    {
       get { return (bool)GetValue(IsVisibleProperty); }
       set { SetValue(IsVisibleProperty, value); }
    }
 
    public static readonly DependencyProperty IsVisibleProperty =
       DependencyProperty.Register("IsVisible", typeof(bool), typeof(SkeletonItem), new PropertyMetadata(true));
}

3.4 SkeletonGroup

[ContentProperty("Children")]
public class SkeletonGroup : SkeletonComponent
{
   public SkeletonComponentCollection Children
    {
       get { return (SkeletonComponentCollection)GetValue(ChildrenProperty); }
       private set { SetValue(ChildrenProperty, value); }
    }
 
   public static readonly DependencyProperty ChildrenProperty =
       DependencyProperty.Register("Children", typeof(SkeletonComponentCollection), typeof(SkeletonGroup), new PropertyMetadata(null));
 
   public Orientation Orientation
    {
       get { return (Orientation)GetValue(OrientationProperty); }
       set { SetValue(OrientationProperty, value); }
    }
 
   public static readonly DependencyProperty OrientationProperty =
       DependencyProperty.Register("Orientation", typeof(Orientation), typeof(SkeletonGroup), new PropertyMetadata(Orientation.Vertical));
}

四．骨架屏应用案例

以下是结合前文《可能是迄今为止最好用的WPF加载动画功能(没有之一)》中的FrameworkElementExtension.IsLoading附加属性实现的骨架屏控制案例，如有疑问可转到该文中查看。

案例一：文字+按钮

<Grid
extensions:FrameworkElementExtension.IsLoading="{Binding ElementName=cbox_loading, Path=IsChecked}"
extensions:FrameworkElementExtension.MaskColor="White">
    <Grid.RowDefinitions>
       <RowDefinition Height="*" />
       <RowDefinition Height="10" />
       <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBlock
       LineHeight="18"
       Text="The verb to design expresses the process of developinga design.In some cases, the direct construction of anobject without an explicit prior plan."
       TextWrapping="Wrap" />
    <Button
       Grid.Row="2"
       Width="80"
       Height="25"
       HorizontalAlignment="Left">
       确定
    </Button>
    <extensions:FrameworkElementExtension.MaskContent>
       <controls:Skeleton>
           <controls:SkeletonGroup>
                <controls:SkeletonGroup>
                    <controls:SkeletonItem Margin="0,2" />
                    <controls:SkeletonItem Margin="0,2" />
                    <controls:SkeletonItem Width="200" Margin="0,2" />
                </controls:SkeletonGroup>
                <controls:SkeletonItem Height="10" IsVisible="False" />
                <controls:SkeletonItem
                    Width="80"
                    Height="25"
                    HorizontalAlignment="Left" />
           </controls:SkeletonGroup>
       </controls:Skeleton>
    </extensions:FrameworkElementExtension.MaskContent>
</Grid>

案例二：文字+圆角按钮

<Grid
    Margin="0,30,0,0"
    extensions:FrameworkElementExtension.IsLoading="{Binding ElementName=cbox_loading, Path=IsChecked}"
    extensions:FrameworkElementExtension.MaskColor="White">
    <Grid.RowDefinitions>
       <RowDefinition Height="*" />
       <RowDefinition Height="10" />
       <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBlock
       LineHeight="18"
       Text="The verb to design expresses the process of developinga design.In some cases, the direct construction of anobject without an explicit prior plan."
       TextWrapping="Wrap" />
    <Button
       Grid.Row="2"
       Width="80"
       Height="25"
       HorizontalAlignment="Left"
       Style="{StaticResource ButtonStyle1}">
       确定
    </Button>
    <extensions:FrameworkElementExtension.MaskContent>
       <controls:Skeleton>
           <controls:SkeletonGroup>
                <controls:SkeletonGroup>
                    <controls:SkeletonItem
                        Margin="0,2"
                        RadiusX="3"
                        RadiusY="3" />
                    <controls:SkeletonItem
                        Margin="0,2"
                        RadiusX="3"
                        RadiusY="3" />
                    <controls:SkeletonItem
                        Width="200"
                        Margin="0,2"
                        RadiusX="3"
                        RadiusY="3" />
                </controls:SkeletonGroup>
                <controls:SkeletonItem Height="10" IsVisible="False" />
                <controls:SkeletonItem
                    Width="80"
                    Height="25"
                    HorizontalAlignment="Left"
                    RadiusX="13"
                    RadiusY="13" />
           </controls:SkeletonGroup>
       </controls:Skeleton>
    </extensions:FrameworkElementExtension.MaskContent>
</Grid>

案例三：头像+文字

<Grid
    Margin="0,30,0,0"
    extensions:FrameworkElementExtension.IsLoading="{Binding ElementName=cbox_loading, Path=IsChecked}"
    extensions:FrameworkElementExtension.MaskColor="White">
    <Grid.RowDefinitions>
       <RowDefinition Height="*" />
       <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto" />
       <ColumnDefinition Width="10" />
       <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
 
    <Border
       Grid.RowSpan="3"
       Width="36"
       Height="36"
       VerticalAlignment="Top"
       BorderThickness="0"
       CornerRadius="18">
       <Border.Background>
           <ImageBrush ImageSource="/QS.Controls.SkeletonSample;component/Images/user.png" />
       </Border.Background>
    </Border>
 
    <TextBlock
       Grid.Column="2"
       VerticalAlignment="Center"
       Text="Balzac" />
    <TextBlock
       Grid.Row="1"
       Grid.Column="2"
       VerticalAlignment="Center"
       Text="Comment body content." />
    <extensions:FrameworkElementExtension.MaskContent>
       <controls:Skeleton>
           <controls:SkeletonGroup Orientation="Horizontal">
                <controls:SkeletonItem
                    Width="36"
                    Height="36"
                    VerticalAlignment="Top"
                    RadiusX="18"
                    RadiusY="18" />
                <controls:SkeletonGroup Margin="10,0,0,0" Orientation="Vertical">
                    <controls:SkeletonItem Width="100" Margin="0,0,0,2" />
                    <controls:SkeletonItem Margin="0,2,0,0" />
                </controls:SkeletonGroup>
           </controls:SkeletonGroup>
       </controls:Skeleton>
    </extensions:FrameworkElementExtension.MaskContent>
</Grid>
 
<Grid
    Margin="0,30,0,0"
    extensions:FrameworkElementExtension.IsLoading="{Binding ElementName=cbox_loading, Path=IsChecked}"
    extensions:FrameworkElementExtension.MaskColor="White">
    <Grid.RowDefinitions>
       <RowDefinition Height="*" />
       <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto" />
       <ColumnDefinition Width="10" />
       <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
 
    <Border
       Grid.RowSpan="3"
       Width="36"
       Height="36"
       VerticalAlignment="Top">
       <Border.Background>
           <ImageBrush ImageSource="/QS.Controls.SkeletonSample;component/Images/user.png" />
       </Border.Background>
    </Border>
 
    <TextBlock
       Grid.Column="2"
       VerticalAlignment="Center"
       Text="Balzac" />
    <TextBlock
       Grid.Row="1"
       Grid.Column="2"
       VerticalAlignment="Center"
       Text="Comment body content." />
    <extensions:FrameworkElementExtension.MaskContent>
       <controls:Skeleton>
           <controls:SkeletonGroup Orientation="Horizontal">
                <controls:SkeletonItem
                    Width="36"
                    Height="36"
                    VerticalAlignment="Top" />
                <controls:SkeletonGroup Margin="10,0,0,0" Orientation="Vertical">
                    <controls:SkeletonItem Width="100" Margin="0,0,0,2" />
                    <controls:SkeletonItem Margin="0,2,0,0" />
                </controls:SkeletonGroup>
           </controls:SkeletonGroup>
       </controls:Skeleton>
    </extensions:FrameworkElementExtension.MaskContent>
</Grid>

案例四：文字+图片

<Grid
    Height="80"
    Margin="0,30,0,0"
    extensions:FrameworkElementExtension.IsLoading="{Binding ElementName=cbox_loading, Path=IsChecked}"
    extensions:FrameworkElementExtension.MaskColor="White">
    <Grid.RowDefinitions>
       <RowDefinition />
       <RowDefinition Height="10" />
       <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*" />
       <ColumnDefinition Width="10" />
       <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
 
    <TextBlock
       VerticalAlignment="Center"
       LineHeight="20"
       Text="The verb to design expresses the processof developing a design."
       TextWrapping="Wrap" />
    <TextBlock
       Grid.Row="2"
       VerticalAlignment="Center"
       LineHeight="20"
       Text="The verb to design expresses the processof developing a design."
       TextWrapping="Wrap" />
 
    <Border
       Grid.Row="0"
       Grid.RowSpan="3"
       Grid.Column="2"
       Width="80"
       Height="80">
       <Border.Background>
           <ImageBrush ImageSource="/QS.Controls.SkeletonSample;component/Images/user.png" />
       </Border.Background>
    </Border>
    <extensions:FrameworkElementExtension.MaskContent>
       <controls:Skeleton>
           <controls:SkeletonGroup Orientation="Horizontal">
                <controls:SkeletonGroup Margin="0,0,20,0" Orientation="Vertical">
                    <controls:SkeletonItem Margin="0,0,0,3" />
                    <controls:SkeletonItem Width="150" Margin="0,3,0,0" />
                    <controls:SkeletonItem Height="10" IsVisible="False" />
                    <controls:SkeletonItem Margin="0,0,0,3" />
                    <controls:SkeletonItem Width="150" Margin="0,3,0,0" />
                </controls:SkeletonGroup>
                <controls:SkeletonItem Width="80" Height="80" />
           </controls:SkeletonGroup>
       </controls:Skeleton>
    </extensions:FrameworkElementExtension.MaskContent>
</Grid>

案例五：图片

<Grid
    Height="200"
    Margin="0,30,0,0"
    extensions:FrameworkElementExtension.IsLoading="{Binding ElementName=cbox_loading, Path=IsChecked}"
    extensions:FrameworkElementExtension.MaskColor="White">
    <Grid.RowDefinitions>
       <RowDefinition />
       <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
       <ColumnDefinition />
       <ColumnDefinition />
       <ColumnDefinition />
    </Grid.ColumnDefinitions>
 
    <Border Margin="2" CornerRadius="4">
       <Border.Background>
           <ImageBrush ImageSource="/QS.Controls.SkeletonSample;component/Images/user.png" />
       </Border.Background>
    </Border>
    <Border
       Grid.Column="1"
       Margin="2"
       CornerRadius="4">
       <Border.Background>
           <ImageBrush ImageSource="/QS.Controls.SkeletonSample;component/Images/user.png" />
       </Border.Background>
    </Border>
    <Border
       Grid.Column="2"
       Margin="2"
       CornerRadius="4">
       <Border.Background>
           <ImageBrush ImageSource="/QS.Controls.SkeletonSample;component/Images/user.png" />
       </Border.Background>
    </Border>
    <Border
       Grid.Row="1"
       Margin="2"
       CornerRadius="4">
       <Border.Background>
           <ImageBrush ImageSource="/QS.Controls.SkeletonSample;component/Images/user.png" />
       </Border.Background>
    </Border>
    <Border
       Grid.Row="1"
       Grid.Column="1"
       Margin="2"
       CornerRadius="4">
       <Border.Background>
           <ImageBrush ImageSource="/QS.Controls.SkeletonSample;component/Images/user.png" />
       </Border.Background>
    </Border>
    <Border
       Grid.Row="1"
       Grid.Column="2"
       Margin="2"
       CornerRadius="4">
       <Border.Background>
           <ImageBrush ImageSource="/QS.Controls.SkeletonSample;component/Images/user.png" />
       </Border.Background>
    </Border>
    <extensions:FrameworkElementExtension.MaskContent>
       <controls:Skeleton>
           <controls:SkeletonGroup Orientation="Vertical">
                <controls:SkeletonGroup Orientation="Horizontal">
                    <controls:SkeletonItem
                        Margin="2"
                        RadiusX="4"
                        RadiusY="4" />
                    <controls:SkeletonItem
                        Margin="2"
                        RadiusX="4"
                        RadiusY="4" />
                    <controls:SkeletonItem
                        Margin="2"
                        RadiusX="4"
                        RadiusY="4" />
                </controls:SkeletonGroup>
                <controls:SkeletonGroup Orientation="Horizontal">
                    <controls:SkeletonItem
                        Margin="2"
                        RadiusX="4"
                        RadiusY="4" />
                    <controls:SkeletonItem
                        Margin="2"
                        RadiusX="4"
                        RadiusY="4" />
                    <controls:SkeletonItem
                        Margin="2"
                        RadiusX="4"
                        RadiusY="4" />
                </controls:SkeletonGroup>
           </controls:SkeletonGroup>
       </controls:Skeleton>
    </extensions:FrameworkElementExtension.MaskContent>
</Grid>

案例六：图片+文字

<Grid
    Width="200"
    Height="220"
    Margin="0,30,0,0"
    extensions:FrameworkElementExtension.IsLoading="{Binding ElementName=cbox_loading, Path=IsChecked}"
    extensions:FrameworkElementExtension.MaskColor="White">
    <Grid.RowDefinitions>
       <RowDefinition Height="*" />
       <RowDefinition Height="15" />
       <RowDefinition Height="20" />
       <RowDefinition Height="20" />
       <RowDefinition Height="20" />
       <RowDefinition Height="20" />
    </Grid.RowDefinitions>
 
    <Border CornerRadius="4">
       <Border.Background>
           <ImageBrush ImageSource="/QS.Controls.SkeletonSample;component/Images/user.png" Stretch="UniformToFill" />
       </Border.Background>
    </Border>
 
    <TextBlock
       Grid.Row="2"
       VerticalAlignment="Center"
       Text="The verb to design expresses the " />
    <TextBlock
       Grid.Row="3"
       VerticalAlignment="Center"
       Text="processof developing a design." />
    <TextBlock
       Grid.Row="4"
       VerticalAlignment="Center"
       Foreground="#FFCFD2D8"
       Text="Balzac" />
    <TextBlock
       Grid.Row="5"
       VerticalAlignment="Center"
       Foreground="#FFCFD2D8"
       Text="396 k views a weeks ago" />
    <extensions:FrameworkElementExtension.MaskContent>
       <controls:Skeleton>
           <controls:SkeletonGroup Orientation="Vertical">
                <controls:SkeletonItem RadiusX="4" RadiusY="4" />
                <controls:SkeletonItem Height="15" IsVisible="False" />
                <controls:SkeletonItem Height="20" Margin="0,2" />
                <controls:SkeletonItem Height="20" Margin="0,2,20,2" />
                <controls:SkeletonItem
                    Width="40"
                    Height="20"
                    Margin="0,2" />
                <controls:SkeletonItem
                    Width="150"
                    Height="20"
                    Margin="0,2" />
           </controls:SkeletonGroup>
       </controls:Skeleton>
    </extensions:FrameworkElementExtension.MaskContent>
</Grid>

案例七：无限嵌套

<Grid
    Width="200"
    Height="200"
    Margin="0,30,0,0"
    extensions:FrameworkElementExtension.IsLoading="{Binding ElementName=cbox_loading, Path=IsChecked}"
    extensions:FrameworkElementExtension.MaskColor="White"
    Background="Beige">
    <extensions:FrameworkElementExtension.MaskContent>
       <controls:Skeleton>
           <controls:SkeletonGroup Orientation="Horizontal">
                <controls:SkeletonItem Width="1*" Margin="2" />
                <controls:SkeletonItem Width="1*" Margin="2" />
                <controls:SkeletonGroup Width="2*" Orientation="Vertical">
                    <controls:SkeletonItem Height="1*" Margin="2" />
                    <controls:SkeletonItem Height="1*" Margin="2" />
                    <controls:SkeletonGroup Height="2*" Orientation="Horizontal">
                        <controls:SkeletonItem Width="1*" Margin="2" />
                        <controls:SkeletonItem Width="1*" Margin="2" />
                        <controls:SkeletonGroup Width="2*" Orientation="Vertical">
                            <controls:SkeletonItem Margin="2" />
                            <controls:SkeletonItem Margin="2" />
                            <controls:SkeletonGroup Height="2*" Orientation="Horizontal">
                                <controls:SkeletonItem Width="1*" Margin="2" />
                                <controls:SkeletonItem Width="1*" Margin="2" />
                                <controls:SkeletonGroup Width="2*" Orientation="Vertical">
                                    <controls:SkeletonItem Margin="2" />
                                    <controls:SkeletonItem Margin="2" />
                                </controls:SkeletonGroup>
                            </controls:SkeletonGroup>
                        </controls:SkeletonGroup>
                    </controls:SkeletonGroup>
                </controls:SkeletonGroup>
           </controls:SkeletonGroup>
       </controls:Skeleton>
    </extensions:FrameworkElementExtension.MaskContent>
</Grid>

技术赋能，共创未来
我们是一支深耕WPF及Avalonia十余年的开发团队，专注于为企业和开发者提供高性能桌面应用解决方案，目前已经为二十多家企业提供过服务，无论您是哪种需求，我们都可以用我们丰富的经验助力您的业务高效落地。如果您有相关需求，请与我们联系。

联系方式
QQ/VX：446522563
手机号：17898179019

技术交流
QQ群：661224882