nkyUI

Neptunium kyUI - UI styles for Avalonia

Features

Available

Themes and Accent colors for theming your window
The most common controls have been themed
Basic overlay dialog support

Planned

Smooth, animated transitions (as soon as Avalonia supports XAML-defined animations)
More dialogs

Using the theme - Quick Start

First, reference the nkyUI library.

Include styles in `App.xaml`:

Pick a base theme: (BaseLight, BaseDark)

Pick an accent: (Red, Blue) [more soon!]

Add the styles accordingly:

<Application xmlns="https://github.com/avaloniaui">
  <Application.Styles>
    <StyleInclude Source="resm:Avalonia.Themes.Default.DefaultTheme.xaml?assembly=Avalonia.Themes.Default"/>


    <StyleInclude Source="resm:nkyUI.Themes.BaseDark.xaml?assembly=nkyUI" />
    <StyleInclude Source="resm:nkyUI.Themes.Accents.Red.xaml?assembly=nkyUI" />
    <StyleInclude Source="resm:nkyUI.Styles.Controls.xaml?assembly=nkyUI" />
  </Application.Styles>
</Application>

This will load the nkyUI themes into your app.

Update window

Next, open the .xaml file for the window you want to theme. Add the following namespace:

xmlns:kControls="clr-namespace:nkyUI.Controls;assembly=nkyUI"

Next, change the root element from Window to kControls:KYUIWindow.

An example view:

<kControls:KYUIWindow xmlns="https://github.com/avaloniaui"
                      xmlns:kControls="clr-namespace:nkyUI.Controls;assembly=nkyUI"
                      Icon="resm:nkyUI.Demo.icon.ico?assembly=nkyUI.Demo"
                      Title="nkyUI Demo"
                      Width="600"
                      Height="400"
                      MinWidth="500"
                      MinHeight="300">
    <kControls:KYUIWindow.WindowCommands>
        <Button Content="TitleBar Button" />
    </kControls:KYUIWindow.WindowCommands>

    <Grid Margin="20">
        <TextBlock>Hello world!</TextBlock>
        <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,25,0,0" />
        <CheckBox Content="A Checkbox" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,60,0,0" />
    </Grid>
</kControls:KYUIWindow>

Finally, open the corresponding code-behind (.xaml.cs) file, and change the base class from Window to KYUIWindow.

An example codebehind:

using Avalonia.Markup.Xaml;
using nkyUI.Controls;

namespace nkyUI.Demo
{
    public class MainWindow : KYUIWindow
    {
        public MainWindow()
        {
            this.InitializeComponent();
            App.AttachDevTools(this);
        }

        private void InitializeComponent()
        {
            AvaloniaXamlLoader.Load(this);
        }
    }
}

When you run your app, you should see the nkyUI styles applied!

0xFireball/nkyUI