flarive / neumorphism.avalonia Goto Github PK

View Code? Open in Web Editor NEW

308.0 10.0 16.0 22.4 MB

Neumorphism UI theme for Avalonia apps

C# 100.00%

avaloniaui cross-platform csharp neumorphic-design xaml theme ui-design native-aot net8 dark-theme

neumorphism.avalonia's Introduction

Neumorphism.Avalonia

Easy to use and customizable Neumorphism Design implementation for AvaloniaUI framework.

Expanders added in 0.11.0 !

3 different possible themes
Can be customized

Tab navigation focus added in 0.10.0 !

All controls now have a nice looking focus adorner

Dialogs added in 0.9.0 !

DialogHost based fake child window dialogs
Real child window based dialogs (with or without chrome)
Dialog builder to help create dialogs easily
A lot of dialogs examples (alert, warning, error, confirm, dialogs sequence, fully custom dialog....)

Menus added in 0.8.0 !

6 different possible themes
Icon support
Multi level menu items
Fully custom template possible for root menu

DateTime pickers added in 0.7.0 !

Calendar based date picker
Time picker

Tabs added in 0.6.0 !

Tabs are now fully themed with different possible styles

Avalonia 11 support in 0.5.0 !

Totally rewritten for Avalonia 0.11 !
Support Avalonia 0.11 Control Themes
Works with native AOT compilation
ListBoxes now fully themed
Drawings page added in demo project

Cards and use cases added in 0.4.0 !

Cards are now fully themed with 2 differents styles : outset (default) and inset
Added real life use cases samples (login, stopwatch, audio player, messages, sleep quality, user profile...)

Sliders added in 0.3.1 !

Progressbars added in 0.2.1 !

Overview

This library is a collection of styles to help you build your Avalonia app with a ready to go Neumorphism Design theme. (https://github.com/flarive/Neumorphism.Avalonia)

This Avalonia UI Neumorphic theme was inspired by another great Avalonia UI theme : Material.Avalonia

As neumorphism has no official specifications, this is my own personal interpretation of Neumorphism general guidelines i found on the web (mainly on Dribble).

It also uses some elements of Material Design such as :

Primary and Secondary (Accent) color with light and dark variants
A light theme and a dark theme (you can switch between them at runtime)
Material Design Icons (must be installed separately)

For the moment only the following controls are fully themed :

Buttons
ToggleButtons
RadioButtons
Checkboxes
Textboxes
Comboboxes
ProgressBars
Sliders
Cards
ListBoxes
Tabs
DateTime pickers
Menus
Dialogs
Expanders

More controls should be themed soon.

Technical info

Single .net Standard Library DLL (Avalonia.Themes.Neumorphism.dll)
Can be used with .net Core 3.x, .net5, .net6, .net7, .net8...
Lightweight (DLL is 1.5Mo when compiled in release mode)
Built upon the latest version of Avalonia UI
.Net 8 demo application project
Support Native AOT compilation (publish with dotnet publish -c release --framework net8.0 -r win-x64)

How to start ?

Add Neumorphism.Avalonia nuget package to your project :
```
dotnet add package Neumorphism.Avalonia
```

Edit your Avalonia project App.xaml file:

<Application ...
    xmlns:themes="clr-namespace:Avalonia.Themes.Neumorphism;assembly=Avalonia.Themes.Neumorphism"
    ...>
    <Application.Styles>
        <themes:NeumorphismTheme BaseTheme="Light" PrimaryColor="Purple" SecondaryColor="Lime" />
    </Application.Styles>
</Application>

Licence

Neumorphism.Avalonia is free to use in any non commercial project.

If you like this project and want to help to maintain it, you can sponsor it (thanks a lot !)

neumorphism.avalonia's People

Contributors

Stargazers

Watchers

Forkers

vzolotov bhengubv itninja04 chisterwu mauideveloperorg seakingii tlitookilakin maybelaterornot ichthus1604 hxbb00 teadrivendev lemurmu vmv dimi1989 dotnettreasury dousinl

neumorphism.avalonia's Issues

support avalonia 11 rc 1.1

pplease, can you Add support to avalonia 11 rc 1.1

thanks a lot!

It is a beautiful theme

Problem with TabControl' size since 11.0 version

since the update, the tabcontrol have limited size.
Need to resize the Tabcontrol

Because the button styling includes explicit Width and Height setters, buttons are always fixed size when using this theme; they cannot be flexibly sized- they can't be shrunk/grown to fit their contents or available space.

Switching this to MinWidth and MinHeight is a better approach I think, because it will maintain a nice "default" size, and can still be easily altered to suit a given layout.

This may also be an issue on other widgets, but it is most noticeable on buttons.

Null Reference exception at startup

I get the following exception when trying to start the project

System.NullReferenceException: Object reference not set to an instance of an object.
   at Avalonia.Themes.Neumorphism.NeumorphismTheme.OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
   at Avalonia.AvaloniaObject.OnPropertyChangedCore(AvaloniaPropertyChangedEventArgs change)
   at Avalonia.AvaloniaObject.RaisePropertyChanged[T](AvaloniaProperty`1 property, Optional`1 oldValue, BindingValue`1 newValue, BindingPriority priority, Boolean isEffectiveValue)
   at Avalonia.PropertyStore.EffectiveValue`1.SetAndRaiseCore(ValueStore owner, StyledProperty`1 property, T value, BindingPriority priority, Boolean isOverriddenCurrentValue, Boolean isCoercedDefaultValue)
   at Avalonia.PropertyStore.EffectiveValue`1.SetLocalValueAndRaise(ValueStore owner, StyledProperty`1 property, T value)
   at Avalonia.PropertyStore.ValueStore.SetLocalValue[T](StyledProperty`1 property, T value)
   at Avalonia.PropertyStore.ValueStore.SetValue[T](StyledProperty`1 property, T value, BindingPriority priority)
   at Avalonia.AvaloniaObject.SetValue[T](StyledProperty`1 property, T value, BindingPriority priority)
   at Avalonia.Themes.Neumorphism.NeumorphismTheme.set_PrimaryColor(PrimaryColor value)
   at RacingStatsSync.App.!XamlIlPopulate(IServiceProvider, App) in M:\Software Projects\Race Control\RaceControlClient\RacingStatsSync\App.axaml:line 8
   at RacingStatsSync.App.!XamlIlPopulateTrampoline(App)
   at RacingStatsSync.App..ctor()
   at System.RuntimeType.CreateInstanceOfT()

After a little bit of debugging ive narrowed it down (i think) to accessing Application.Current in the OnPropertyChanged here.

protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
    {
      base.OnPropertyChanged(change);
      if (change.Property == (AvaloniaProperty) NeumorphismTheme.PrimaryColorProperty)
      {
        Color color1 = SwatchHelper.Lookup[(MaterialColor) this.PrimaryColor];
        Color color2 = color1.Lighten();
        Color color3 = color1;
        Color color4 = color1.Darken();
        Application.Current.Resources[(object) "PrimaryHueLightBrush"] = (object) color2;
        Application.Current.Resources[(object) "PrimaryHueMidBrush"] = (object) color3;
        Application.Current.Resources[(object) "PrimaryHueDarkBrush"] = (object) color4;
        Application.Current.Resources[(object) "PrimaryHueLightForegroundBrush"] = (object) Color.FromRgb(byte.MaxValue, byte.MaxValue, byte.MaxValue);
        Application.Current.Resources[(object) "PrimaryHueMidForegroundBrush"] = (object) Color.FromRgb(byte.MaxValue, byte.MaxValue, byte.MaxValue);
        Application.Current.Resources[(object) "PrimaryHueDarkForegroundBrush"] = (object) Color.FromRgb(byte.MaxValue, byte.MaxValue, byte.MaxValue);
      }
      else if (change.Property == (AvaloniaProperty) NeumorphismTheme.SecondaryColorProperty)
      {
        Color color5 = SwatchHelper.Lookup[(MaterialColor) this.SecondaryColor];
        Color color6 = color5.Lighten();
        Color color7 = color5;
        Color color8 = color5.Darken();
        Application.Current.Resources[(object) "SecondaryHueLightBrush"] = (object) color6;
        Application.Current.Resources[(object) "SecondaryHueMidBrush"] = (object) color7;
        Application.Current.Resources[(object) "SecondaryHueDarkBrush"] = (object) color8;
        Application.Current.Resources[(object) "SecondaryHueLightForegroundBrush"] = (object) Color.FromRgb(byte.MaxValue, byte.MaxValue, byte.MaxValue);
        Application.Current.Resources[(object) "SecondaryHueMidForegroundBrush"] = (object) Color.FromRgb(byte.MaxValue, byte.MaxValue, byte.MaxValue);
        Application.Current.Resources[(object) "SecondaryHueDarkForegroundBrush"] = (object) Color.FromRgb(byte.MaxValue, byte.MaxValue, byte.MaxValue);
      }
      else
      {
        if (!(change.Property == (AvaloniaProperty) NeumorphismTheme.BaseThemeProperty))
          return;
        if (this.BaseTheme == ApplicationTheme.Dark)
          Application.Current.SetValue<ThemeVariant>(ThemeVariantScope.ActualThemeVariantProperty, ThemeVariant.Dark);
        else
          Application.Current.SetValue<ThemeVariant>(ThemeVariantScope.ActualThemeVariantProperty, ThemeVariant.Light);
      }
    }
    ```
    
    This is purely based on de-compilation debugging and unfortunately i cant say where in the code base the error lies or how to fix it. 
    Am i doing something wrong or is this an actual bug?

When the ListBox is bound to the data ItemsSource, the content is displayed blank.

This issue only occurs when using Neumorphism.Avalonia

xaml

	<ListBox ItemsSource="{Binding MenuItems}" Width="300" Theme="{StaticResource ListBoxCard}">
		<ListBox.ItemTemplate>
			<DataTemplate>
				<ListBoxItem>
					<TextBlock Text="{Binding Title}" />
				</ListBoxItem>
			</DataTemplate>
		</ListBox.ItemTemplate>
	</ListBox>

MenuItems

MenuItems = new ObservableCollection<MenuItem?>(){
    new MenuItem()
    {
        Icon = "HomeOutline",
        Title = "Home"
    },
    new MenuItem()
    {
        Icon = "ButtonPointer",
        Title = "Buttons"
     }
};

3.Item is not displayed properly
https://github.com/flarive/Neumorphism.Avalonia/assets/22725853/0dd6a31d-4baa-4e67-95dd-feb5f18b2ff1

Could not find control 'PART_MinimizeButton'.' when ExtendClientAreaToDecorationsHint="True"

How to reproduce?
Just add ExtendClientAreaToDecorationsHint="True" in AboutWindow then run and open about window

Terms of use

Hi!
What are the conditions for using your theme for a commercial organization?
The rights to the developed software, in which we want to use your theme, belong to our company. The software is planned to be sold and resold, as well as provide free and paid access to the company's customers.

Hope to have an amazing data table

This project is amazing, thank you for your work on this project, it seems to lack some common and important controls, such as data tables, I have not found a plugin that can simulate or restore the comfortable and amazing table style on html, I do not know if I can use neumorphism on a basis, Create a stunning html like table?