Gitter NuGet downloads Discord



Aura.UI

Control's Library for Avalonia

Overview

  • Controls Availables

    • AuraTabItem
    • AuraTabView
    • SuperColorPicker
    • ColorPickerButton
    • PagesView
    • GroupBox
    • FilledSlider
    • ModernSlider
    • Ribbon
    • SuperListBoxItem
  • Controls in Developing

    • GradientEditor : This control creates a GradientBrush to use in other controls.
    • NavigationView : A scrollable MenuItems, like UWP NavigationView.
    • Follower : This Control follow the cursor whitin a control.
    • ColourSlider : This slider has colors as values.
    • ProgressRing : This is similar to progressbar, but is indefinite.
  • Windows Availables

    • ColorWindowSmall : This window shows a ColorPicker.
  • Windows in Developing:

    • ChangeColorWindow : This window creates a SolidColorBrush or GradientBrush.
  • Planned Controls and Windows for future versions:

    • TabbedWindow : An optimized window to use with AuraTabItems.
    • StatusBar : This bar shows an status of application, it will use a class for the status.
    • WriteablePanel : A panel por represent and edit images easily.
  • UI Extensions

    • TabControlExtensions:

      CloseTab(this TabControl tabControl, TabItem tabItem) //CloseTab with itself
      CloseTab(this TabControl tabControl, int index) //CLoses Tab with index
      AddTab(this TabControl tabControl, TabItem TabItemToAdd,bool Focus)
      //Add a Tab 
    • TemplatedControlExtensions:

      GetControl<T>(this TemplatedControl templatedControl ,TemplateAppliedEventArgs e, string name) where T : AvaloniaObject
      //Return an AvaloniaObject from Template
    • LogicalExtensions:

      GetParentTOfLogical<T>(this ILogical Logical) where T : class {}
      // Return the closest logical parent
      
      GetParentTOfLogical<T>(this ILogical Logical) where T : class {}
      // Return the closest window parent
    • Extensions in Developing

      <!--RevealExtension ==> This extension for xaml create a RevealEffect for a Brush Property-->
      <Button Background={Reveal TintColor=Gray, CursorRadius=20, Opacity=0.5}></Button>

Install

Now the library is available in Nuget.org.

First Step

Go to the next link: https://www.nuget.org/packages/Aura.UI .

Second Step

Install Aura.UI with Visual Studio or dotnetCLI:

Visual Studio

Open the Nuget Packages Manager on your project and search Aura.UI.

Dotnet CLI

Open the terminal on the root folder of your project and write

dotnet add package Aura.UI --version 0.1.3-preview3

Do it like this:

Preparation

Add Styles to App.xaml

  <Application  xmlns="https://github.com/avaloniaui"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                x:Class="YourApp.App">
    <Application.Styles>
        <StyleInclude Source="avares://Avalonia.Themes.Default/DefaultTheme.xaml"/>
        <StyleInclude Source="avares://Avalonia.Themes.Default/Accents/BaseDark.xaml"/>
       <StyleInclude Source="avares://Aura.UI/AuraUI.xaml"/> <!-- Add this Source --> 
       <StyleInclude Source="avares://Aura.UI/AuraAcrylicBase.xaml"/> <!--When you use a controls with IMaterial Interface , you should add this source-->
    </Application.Styles> 
   </Application>

Next add this using instructions:

using Aura.UI.Controls;
using Aura.UI.UIExtensions;
using Aura.UI.Windows;

Controls

AuraTabItem

A Closable TabItem what has extra features.

AuraTabView

Is similar to TabControl, but this can add new tabs with a built-in button, also its tabs reduce its width when the spacing is little.

TitleBox

Similar to GroupBox, but has 2 buttons and is easy-to-custom.

SuperColorPicker

This color picker can modify the opacity and the color of a SolidColorBrush, and let you see a preview, too.

## ColorPickerButton A Toggle Button when you click it, shows a ColorPicker on a Window.

PagesView

A Pages Collection for simplify the life.

ModernSlider

This Slider imitates the Android Slider, but uses the Acrylic Textures!

GroupBox

This Control has a header and that show it in the top.

Ribbon (Preview)

This control shows a Ribbon, and use its own subcontrols.

Ribbon SubControls:

  • RibbonItem : It's the principal content selector, has a header and the content property.

  • RibbonPanel : This panel must be into the RibbonItem Content, organizes the RibbonGroups.

  • RibbonGroup : This HeaderedContentControl organizes the groups of the RibbonItem.

  • RibbonSeparator : This control separates the RibbonGroups.

    The default height of the container is 150, but if you want to change it, you have to edit the follow resource:

    <ParentWindow xmlns:ms="clr-namespace:System;assembly=netstandard">
     <ParentWindow.Resources>
        <ms:Double x:Key="DefaultRibbonContainerHeight">200</ms:Double>
     </ParentWindow.Resources>
    </ParentWindow>

    Example:

   <Border Padding="10">
      <Border.Resources>
            <ms:Double x:Key="DefaultRibbonContainerHeight">170</ms:Double>
      </Border.Resources>
        <Ribbon Header="HeaderTest" LeftContent="File" RightContent="Settings" ExpansionState="Total">
            <RibbonItem Header="Start">
               <RibbonPanel>
                    <RibbonGroup Header="Colour">
                        <Border Background="Yellow" Height="90" Width="100"/>
                    </RibbonGroup>
                    <RibbonSeparator/>
                    <RibbonGroup Header="Themes">
                        <StackPanel Orientation="Horizontal">
                            <Border Background="Black" Width="60" Height="90"/>
                            <Border Background="White" Width="60" Height="90"/>
                        </StackPanel>
                    </RibbonGroup>
                   <RibbonSeparator/>
                    <RibbonGroup Header="Fonts">
                        <StackPanel Spacing="10">
                            <TextBlock FontSize="20">Ribbon</TextBlock>
                            <TextBlock FontSize="14">Ribbon</TextBlock>
                            <TextBlock FontSize="10">Ribbon</TextBlock>
                        </StackPanel>
                    </RibbonGroup>
                </RibbonPanel>
            </RibbonItem>
            <RibbonItem Header="Edit">
                <RibbonPanel>
                </RibbonPanel>
            </RibbonItem>
        </Ribbon>
    </Border>

This xaml code produces this result:

SuperListBoxItem

This ListBoxItem has a Icon and styled texts.

About Aura.UI

This library is open source and free, in a few months come out the first stable version,for now, Aura.UI is a beta.

How To Collaborate

If you want to collaborate with this proyect, contact me with the next links:

  • Whatsapp
  • Messenger
  • Gitter

Aura.ui

A Library with a lot of Controls for AvaloniaUI

Aura.ui Info

⭐ Stars 274
🔗 Source Code github.com
🕒 Last Update 4 months ago
🕒 Created 2 years ago
🐞 Open Issues 9
➗ Star-Issue Ratio 30
😎 Author PieroCastillo