Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main'
Browse files Browse the repository at this point in the history
  • Loading branch information
@kikipoulet
kikipoulet committed Jun 3, 2024
2 parents c6b4848 + b0eac0f commit fce71f2
Show file tree
Hide file tree
Showing 22 changed files with 710 additions and 229 deletions.
69 changes: 60 additions & 9 deletions SukiUI.Demo/Features/ControlsLibrary/CardsView.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
xmlns:controlsLibrary="clr-namespace:SukiUI.Demo.Features.ControlsLibrary"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:system="clr-namespace:System;assembly=System.Runtime"
xmlns:helpers="clr-namespace:SukiUI.Helpers;assembly=SukiUI"
d:DesignHeight="450"
d:DesignWidth="800"
x:DataType="controlsLibrary:CardsViewModel"
Expand Down Expand Up @@ -43,6 +45,7 @@
</controls:GroupBox>
</controls:GlassCard>
<ScrollViewer Grid.Row="1">
<StackPanel>
<WrapPanel Classes="PageContainer">
<controls:GlassCard>
<controls:GroupBox Header="Standard">
Expand All @@ -60,19 +63,67 @@
</controls:GroupBox>
</controls:GlassCard>
<controls:GlassCard>
<controls:GlassCard.Resources>
<system:Double x:Key="GlassOpacity">0.2</system:Double>
</controls:GlassCard.Resources>
<controls:GroupBox Header="Overriden Opacity">
<TextBlock Classes="h3">This card's resources sets the double resource of "GlassOpacity" to 0.2</TextBlock>
</controls:GroupBox>
</controls:GlassCard>
<controls:GlassCard>
<controls:GroupBox Header="Overriden Color">
<StackPanel>
<TextBlock Classes="h3">This card's resources sets the color resource of</TextBlock>
<TextBlock Classes="h3">"SukiGlassCardBackground" and "SukiGlassCardOpaqueBackground to Red.</TextBlock>
</StackPanel>
<TextBlock Classes="h4">This card's resources sets the double resource of "GlassOpacity" to 0.2</TextBlock>
</controls:GroupBox>
</controls:GlassCard>

</WrapPanel>

<Border Background="{DynamicResource SukiControlBorderBrush}" Height="1" Margin="30,30"></Border>
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" Margin="30,0,30,30" FontWeight="DemiBold" Text="GlassCard are animated with CompositionAnimations by the property IsAnimated set to 'True' by default. Opacity changes and Size changes of the GlassCard are automatically animated. See below the differences by adding an item."></TextBlock>

<StackPanel Spacing="12" Margin="30,10" Orientation="Horizontal">
<Button Classes="Flat" Content="Add Item" Command="{Binding AddItemCommand}"></Button>
<Button Content="Remove Item" Command="{Binding RemoveItemCommand}"></Button>
</StackPanel>

<Grid ColumnDefinitions="*,*" Margin="15">
<controls:GlassCard HorizontalAlignment="Left" IsAnimated="False" Margin="15">
<StackPanel Spacing="35">
<TextBlock FontWeight="DemiBold" FontSize="17" Text="Not Animated"></TextBlock>
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:GlassCard helpers:AnimationExtensions.FadeIn="500" Width="150" Height="60" Margin="5" IsInteractive="True">
<TextBlock Text="Item" Foreground="{DynamicResource SukiLowText}"></TextBlock>
</controls:GlassCard>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</controls:GlassCard>

<controls:GlassCard Grid.Column="1" HorizontalAlignment="Left" Margin="15">
<StackPanel Spacing="35">
<TextBlock FontWeight="DemiBold" FontSize="17" Text="Animated"></TextBlock>
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:GlassCard helpers:AnimationExtensions.FadeIn="500" Width="150" Height="60" Margin="5" IsInteractive="True">
<TextBlock Text="Item" Foreground="{DynamicResource SukiLowText}"></TextBlock>
</controls:GlassCard>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</controls:GlassCard>
</Grid>
<Border Height="100"></Border>
</StackPanel>
</ScrollViewer>
</Grid>
</UserControl>
18 changes: 18 additions & 0 deletions SukiUI.Demo/Features/ControlsLibrary/CardsViewModel.cs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
using System.Collections.ObjectModel;
using System.Linq;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using Material.Icons;

namespace SukiUI.Demo.Features.ControlsLibrary;
Expand All @@ -7,4 +10,19 @@ public partial class CardsViewModel() : DemoPageBase("Cards", MaterialIconKind.C
{
[ObservableProperty] private bool _isOpaque;
[ObservableProperty] private bool _isInteractive;

[ObservableProperty] private ObservableCollection<int> _items = new ObservableCollection<int>(){1};

[RelayCommand]
private void AddItem()
{
Items.Add(1);
}
[RelayCommand]
private void RemoveItem()
{
if(Items.Any())
Items.RemoveAt(Items.Count-1);
}

}
6 changes: 6 additions & 0 deletions SukiUI/ColorTheme/Dark.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@
<BoxShadows x:Key="SukiSmallPopupShadow">0 0 4 1 #101010</BoxShadows>
<BoxShadows x:Key="SukiPopupShadow">1 1 14 1 #101010</BoxShadows>
<BoxShadows x:Key="SukiBigPopupShadow">1 1 15 0 #606060</BoxShadows>

<LinearGradientBrush x:Key="PopupGradientBrush" StartPoint="0%,0%" EndPoint="100%,100%">
<GradientStop Color="{DynamicResource SukiAccentColor5}" Offset="0"></GradientStop>
<GradientStop Color="{DynamicResource SukiPrimaryColor10}" Offset="1"></GradientStop>

</LinearGradientBrush>

<system:Boolean x:Key="IsDark">True</system:Boolean>
<system:Boolean x:Key="IsLight">False</system:Boolean>
Expand Down
6 changes: 6 additions & 0 deletions SukiUI/ColorTheme/Light.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@
<BoxShadows x:Key="SukiSmallPopupShadow">0 0 2 0 DimGray</BoxShadows>
<BoxShadows x:Key="SukiPopupShadow">1 1 8 0 LightGray</BoxShadows>
<BoxShadows x:Key="SukiBigPopupShadow">1 1 15 0 #dedede</BoxShadows>

<LinearGradientBrush x:Key="PopupGradientBrush" StartPoint="0%,0%" EndPoint="100%,100%">
<GradientStop Color="{DynamicResource SukiAccentColor3}" Offset="0"></GradientStop>
<GradientStop Color="{DynamicResource SukiPrimaryColor3}" Offset="1"></GradientStop>

</LinearGradientBrush>

<system:Boolean x:Key="IsDark">False</system:Boolean>
<system:Boolean x:Key="IsLight">True</system:Boolean>
Expand Down
8 changes: 4 additions & 4 deletions SukiUI/ColorTheme/NotificationColor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ namespace SukiUI.ColorTheme;

public static class NotificationColor
{
public static readonly SolidColorBrush InfoIconForeground = new(Color.FromRgb(89,126,255));
public static readonly SolidColorBrush SuccessIconForeground = new(Color.FromRgb(35,143,35));
public static readonly SolidColorBrush WarningIconForeground = new(Color.FromRgb(177,113,20));
public static readonly SolidColorBrush ErrorIconForeground = new(Color.FromRgb(216,63,48));
public static readonly SolidColorBrush InfoIconForeground = new(Color.FromRgb(47,84,235));
public static readonly SolidColorBrush SuccessIconForeground = new(Color.FromRgb(56,158,13));
public static readonly SolidColorBrush WarningIconForeground = new(Color.FromRgb(240,140,22));
public static readonly SolidColorBrush ErrorIconForeground = new(Color.FromRgb(236,63,48));
}
4 changes: 2 additions & 2 deletions SukiUI/Controls/GlassMorphism/GlassCard.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,10 @@
<Setter Property="BorderBrush" Value="{DynamicResource SukiAccentColor}" />
</Style>
<Style Selector="^.Accent /template/ Border#PART_BorderCard">
<Setter Property="Background" Value="{DynamicResource SukiAccentColor}" />
<Setter Property="Background" Value="{DynamicResource SukiAccentColor25}" />
</Style>
<Style Selector="^.Primary /template/ Border#PART_BorderCard">
<Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
<Setter Property="Background" Value="{DynamicResource SukiPrimaryColor25}" />
</Style>

<Style Selector="^[IsVisible=True] /template/ Panel#RootPanel">
Expand Down
78 changes: 5 additions & 73 deletions SukiUI/Controls/GlassMorphism/GlassCard.axaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
using Avalonia.LogicalTree;
using Avalonia.Rendering.Composition;
using Avalonia.Rendering.Composition.Animations;
using SukiUI.Helpers;

namespace SukiUI.Controls;

Expand All @@ -33,6 +34,7 @@ public class GlassCard : ContentControl
set => SetValue(BorderThicknessProperty, value);
}


public static readonly StyledProperty<bool> IsAnimatedProperty =
AvaloniaProperty.Register<GlassCard, bool>(nameof(IsAnimated), true);

Expand Down Expand Up @@ -92,99 +94,29 @@ protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
b.Loaded += (sender, args) =>
{
var v = ElementComposition.GetElementVisual(b);
MakeOpacityAnimated(v);
CompositionAnimationHelper.MakeOpacityAnimated(v);
};

var b2 = e.NameScope.Get<Border>("PART_BorderCard");
b2.Loaded += (sender, args) =>
{
var v = ElementComposition.GetElementVisual(b2);
MakeSizeAnimated(v);
CompositionAnimationHelper.MakeSizeAnimated(v);
};

var b3 = e.NameScope.Get<Border>("PART_ClipBorder");
b3.Loaded += (sender, args) =>
{
var v = ElementComposition.GetElementVisual(b3);
MakeSizeAnimated(v);
CompositionAnimationHelper.MakeSizeAnimated(v);
};

}

}


public static void MakeOpacityAnimated(CompositionVisual compositionVisual)
{
if (compositionVisual == null)
return;

Compositor compositor = compositionVisual.Compositor;

var animationGroup = compositor.CreateAnimationGroup();


ScalarKeyFrameAnimation opacityAnimation = compositor.CreateScalarKeyFrameAnimation();
opacityAnimation.Target = "Opacity";
opacityAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
opacityAnimation.Duration = TimeSpan.FromMilliseconds(700);



Vector3KeyFrameAnimation offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
offsetAnimation.Target = "Offset";
offsetAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
offsetAnimation.Duration = TimeSpan.FromMilliseconds(700);


animationGroup.Add(offsetAnimation);
animationGroup.Add(opacityAnimation);


ImplicitAnimationCollection implicitAnimationCollection = compositor.CreateImplicitAnimationCollection();
implicitAnimationCollection["Opacity"] = animationGroup;
implicitAnimationCollection["Offset"] = animationGroup;


compositionVisual.ImplicitAnimations = implicitAnimationCollection;

}

public static void MakeSizeAnimated(CompositionVisual compositionVisual)
{
if (compositionVisual == null)
return;

Compositor compositor = compositionVisual.Compositor;

var animationGroup = compositor.CreateAnimationGroup();

Vector2KeyFrameAnimation sizeAnimation = compositor.CreateVector2KeyFrameAnimation();
sizeAnimation.Target = "Size";
sizeAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
sizeAnimation.Duration = TimeSpan.FromMilliseconds(450);



Vector3KeyFrameAnimation offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
offsetAnimation.Target = "Offset";
offsetAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
offsetAnimation.Duration = TimeSpan.FromMilliseconds(450);



animationGroup.Add(sizeAnimation);

animationGroup.Add(offsetAnimation);

ImplicitAnimationCollection implicitAnimationCollection = compositor.CreateImplicitAnimationCollection();
implicitAnimationCollection["Size"] = animationGroup;
implicitAnimationCollection["Offset"] = animationGroup;


compositionVisual.ImplicitAnimations = implicitAnimationCollection;

}

private void ContextMenuOnOpening(object sender, CancelEventArgs e)
{
Expand Down
Loading

0 comments on commit fce71f2

Please sign in to comment.