diff --git a/SukiUI/Controls/SukiWindow.axaml b/SukiUI/Controls/SukiWindow.axaml index fda38e745..1af8703db 100644 --- a/SukiUI/Controls/SukiWindow.axaml +++ b/SukiUI/Controls/SukiWindow.axaml @@ -22,14 +22,15 @@ - + - - + - - + + + - + + + SetValue(IsTitleBarVisibleProperty, value); } + public static readonly StyledProperty TitleBarAnimationEnabledProperty = + AvaloniaProperty.Register(nameof(TitleBarAnimationEnabled), defaultValue: true); + + public bool TitleBarAnimationEnabled + { + get => GetValue(TitleBarAnimationEnabledProperty); + set => SetValue(TitleBarAnimationEnabledProperty, value); + } + public static readonly StyledProperty IsMenuVisibleProperty = AvaloniaProperty.Register(nameof(IsMenuVisible), defaultValue: false); diff --git a/docs/docs/documentation/controls/inputs/button.md b/docs/docs/documentation/controls/inputs/button.md index 7fecec7ad..71a6bb2bb 100644 --- a/docs/docs/documentation/controls/inputs/button.md +++ b/docs/docs/documentation/controls/inputs/button.md @@ -2,34 +2,93 @@ SukiUI has a handful of button styles, available in both the standard primary color, but also in the theme's accent color. -## Show +
- +## Styles -- Busy +### Standard - + + +```xml + +``` + +### Flat -## Example + ```xml - + ``` -### Busy +### Rounded + + + +```xml + +``` + +### Outlined + + + +```xml + +``` + +### Basic + + + +```xml + +``` + + +### Flat Accent + + + +```xml + +``` + +### Large + + + +```xml + +``` + + +
+ +## Busy/Loading Button + + + +### Xaml ```xml ... xmlns:theme="clr-namespace:SukiUI.Theme;assembly=SukiUI" ... - + ``` +### C# + +```Csharp + MyButton.ShowProgress(); + + MyButton.HideProgress(); +``` + + ## See Also -[Demo: SukiUI.Demo/Features/ControlsLibrary/ButtonsView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/ButtonsView.axaml) \ No newline at end of file +[Demo: SukiUI.Demo/Features/ControlsLibrary/ButtonsView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/ButtonsView.axaml) diff --git a/docs/docs/documentation/controls/inputs/numericupdown.md b/docs/docs/documentation/controls/inputs/numericupdown.md index 6a16c446f..75b5e2cd4 100644 --- a/docs/docs/documentation/controls/inputs/numericupdown.md +++ b/docs/docs/documentation/controls/inputs/numericupdown.md @@ -2,18 +2,35 @@ A control for numeric input. -## Show +### Simple - + -## Example ```xml - + ``` +### Extension + + + + +```xml + +``` + +### No Spinner + + + + +```xml + +``` + + + ## See Also -[Demo: SukiUI.Demo/Features/ControlsLibrary/MiscView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/MiscView.axaml) \ No newline at end of file +[Demo: SukiUI.Demo/Features/ControlsLibrary/MiscView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/MiscView.axaml) diff --git a/docs/docs/documentation/controls/inputs/slider.md b/docs/docs/documentation/controls/inputs/slider.md index cfa76a52c..409c8c39f 100644 --- a/docs/docs/documentation/controls/inputs/slider.md +++ b/docs/docs/documentation/controls/inputs/slider.md @@ -4,7 +4,8 @@ A control for displaying current value and intervals in range. ## Show - +![sliid](https://github.com/user-attachments/assets/80afe350-0032-41a8-b81c-5ff7acddf1e2) + ## Example @@ -18,4 +19,4 @@ A control for displaying current value and intervals in range. ## See Also -[Demo: SukiUI.Demo/Features/ControlsLibrary/ProgressView.axaml](https://github.com/kikipoulet/SukiUI/blob/cc73e0ddc894cc6b0ae3e73d44eb19e4d3328043/SukiUI.Demo/Features/ControlsLibrary/ProgressView.axaml#L45C16-L45C17) \ No newline at end of file +[Demo: SukiUI.Demo/Features/ControlsLibrary/ProgressView.axaml](https://github.com/kikipoulet/SukiUI/blob/cc73e0ddc894cc6b0ae3e73d44eb19e4d3328043/SukiUI.Demo/Features/ControlsLibrary/ProgressView.axaml#L45C16-L45C17) diff --git a/docs/docs/documentation/controls/inputs/textbox.md b/docs/docs/documentation/controls/inputs/textbox.md index 5f66afab8..a2d0a0fb7 100644 --- a/docs/docs/documentation/controls/inputs/textbox.md +++ b/docs/docs/documentation/controls/inputs/textbox.md @@ -2,16 +2,42 @@ A control used for collecting user provided information. -## Show +### Simple - + -## Example ```xml - + +``` + +### Clear Button + + + + +```xml + +``` + +### Prefix + + + + +```xml + +``` + +### Watermark + + + + +```xml + ``` ## See Also -[Demo: SukiUI.Demo/Features/Dashboard/DashboardView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/Dashboard/DashboardView.axaml) \ No newline at end of file +[Demo: SukiUI.Demo/Features/Dashboard/DashboardView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/Dashboard/DashboardView.axaml) diff --git a/docs/docs/documentation/controls/inputs/toggleswitch.md b/docs/docs/documentation/controls/inputs/toggleswitch.md index e74e9708d..c06631d44 100644 --- a/docs/docs/documentation/controls/inputs/toggleswitch.md +++ b/docs/docs/documentation/controls/inputs/toggleswitch.md @@ -4,16 +4,15 @@ Switching between two states. ## Show - +![tgs](https://github.com/user-attachments/assets/9fe52016-a002-4b4d-ad98-a3e2157a498c) + ## Example ```xml - - ``` ## See Also -[Demo: SukiUI.Demo/Features/ControlsLibrary/TogglesView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/TogglesView.axaml) \ No newline at end of file +[Demo: SukiUI.Demo/Features/ControlsLibrary/TogglesView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/TogglesView.axaml) diff --git a/docs/docs/documentation/controls/layout/dock.md b/docs/docs/documentation/controls/layout/dock.md index e69de29bb..7ee61fb70 100644 --- a/docs/docs/documentation/controls/layout/dock.md +++ b/docs/docs/documentation/controls/layout/dock.md @@ -0,0 +1,21 @@ +# Dock + + + +As Docking controls are often asked by community, we decided to make a theme for the [Dock](https://github.com/wieslawsoltes/Dock) library. + + +![dock](https://github.com/user-attachments/assets/ef7ec55f-f13c-4214-b5ce-ad5ef3042868) + + +## Install SukiUI Nuget Package + +![{F7E52AB9-7A5A-4007-9CBC-8258079C1F78}](https://github.com/user-attachments/assets/4fac741b-55da-41f8-90cf-bd47809f8e9f) + +## Reference it in your App.axaml + +```xml + +``` + +You can now install and use the Dock library with SukiUI ! diff --git a/docs/docs/documentation/controls/layout/glasscard.md b/docs/docs/documentation/controls/layout/glasscard.md index 0cc9d7d9d..60456331c 100644 --- a/docs/docs/documentation/controls/layout/glasscard.md +++ b/docs/docs/documentation/controls/layout/glasscard.md @@ -2,32 +2,78 @@ A simple Card control that can present any control inside. -You can adjust whether the `GlassCard` is opaque or not and with or without interactive effects. +### Dark Theme -## Show + -- Normal +### Light Theme - + -- Opaque - +```xml + + + +``` -- Interactive - +## Alternative Style + +### Primary + + -## Example ```xml - + ``` +### Accent + + + + +```xml + + + +``` + +### Opaque + + + + +```xml + + + +``` + +### Interactive + +![interactive](https://github.com/user-attachments/assets/0a1ba6ac-b3e0-4eb6-ad7e-f782820a0506) + + +```xml + + + +``` + +## Animations + +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. + +![animated](https://github.com/user-attachments/assets/b38d4ec2-067a-443c-ac20-65a2f6302920) + + + ## See Also [Demo: SukiUI.Demo/Features/ControlsLibrary/CardsView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/CardsView.axaml) -[API: Controls/GlassMorphism/GlassCard.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/GlassMorphism/GlassCard.axaml.cs) \ No newline at end of file +[API: Controls/GlassMorphism/GlassCard.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/GlassMorphism/GlassCard.axaml.cs) diff --git a/docs/docs/documentation/controls/layout/sukiwindow.md b/docs/docs/documentation/controls/layout/sukiwindow.md index fdbf9c4d3..eef3c5de2 100644 --- a/docs/docs/documentation/controls/layout/sukiwindow.md +++ b/docs/docs/documentation/controls/layout/sukiwindow.md @@ -1,31 +1,114 @@ # SukiWindow +
+ In SukiUI, `SukiWindow` replaces `Window` as the basis for building apps. -## Show +![{F1A92653-7D30-4EF7-9FC2-F9C89507A70E}](https://github.com/user-attachments/assets/9be7f60b-d694-42dd-86ff-490ea80a3347) + +
+ +## Background Style + +SukiUI let you choose between 3 distinct background option, from the "Bubble", perfect to enhance the glassmorphism design of the library to the classic "Flat" background. + +Note that the background are dynamically created to match your color theme - Blue in this documentation. + +## Bubble + +```xml + + + +``` + +#### Dark +![{CFF9284D-F8E2-48C5-A837-05BB4BEA0673}](https://github.com/user-attachments/assets/bdfeec4e-d0e7-4d7e-b075-b0616720acbd) + +#### Light + +![{4E906261-7E2A-472E-B21E-FC038B1CFDF5}](https://github.com/user-attachments/assets/84dd83b4-be4f-4a0f-8c86-4d0c0e01e3ea) + +## Gradient + +```xml + + + +``` + +#### Dark +![{F92F9175-50C1-47E1-B7E9-1316D67CAF07}](https://github.com/user-attachments/assets/491a5e69-7b2f-4db0-87d0-6925aa79dee4) + + +#### Light + +![{270E38B6-9F26-4B55-9693-E4373CE517B1}](https://github.com/user-attachments/assets/7ef7bfcb-3fcf-4993-9aa6-aa1616c8a2e9) + + +## Flat + +```xml + + + +``` + +#### Dark +![{78EDB412-EB89-4E5C-B093-B4E70ECEE198}](https://github.com/user-attachments/assets/2ff1b465-570b-4681-87b5-46fbc618e670) + + + +#### Light + +![{42AF6CB9-1E06-4BD3-9C0C-F7C7ABD74C05}](https://github.com/user-attachments/assets/bdeee364-3bb6-4509-8427-f150569618a9) + + + + +
+ + +## Functionalities - -## Example +### Logo + + ```xml - + +``` + +### Menu + + + +```xml + + +``` + +### Right TitleBar Control + + +```xml - ``` + ## See Also [Demo: SukiUI.Demo/SukiUIDemoView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/SukiUIDemoView.axaml) -[API: Controls/SukiWindow.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/SukiWindow.axaml.cs) \ No newline at end of file +[API: Controls/SukiWindow.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/SukiWindow.axaml.cs) diff --git a/docs/docs/documentation/controls/navigation/sidemenu.md b/docs/docs/documentation/controls/navigation/sidemenu.md index 61a3a1cd0..07d66b44c 100644 --- a/docs/docs/documentation/controls/navigation/sidemenu.md +++ b/docs/docs/documentation/controls/navigation/sidemenu.md @@ -9,11 +9,9 @@ ## Example ```xml - + - + @@ -21,19 +19,11 @@ + + + - - - - - - - - - @@ -49,4 +39,4 @@ [Demo: SukiUI.Demo/SukiUIDemoView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/SukiUIDemoView.axaml) -[API: Controls/SukiSideMenu.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/SukiSideMenu.axaml.cs) \ No newline at end of file +[API: Controls/SukiSideMenu.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/SukiSideMenu.axaml.cs) diff --git a/docs/docs/documentation/controls/navigation/stackpage.md b/docs/docs/documentation/controls/navigation/stackpage.md index fd5e123c4..5be857f05 100644 --- a/docs/docs/documentation/controls/navigation/stackpage.md +++ b/docs/docs/documentation/controls/navigation/stackpage.md @@ -15,19 +15,14 @@ already in it's stack. ## Example ```xml - + ``` -Push a new page: - -```csharp -this.Get("StackSettings").Push("Network", b); -``` ## See Also [Demo: SukiUI.Demo/Features/ControlsLibrary/StackPage/StackPageView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/StackPage/StackPageView.axaml) -[API: Controls/SukiStackPage.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/SukiStackPage.axaml.cs) \ No newline at end of file +[API: Controls/SukiStackPage.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/SukiStackPage.axaml.cs) diff --git a/docs/docs/documentation/controls/progress/stepper.md b/docs/docs/documentation/controls/progress/stepper.md index dc35b9d71..83286347a 100644 --- a/docs/docs/documentation/controls/progress/stepper.md +++ b/docs/docs/documentation/controls/progress/stepper.md @@ -2,24 +2,41 @@ A bar that guides users through the steps of a task -## Show +
- + -## Example + +### XAML ```xml .axaml ``` +### ViewModel + ```csharp [ObservableProperty] private int _stepIndex = 1; public IEnumerable Steps { get; } = ["First Step", "Second Step", "Third Step"]; ``` +
+ +## Alternative Style + + + +### XAML + +```xml .axaml + +``` + +
+ ## See Also [Demo: SukiUI.Demo/Features/ControlsLibrary/ProgressView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/ProgressView.axaml) -[API: Controls/Stepper.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/Stepper.axaml.cs) \ No newline at end of file +[API: Controls/Stepper.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/Stepper.axaml.cs) diff --git a/docs/docs/documentation/getting-started/installation.md b/docs/docs/documentation/getting-started/installation.md index 8d4b8c98e..7105db360 100644 --- a/docs/docs/documentation/getting-started/installation.md +++ b/docs/docs/documentation/getting-started/installation.md @@ -30,12 +30,17 @@ The Nuget installation is suitable for most users, but if you want to use the la dotnet add package SukiUI --version 6.0.0 ``` +You're done ! + ::: tip Visit [SukiUI on Nuget](https://www.nuget.org/packages/SukiUI) for more information ::: ### Via Github Action +
+ Github Action Guide + 1. Visit [SukiUI CI](https://github.com/kikipoulet/SukiUI/actions/workflows/build.yml) 2. Select the latest workflow ![](/getting-started/introduction-workflow.webp "workflow") @@ -56,4 +61,5 @@ The package list should be: ![](/getting-started/introduction-final-package-list.webp "package list") If installed by referencing `.dll`, there should be a `System.Reactive` here. -::: \ No newline at end of file +::: +
diff --git a/docs/docs/documentation/getting-started/introduction.md b/docs/docs/documentation/getting-started/introduction.md index b1d8ec842..9799979e0 100644 --- a/docs/docs/documentation/getting-started/introduction.md +++ b/docs/docs/documentation/getting-started/introduction.md @@ -10,7 +10,8 @@ Nuget Pre -![dashboard](/getting-started/introduction-dashboard.webp) +![{AA835676-75C0-4415-A953-5ABFFA516596}](https://github.com/user-attachments/assets/00622266-dbb8-4c05-8d1f-782483f4ca14) + ## Gallery @@ -18,4 +19,4 @@ Go to Microsoft Store to get the Gallary app Download SukiUI Controls Gallery - \ No newline at end of file + diff --git a/docs/docs/documentation/getting-started/launch.md b/docs/docs/documentation/getting-started/launch.md index 44bdffb8e..de7102411 100644 --- a/docs/docs/documentation/getting-started/launch.md +++ b/docs/docs/documentation/getting-started/launch.md @@ -79,7 +79,10 @@ public partial class MainWindow : SukiWindow // [!code highlight] ## Done -You're now ready to use SukiUI ! +You're now ready to use SukiUI ! We advise you to theme your app now. Please check the [Theming Page](https://kikipoulet.github.io/SukiUI/documentation/theming/basic.html) and the [SukiWindow Page](https://kikipoulet.github.io/SukiUI/documentation/controls/layout/sukiwindow.html) + + + ::: warning If you encounter the following exception: @@ -91,4 +94,4 @@ If you encounter the following exception: There are two possible solutions to try: - Upgrade or downgrade the version of `Avalonia` and `SukiUI` until the exception is resolved - While ensuring that `Avalonia` is up to date (beta), reference the build `.dll` from [Github Action](https://github.com/kikipoulet/SukiUI/actions/workflows/build.yml) and proceed with the [following steps](/documentation/getting-started/installation#via-github-action) -::: \ No newline at end of file +::: diff --git a/docs/docs/documentation/theming/theme-color.md b/docs/docs/documentation/theming/theme-color.md index 85c789cb5..234851054 100644 --- a/docs/docs/documentation/theming/theme-color.md +++ b/docs/docs/documentation/theming/theme-color.md @@ -2,7 +2,8 @@ `SukiTheme` allows app to switch color themes easily -theming-color +![themechanging](https://github.com/user-attachments/assets/ae55a431-3b4e-4673-b14b-bec46fe22bf6) + ## Switch between available Color Theme @@ -31,4 +32,4 @@ SukiTheme.GetInstance().OnColorThemeChanged += theme => { Console.WriteLine("Color theme change triggered !"); }; -``` \ No newline at end of file +``` diff --git a/docs/docs/documentation/theming/theme.md b/docs/docs/documentation/theming/theme.md index 23e670670..648d9266d 100644 --- a/docs/docs/documentation/theming/theme.md +++ b/docs/docs/documentation/theming/theme.md @@ -2,9 +2,14 @@ SukiUI use the [Theme Variant](https://docs.avaloniaui.net/docs/guides/styles-and-resources/how-to-use-theme-variants) system provided by `AvaloniaUI`. -However, the SukiTheme class provide an easiest wrapper to change Light/Dark theme. +However, the SukiTheme class provide a wrapper to change Light/Dark theme. +#### Dark +![{CFF9284D-F8E2-48C5-A837-05BB4BEA0673}](https://github.com/user-attachments/assets/bdfeec4e-d0e7-4d7e-b075-b0616720acbd) + +#### Light + +![{4E906261-7E2A-472E-B21E-FC038B1CFDF5}](https://github.com/user-attachments/assets/84dd83b4-be4f-4a0f-8c86-4d0c0e01e3ea) -theming-theme ## Switch to Dark Theme @@ -31,4 +36,4 @@ SukiTheme.GetInstance().OnBaseThemeChanged += variant => { Console.WriteLine("Theme changed triggered !"); }; -``` \ No newline at end of file +```