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>

动画代码：

<StoryboardAutoReverse="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><TextBlockLineHeight="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" /><ButtonGrid.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:SkeletonItemWidth="80"Height="25"HorizontalAlignment="Left" /></controls:SkeletonGroup></controls:Skeleton></extensions:FrameworkElementExtension.MaskContent>
</Grid>

案例二：文字+圆角按钮

<GridMargin="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><TextBlockLineHeight="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" /><ButtonGrid.Row="2"Width="80"Height="25"HorizontalAlignment="Left"Style="{StaticResource ButtonStyle1}">确定</Button><extensions:FrameworkElementExtension.MaskContent><controls:Skeleton><controls:SkeletonGroup><controls:SkeletonGroup><controls:SkeletonItemMargin="0,2"RadiusX="3"RadiusY="3" /><controls:SkeletonItemMargin="0,2"RadiusX="3"RadiusY="3" /><controls:SkeletonItemWidth="200"Margin="0,2"RadiusX="3"RadiusY="3" /></controls:SkeletonGroup><controls:SkeletonItem Height="10" IsVisible="False" /><controls:SkeletonItemWidth="80"Height="25"HorizontalAlignment="Left"RadiusX="13"RadiusY="13" /></controls:SkeletonGroup></controls:Skeleton></extensions:FrameworkElementExtension.MaskContent>
</Grid>

案例三：头像+文字

<GridMargin="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><BorderGrid.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><TextBlockGrid.Column="2"VerticalAlignment="Center"Text="Balzac" /><TextBlockGrid.Row="1"Grid.Column="2"VerticalAlignment="Center"Text="Comment body content." /><extensions:FrameworkElementExtension.MaskContent><controls:Skeleton><controls:SkeletonGroup Orientation="Horizontal"><controls:SkeletonItemWidth="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><GridMargin="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><BorderGrid.RowSpan="3"Width="36"Height="36"VerticalAlignment="Top"><Border.Background><ImageBrush ImageSource="/QS.Controls.SkeletonSample;component/Images/user.png" /></Border.Background></Border><TextBlockGrid.Column="2"VerticalAlignment="Center"Text="Balzac" /><TextBlockGrid.Row="1"Grid.Column="2"VerticalAlignment="Center"Text="Comment body content." /><extensions:FrameworkElementExtension.MaskContent><controls:Skeleton><controls:SkeletonGroup Orientation="Horizontal"><controls:SkeletonItemWidth="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>

案例四：文字+图片

<GridHeight="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><TextBlockVerticalAlignment="Center"LineHeight="20"Text="The verb to design expresses the processof developing a design."TextWrapping="Wrap" /><TextBlockGrid.Row="2"VerticalAlignment="Center"LineHeight="20"Text="The verb to design expresses the processof developing a design."TextWrapping="Wrap" /><BorderGrid.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>

案例五：图片

<GridHeight="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><BorderGrid.Column="1"Margin="2"CornerRadius="4"><Border.Background><ImageBrush ImageSource="/QS.Controls.SkeletonSample;component/Images/user.png" /></Border.Background></Border><BorderGrid.Column="2"Margin="2"CornerRadius="4"><Border.Background><ImageBrush ImageSource="/QS.Controls.SkeletonSample;component/Images/user.png" /></Border.Background></Border><BorderGrid.Row="1"Margin="2"CornerRadius="4"><Border.Background><ImageBrush ImageSource="/QS.Controls.SkeletonSample;component/Images/user.png" /></Border.Background></Border><BorderGrid.Row="1"Grid.Column="1"Margin="2"CornerRadius="4"><Border.Background><ImageBrush ImageSource="/QS.Controls.SkeletonSample;component/Images/user.png" /></Border.Background></Border><BorderGrid.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:SkeletonItemMargin="2"RadiusX="4"RadiusY="4" /><controls:SkeletonItemMargin="2"RadiusX="4"RadiusY="4" /><controls:SkeletonItemMargin="2"RadiusX="4"RadiusY="4" /></controls:SkeletonGroup><controls:SkeletonGroup Orientation="Horizontal"><controls:SkeletonItemMargin="2"RadiusX="4"RadiusY="4" /><controls:SkeletonItemMargin="2"RadiusX="4"RadiusY="4" /><controls:SkeletonItemMargin="2"RadiusX="4"RadiusY="4" /></controls:SkeletonGroup></controls:SkeletonGroup></controls:Skeleton></extensions:FrameworkElementExtension.MaskContent>
</Grid>

案例六：图片+文字

<GridWidth="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><TextBlockGrid.Row="2"VerticalAlignment="Center"Text="The verb to design expresses the " /><TextBlockGrid.Row="3"VerticalAlignment="Center"Text="processof developing a design." /><TextBlockGrid.Row="4"VerticalAlignment="Center"Foreground="#FFCFD2D8"Text="Balzac" /><TextBlockGrid.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:SkeletonItemWidth="40"Height="20"Margin="0,2" /><controls:SkeletonItemWidth="150"Height="20"Margin="0,2" /></controls:SkeletonGroup></controls:Skeleton></extensions:FrameworkElementExtension.MaskContent>
</Grid>

案例七：无限嵌套

<GridWidth="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
手机号：[phone]

技术交流
QQ群：661224882