github/ZonyLrcToolsX
1
0
Fork 0
mirror of https://github.com/real-zony/ZonyLrcToolsX.git synced 2025-07-01 12:11:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: Added some UI animation effects.

Browse Source
This commit is contained in:
real-zony 2024-06-30 21:58:41 +08:00
parent 3b0c55ac00
commit 6ad2992144
4 changed files with 139 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/ZonyLrcTools.Desktop/App.axaml
View File

@ -30,5 +30,6 @@
<Style Selector="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource GlobalFontFamily}" />
</Style>
<StyleInclude Source="/Controls/DownloadStatusControl.axaml" />
</Application.Styles>
</Application>

92
src/ZonyLrcTools.Desktop/Controls/DownloadStatusControl.axaml Normal file
View File

@ -0,0 +1,92 @@
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:ZonyLrcTools.Desktop.Controls"
xmlns:fluent="using:FluentIcons.Avalonia.Fluent">
<Design.PreviewWith>
<controls:DownloadStatusControl Status="Completed" />
</Design.PreviewWith>
<Style Selector="controls|DownloadStatusControl">
<!-- Set Defaults -->
<Setter Property="Template">
<ControlTemplate>
<StackPanel Orientation="Horizontal" Spacing="5">
<Border Name="IconContainer" Width="20" Height="20">
<fluent:SymbolIcon Name="StatusIcon" Symbol="{TemplateBinding Symbol}" />
</Border>
<TextBlock Text="{TemplateBinding Text}" VerticalAlignment="Center" />
</StackPanel>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="controls|DownloadStatusControl[Status=NotStarted]">
<Setter Property="Symbol" Value="QuestionCircle" />
<Setter Property="Text" Value="未下载" />
</Style>
<Style Selector="controls|DownloadStatusControl[Status=Completed]">
<Setter Property="Symbol" Value="CheckmarkCircle" />
<Setter Property="Text" Value="已完成" />
</Style>
<Style Selector="controls|DownloadStatusControl[Status=Failed]">
<Setter Property="Symbol" Value="DismissCircle" />
<Setter Property="Text" Value="失败" />
</Style>
<Style Selector="controls|DownloadStatusControl[Status=Completed] /template/ Border#IconContainer">
<Style.Animations>
<Animation Duration="0:0:0.5">
<KeyFrame Cue="0%">
<Setter Property="RotateTransform.Angle" Value="0"/>
<Setter Property="ScaleTransform.ScaleX" Value="1"/>
<Setter Property="ScaleTransform.ScaleY" Value="1"/>
</KeyFrame>
<KeyFrame Cue="50%">
<Setter Property="RotateTransform.Angle" Value="180"/>
<Setter Property="ScaleTransform.ScaleX" Value="1.2"/>
<Setter Property="ScaleTransform.ScaleY" Value="1.2"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="RotateTransform.Angle" Value="360"/>
<Setter Property="ScaleTransform.ScaleX" Value="1"/>
<Setter Property="ScaleTransform.ScaleY" Value="1"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="controls|DownloadStatusControl[Status=Failed] /template/ Border#IconContainer">
<Style.Animations>
<Animation Duration="0:0:0.5" IterationCount="3">
<KeyFrame Cue="0%">
<Setter Property="TranslateTransform.X" Value="0"/>
</KeyFrame>
<KeyFrame Cue="25%">
<Setter Property="TranslateTransform.X" Value="-2"/>
</KeyFrame>
<KeyFrame Cue="50%">
<Setter Property="TranslateTransform.X" Value="0"/>
</KeyFrame>
<KeyFrame Cue="75%">
<Setter Property="TranslateTransform.X" Value="2"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="TranslateTransform.X" Value="0"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="controls|DownloadStatusControl /template/ Border#IconContainer">
<Setter Property="RenderTransform">
<TransformGroup>
<RotateTransform/>
<ScaleTransform/>
<TranslateTransform/>
</TransformGroup>
</Setter>
</Style>
</Styles>

36
src/ZonyLrcTools.Desktop/Controls/DownloadStatusControl.axaml.cs Normal file
View File

@ -0,0 +1,36 @@
using Avalonia;
using Avalonia.Controls.Primitives;
using FluentIcons.Common;
using ZonyLrcTools.Desktop.ViewModels;
namespace ZonyLrcTools.Desktop.Controls;
public class DownloadStatusControl : TemplatedControl
{
public static readonly StyledProperty<DownloadStatus> StatusProperty =
AvaloniaProperty.Register<DownloadStatusControl, DownloadStatus>(nameof(Status));
public static readonly StyledProperty<Symbol> SymbolProperty =
AvaloniaProperty.Register<DownloadStatusControl, Symbol>(nameof(Symbol));
public static readonly StyledProperty<string> TextProperty =
AvaloniaProperty.Register<DownloadStatusControl, string>(nameof(Text));
public DownloadStatus Status
{
get => GetValue(StatusProperty);
set => SetValue(StatusProperty, value);
}
public Symbol Symbol
{
get => GetValue(SymbolProperty);
set => SetValue(SymbolProperty, value);
}
public string Text
{
get => GetValue(TextProperty);
set => SetValue(TextProperty, value);
}
}

9
src/ZonyLrcTools.Desktop/Pages/HomePage.axaml
View File

@ -3,6 +3,7 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewModels="clr-namespace:ZonyLrcTools.Desktop.ViewModels"
xmlns:controls="clr-namespace:ZonyLrcTools.Desktop.Controls"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="ZonyLrcTools.Desktop.Pages.HomePage"
x:DataType="viewModels:HomeViewModel">
@ -23,7 +24,13 @@
<DataGridTextColumn Header="歌曲名称" Binding="{Binding SongName}" Width="*" />
<DataGridTextColumn Header="歌手名称" Binding="{Binding ArtistName}" Width="*" />
<DataGridTextColumn Header="文件路径" Binding="{Binding FilePath}" Width="2*" />
<DataGridTextColumn Header="下载状态" Binding="{Binding DownloadStatus}" Width="1*" />
<DataGridTemplateColumn Header="下载状态" Width="1*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<controls:DownloadStatusControl Status="{Binding DownloadStatus}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
<DataGrid.Styles>