新增骨架屏控件
This commit is contained in:
57
src/Ursa.Themes.Semi/Controls/Skeleton.axaml
Normal file
57
src/Ursa.Themes.Semi/Controls/Skeleton.axaml
Normal 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>
|
||||
@@ -13,5 +13,6 @@
|
||||
<ResourceInclude Source="Pagination.axaml" />
|
||||
<ResourceInclude Source="TagInput.axaml" />
|
||||
<ResourceInclude Source="Timeline.axaml" />
|
||||
<ResourceInclude Source="Skeleton.axaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
</ResourceDictionary>
|
||||
|
||||
13
src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml
Normal file
13
src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml
Normal 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>
|
||||
@@ -13,5 +13,6 @@
|
||||
<MergeResourceInclude Source="Pagination.axaml" />
|
||||
<MergeResourceInclude Source="TagInput.axaml" />
|
||||
<MergeResourceInclude Source="Timeline.axaml" />
|
||||
<MergeResourceInclude Source="Skeleton.axaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
</ResourceDictionary>
|
||||
|
||||
13
src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml
Normal file
13
src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml
Normal 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>
|
||||
@@ -13,5 +13,6 @@
|
||||
<MergeResourceInclude Source="Pagination.axaml" />
|
||||
<MergeResourceInclude Source="TagInput.axaml" />
|
||||
<MergeResourceInclude Source="Timeline.axaml" />
|
||||
<MergeResourceInclude Source="Skeleton.axaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
</ResourceDictionary>
|
||||
|
||||
4
src/Ursa.Themes.Semi/Themes/Shared/Skeleton.axaml
Normal file
4
src/Ursa.Themes.Semi/Themes/Shared/Skeleton.axaml
Normal file
@@ -0,0 +1,4 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
|
||||
<!-- Add Resources Here -->
|
||||
</ResourceDictionary>
|
||||
@@ -11,5 +11,6 @@
|
||||
<MergeResourceInclude Source="NavigationMenu.axaml" />
|
||||
<MergeResourceInclude Source="Pagination.axaml" />
|
||||
<MergeResourceInclude Source="TagInput.axaml" />
|
||||
<MergeResourceInclude Source="Skeleton.axaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
</ResourceDictionary>
|
||||
|
||||
@@ -20,4 +20,8 @@
|
||||
<ProjectReference Include="..\Ursa\Ursa.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<UpToDateCheckInput Remove="Controls\Skeleton.axaml" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
||||
20
src/Ursa/Controls/Skeleton.cs
Normal file
20
src/Ursa/Controls/Skeleton.cs
Normal 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); }
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user