WPF骨架屏控件(Skeleton)
一．骨架屏介绍骨架屏（Skeleton）是一种用于提升用户体验的界面设计技术，通过在页面数据加载前展示简化的页面框架结构（如占位符、灰色块等），模拟真实内容的布局，避免用户面对空白页面或长时间等待的焦虑感。
特点及原理：
1.占位展示：骨架屏由基本框架和占位元素（如线条、矩形）组成，形状与实际内容布局一致，例如用短横线模拟文本、矩形框模拟图片区域。
2.动态替换：当真实数据加载完成后，骨架屏会被无缝替换为实际内容，通过渐变或动画实现平滑过渡。
3.设计原则：通常采用低饱和度色调（如灰色）和简洁的动画效果，避免视觉干扰，同时传达“加载中”的信号。
优势：1.提升感知速度：虽然不缩短实际加载时间，但通过视觉反馈让用户感觉加载更快。
2.降低跳出率：减少因空白页面导致的用户流失。
3.兼容性：适用于各种异步加载场景。
二．骨架屏控件设计
2.1 骨架的构成
从骨架屏的特点可以看出，骨架主要由方形、圆形、条形几种基本图案构成，将它们以不同的方式排列，即可完成骨架的搭建，下面我们来看看几种比较典型的情况。
图 2.1.1 文本骨架屏
https://img2024.cnblogs.com/blog/2842690/202505/2842690-20250523104610850-1656052101.png
图 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>
<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><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><Storyboard
AutoReverse="False"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard><Storyboard
AutoReverse="False"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard><Storyboard
AutoReverse="False"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard> 动画代码：<Storyboard
AutoReverse="False"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>三．骨架屏控件实现
根据以上设计思路，我们需要Skeleton、SkeletonItem、SkeletonGroup三个类来实现骨架功能，其中SkeletonItem、SkeletonGroup同属骨架的组成部分，它们有一些相同的属性，所以它们可以抽象出一个共同的父类SkeletonComponent，以下是部分关键代码，仅供参考。
3.1 Skeleton
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 SkeletonItempublic 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
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附加属性实现的骨架屏控制案例，如有疑问可转到该文中查看。
案例一：文字+按钮
<Storyboard
AutoReverse="False"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard><Storyboard
AutoReverse="False"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard> 确定<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><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><Storyboard
AutoReverse="False"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard> 案例二：文字+圆角按钮
<Storyboard
AutoReverse="False"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard><Storyboard
AutoReverse="False"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard> 确定<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><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><Storyboard
AutoReverse="False"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard> 案例三：头像+文字
<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><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><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><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><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><Storyboard
AutoReverse="False"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard> 案例四：文字+图片
<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><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><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> 案例五：图片
<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><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><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><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><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> 案例六：图片+文字
<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><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><Storyboard
AutoReverse="False"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard><Storyboard
AutoReverse="False"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard><Storyboard
AutoReverse="False"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard> 案例七：无限嵌套
<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><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><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><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><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><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><Storyboard
AutoReverse="False"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
---------完结----------
技术赋能，共创未来
我们是一支深耕WPF及Avalonia十余年的开发团队，专注于为企业和开发者提供高性能桌面应用解决方案，目前已经为二十多家企业提供过服务，无论您是哪种需求，我们都可以用我们丰富的经验助力您的业务高效落地。如果您有相关需求，请与我们联系。
联系方式QQ/VX：446522563手机号：17898179019
技术交流
QQ群：661224882
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]