repository·main·Indexed 25 days ago
https://github.com/kikipoulet/sukiuiA comprehensive desktop UI library and theme for AvaloniaUI. SukiUI provides customizable light and dark themes, animated controls, and a built-in toolkit featuring toast and dialog systems. It includes a wide array of controls such as BusyArea, Expander, GroupBox, various date and time pickers, AutoCompleteBox, and specialized button styles.
SukiUI is a UI theme and toolkit for AvaloniaUI designed to modernize applications. It provides a comprehensive set of features including:
SukiUI is a desktop-focused UI library and theme for AvaloniaUI. It provides a complete UI toolkit designed to maintain a consistent design style through:
The SettingsLayout control is used to present settings interfaces. It is designed to automatically update its layout based on the width of the window. It expects a collection of SettingsLayoutItem objects assigned to its Items property.
<suki:SettingsLayout>
<suki:SettingsLayout.Items>
<objectModel:ObservableCollection x:TypeArguments="suki:SettingsLayoutItem">
<suki:SettingsLayoutItem Header="Settings Part1">
<suki:SettingsLayoutItem.Content>
<Border Background="LightGray" Height="300" />
</suki:SettingsLayoutItem.Content>
</suki:SettingsLayoutItem>
<suki:SettingsLayoutItem Header="Settings Part 2">
<suki:SettingsLayoutItem.Content>
<Border Background="LightGray" Height="300" />
</suki:SettingsLayoutItem.Content>
</suki:SettingsLayoutItem>
<suki:SettingsLayoutItem Header="Settings Part 3">
<suki:SettingsLayoutItem.Content>
<Border Background="LightGray" Height="300" />
</suki:SettingsLayoutItem.Content>
</suki:SettingsLayoutItem>
</objectModel:ObservableCollection>
</suki:SettingsLayout.Items>
</suki:SettingsLayout>The recommended way to install SukiUI is via the NuGet package manager. Use the dotnet add package command to add SukiUI to your Avalonia project. Note that once SukiUI is installed, Avalonia.Themes.Fluent is no longer necessary and can be removed from your project dependencies.
dotnet add package SukiUI --version 6.0.0SukiWindow is intended to replace the standard Avalonia Window as the primary container for building your application. It provides integrated support for SukiUI themes and background styles.TextBox control is used for collecting user-provided information. It supports standard text input as well as several extended features via attached properties and standard properties like Watermark.SukiUI supports smooth transitions and animations for background effects:
BackgroundTransitionsEnabled to fade between background styles using opacity. Control the duration using BackgroundTransitionTime (in seconds, default is 1).BackgroundAnimationEnabled to run animations at native framerates. Most default styles support this, except for Flat.Performance Warning: Enabling animations requires invalidating and repainting the entire visual tree. This can lead to significant performance impacts (e.g., ~5% CPU and ~20% GPU increase). Use only when necessary.
To use SukiUI, you must include the SukiTheme in your App.axaml file. You need to add the sukiUi namespace mapping to the Application tag and then add the sukiUi:SukiTheme style.
Important: You must set a ThemeColor (e.g., ThemeColor="Blue"). If no ThemeColor is set and no other theme is applied, your windows and many controls will appear completely transparent.
<Application
...
xmlns:sukiUi="clr-namespace:SukiUI;assembly=SukiUI"
>
<Application.Styles>
<sukiUi:SukiTheme ThemeColor="Blue" />
</Application.Styles>
</Application>ThemeVariant system but provides the SukiTheme class as a wrapper to manage theme changes. You can explicitly set the theme to Dark or Light, or toggle between them using the SukiTheme.GetInstance() singleton.The AutoCompleteBox provides autocomplete functionality for a TextBox. It is useful for providing suggestions or help text to users as they type. You can populate the suggestions by setting the ItemsSource property, typically using an ObservableCollection of strings or other objects.
<AutoCompleteBox>
<AutoCompleteBox.ItemsSource>
<!-- Suggested strings -->
<objectModel:ObservableCollection x:TypeArguments="system:String">
<system:String>USA 1</system:String>
<system:String>USA 2</system:String>
<system:String>USA 3</system:String>
<system:String>France</system:String>
<system:String>England</system:String>
<system:String>Germany</system:String>
<system:String>Belgium</system:String>
<system:String>China</system:String>
</objectModel:ObservableCollection>
</AutoCompleteBox.ItemsSource>
</AutoCompleteBox>To set the application to a specific predefined color theme, use SukiTheme.GetInstance().ChangeColorTheme(SukiColor) where SukiColor is the desired color enum value (e.g., SukiColor.Red).
SukiTheme.GetInstance().ChangeColorTheme(SukiColor.Red);If you need to use the latest build that hasn't been published to NuGet yet, you can download the DLL directly from the SukiUI GitHub Action workflow:
SukiUI.dll file.