新增骨架屏控件

This commit is contained in:
Coolkeke
2023-12-27 00:30:42 +08:00
parent 1d6f3b10ce
commit 30a303f524
17 changed files with 209 additions and 1 deletions

View File

@@ -0,0 +1,57 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa">
<Design.PreviewWith>
<Border Padding="20">
<!-- Add Controls for Previewer Here -->
</Border>
</Design.PreviewWith>
<ControlTheme x:Key="{x:Type u:Skeleton}" TargetType="u:Skeleton">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="u:Skeleton">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
ClipToBounds="{TemplateBinding ClipToBounds}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid>
<ContentPresenter
x:Name="PART_ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Border
x:Name="PART_Border"
IsHitTestVisible="{TemplateBinding IsActive}"
IsVisible="{TemplateBinding IsActive}">
<Border.Styles>
<Style Selector="Border">
<Style.Animations>
<Animation
FillMode="None"
IterationCount="Infinite"
Duration="0:0:1.4">
<KeyFrame Cue="0%">
<Setter Property="Background" Value="{DynamicResource SkeletonStartAnimationBackground}" />
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Background" Value="{DynamicResource SkeletonEndAnimationBackground}" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
</Border.Styles>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</ControlTheme>
<!-- Add Styles Here -->
</ResourceDictionary>

View File

@@ -13,5 +13,6 @@
<ResourceInclude Source="Pagination.axaml" />
<ResourceInclude Source="TagInput.axaml" />
<ResourceInclude Source="Timeline.axaml" />
<ResourceInclude Source="Skeleton.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@@ -0,0 +1,13 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<LinearGradientBrush x:Key="SkeletonStartAnimationBackground" StartPoint="0%,100%" EndPoint="100%,100%">
<GradientStop Offset="0" Color="#EAEBEB" />
<GradientStop Offset="0" Color="#E2E3E4" />
<GradientStop Offset="1" Color="#EAEBEB" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="SkeletonEndAnimationBackground" StartPoint="0%,100%" EndPoint="100%,100%">
<GradientStop Offset="0" Color="#EAEBEB" />
<GradientStop Offset="1" Color="#E2E3E4" />
<GradientStop Offset="1" Color="#EAEBEB" />
</LinearGradientBrush>
<!-- Add Resources Here -->
</ResourceDictionary>

View File

@@ -13,5 +13,6 @@
<MergeResourceInclude Source="Pagination.axaml" />
<MergeResourceInclude Source="TagInput.axaml" />
<MergeResourceInclude Source="Timeline.axaml" />
<MergeResourceInclude Source="Skeleton.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@@ -0,0 +1,13 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<LinearGradientBrush x:Key="SkeletonStartAnimationBackground" StartPoint="0%,100%" EndPoint="100%,100%">
<GradientStop Offset="0" Color="#EAEBEB" />
<GradientStop Offset="0" Color="#E2E3E4" />
<GradientStop Offset="1" Color="#EAEBEB" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="SkeletonEndAnimationBackground" StartPoint="0%,100%" EndPoint="100%,100%">
<GradientStop Offset="0" Color="#EAEBEB" />
<GradientStop Offset="1" Color="#E2E3E4" />
<GradientStop Offset="1" Color="#EAEBEB" />
</LinearGradientBrush>
<!-- Add Resources Here -->
</ResourceDictionary>

View File

@@ -13,5 +13,6 @@
<MergeResourceInclude Source="Pagination.axaml" />
<MergeResourceInclude Source="TagInput.axaml" />
<MergeResourceInclude Source="Timeline.axaml" />
<MergeResourceInclude Source="Skeleton.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@@ -0,0 +1,4 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
</ResourceDictionary>

View File

@@ -11,5 +11,6 @@
<MergeResourceInclude Source="NavigationMenu.axaml" />
<MergeResourceInclude Source="Pagination.axaml" />
<MergeResourceInclude Source="TagInput.axaml" />
<MergeResourceInclude Source="Skeleton.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@@ -20,4 +20,8 @@
<ProjectReference Include="..\Ursa\Ursa.csproj" />
</ItemGroup>
<ItemGroup>
<UpToDateCheckInput Remove="Controls\Skeleton.axaml" />
</ItemGroup>
</Project>

View File

@@ -0,0 +1,20 @@
using Avalonia;
using Avalonia.Controls;
using System;
using System.Collections.Generic;
using System.Text;
namespace Ursa.Controls
{
public class Skeleton : ContentControl
{
public static readonly StyledProperty<bool> IsActiveProperty =
AvaloniaProperty.Register<Skeleton, bool>(nameof(IsActive));
public bool IsActive
{
get { return GetValue(IsActiveProperty); }
set { SetValue(IsActiveProperty, value); }
}
}
}