pierocastillo / aura.ui

A Library with a lot of Controls for AvaloniaUI

Hello, I'm Piero :D

• A student of Computer Science, a passionate of Computer Graphics, CPU&GPU architectures, pure matemathics and physics.
• I like fruits.

Desktop App Developer

Backend Developer

DevOps

Environment

Stats

aura.ui's Issues

FloatingButtonBar should not animate when shown for the first time

This is issue is transferred for #21

when the view loades I noticed that the floating buttons are shown for a few miliseconds. I would like to change this behavior if I manage to find a way around this. You can also notice this in the designer.

Video demonstrating the issue:

Happy coding
Tim

Upgrade to .net 5

Please upgrade to .net 5

AddTab argument to make tab selected doesn't work

When adding a bunch of tabs. The argument to set the tab as selected. Doesn't seem to be working.

tabview.AddTab(new AuraTabItem{ ... }, true);
tabview.AddTab(new AuraTabItem{ ... });
tabview.AddTab(new AuraTabItem{ ... });

FloatingButton disabled style

The FloatingButton control style does not reflect the button's disabled state.
As of now, the button keeps its original color and does not hover.

The expected behavior would be for the button to change its color to say gray.

In this image, the Plus button is currently set to disabled and is clearly not visually distinctive from the Search button, which is active.

NavigationView

How can I get rid of the NavigationView animation when changing the content?

MessageBox/ContentDialog Not DIsplaying

So I have my main window code-behind and I have a button in XAML. I link my button to a click handler that in theory should open a messagebox when clicked, however nothing happens. I've tried all the folowing code below and no dialog ever shows. I'm using Linux with the GNOME 40 desktop enviornment.

private void ButtonClick(object sender, RoutedEventArgs e)
{
    var msg = new MessageDialog();
    msg.SetOwner(this);
    msg.Show(); //Dialog never shows and no error message occurs
}

This issue also occurs with:

private void ButtonClick(object sender, RoutedEventArgs e)
{
    this.NewMessageDialog("test", "test", null); //Dialog never shows and no error message occurs
}

This issue also occurs if i change MessageDialog to ContentDialog. I could be totally not doing this right, but from the sample you provided this is what I came up with 🤷‍♂️

FloatingBarButton sizing

Hi @PieroCastillo

I love the round shape of the buttons very well. However when changing the dynamic resource FloatingButtonSize to another size the shape will change because the CornerRadius is hard-coded.

I have a solution for this via IValueConverter. We can take either the Height or Width of the Control and calculate the needed CornerRadius

I'll prepare another PR for this next week I think.

Have a nice weekend

NavigationView not working on Blazor target

I've found an issue trying to use NavigationView in my Avalonia UI project.

Steps taken:

1. Create new crossplatform Avalonia project on .Net 6 from template
2. Change crossplatform lib to netstandard 2.1 to install Aura.UI
3. Install Aura.UI as in README.MD
4. Add NavigationView to MainView.axaml
5. Run Blazor target in debug

What should happen:
Web app is loaded and NavigationView is displayed.

What happens:
With new project, error is Uncaught RuntimeError: table index is out of bounds .
On my more complex project I've got shader compilation error , Uncaught error: unreachable, memory out of bounds
basically at random.

The type initializer for 'Aura.UI.Controls.TitleBar' threw an exception.

Hi
After I import the latest nuget in the project and then add

into my App.xaml I get the exception "The type initializer for 'Aura.UI.Controls.TitleBar' threw an exception."

any idea why?
thanks

NavigationView preselect item

Checked out sample Aura.UI.Gallery, that first NavigationViewItem is selected after the app launches. Is there some automatic selection of first item logic?
I tried to reproduce this logic on minimal code base, so

<NavigationView Header="Aura">
    <NavigationViewItem Header="Item 1" />
    <NavigationViewItem Header="Item 2" />
</NavigationView>

code above is working in this repo's solution (first item has been selected and NavigationView.SelectedContent equals Content), but it isn't in my empty project (no one item selected and SelectedContent is null).

Seems like i'm missing something imporant, but cannot find out what. Couldn't you hint me how does it works?

Support Old Avalonia DefaultTheme

thanks for creating these controls looks neat!
is there a way to use these controls with old Avalonia Theme (BaseDark,BaseLight)?

I'm getting some error like this when using Old DefaultTheme
KeyNotFoundException: Static resource 'SystemBaseHighColor' not found.

Avalonia v11

With Avalonia v11 out, is this library going to support it or it's a dead project?

Do note that the API should be stable from here on.

How to bind AuraTabView Items to ObservableCollection

it used to work in previous releases with some modified in the Data Template but now in "0.1.4.1" I got some exception System.ArgumentNullException: 'Value cannot be null. (Parameter 'target')'""
the Exception happened in Aura.UI.Controls.Generators.AuraTabItemContainerGenerator.CreateContainer

View

<AuraTabView TabStripPlacement="Left" Items="{Binding Peoples}">
    <AuraTabView.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
                <TextBlock Text="{Binding Age}" />
            </StackPanel>
        </DataTemplate>
    </AuraTabView.ItemTemplate>
</AuraTabView>

VM

    private protected ObservableCollection<Person> Peoples { get; } = new();

Person

public class Person {
    public Person(string name, string age) {
        Name = name;
        Age = age;
    }

    public string Name { get; }
    public string Age { get; }
}

System.NullReferenceException in NavigationView.cs -> SelectSingleItemCore

When selecting a NavigationViewItem and previously, nothing was selected, a System.NullReferenceException occours here:
(SelectedItem as ISelectable).IsSelected = false;
maybe it could be changed to:
if (SelectedItem != null) (SelectedItem as ISelectable).IsSelected = false;

BR

Using prerelease of Avalonia

Why you are not using a prerelease of Avalonia!?
all other Avalonia Packages I'm using is using a prerelease versions of avalonia so I can't add this package
can you please start using a prerelease or some workaround to use Aura.UI with a prerelease

FloatingButtonBar Ideas

Hi @PieroCastillo

while playing with the FloatingButtonBar I got some ideas:

1. The Icon is of type IImage instead I would like it to be of type object and add a StyledProperty of type IDataTemplate called IconTemplate
2. when the view loades I noticed that the floating buttons are shown for a few miliseconds. I would like to change this behavior if I manage to find a way around this. You can also notice this in the designer.

I'll provide a PR if I manage to get it implemented.

Happy coding
Tim

0.1.3-preview3 installation problem

I am trying to install last preview of Aura.UI but it is giving imcompitable error but 0.1.2 is not giving any error.

Önem Derecesi Kod Açıklama Proje Dosya Çizgi Gizleme Durumu
Hata NU1202 ColorPicker 1.0.0 paketi, netcoreapp3.1 (.NETCoreApp,Version=v3.1) ile uyumlu değil. ColorPicker 1.0.0 paketi şunları destekler: portable-win81+wpa81 (.NETPortable,Version=v0.0,Profile=Profile32) Avalonia-Ex03 D:\Git\C_Sharp_Projects\Avalonia-Ex03\Avalonia-Ex03\Avalonia-Ex03.csproj 1

My avalonia is:
Avalonia 0.10.0-preview5

and related other packages

A great addition to the component library would be a stepper control:

A great addition to the component library would be a stepper control:

• https://spiegelp.github.io/MaterialDesignExtensions/#documentation/stepper
• https://github.com/spiegelp/MaterialDesignExtensions

The point of which would be to display a different view based on the active step.
However, I'm not sure whether it makes sense to implement the stepping control logic for switching views. It would be better to have some sort of stepper bar with a transition animation when an item is set to active. Changing views should be done outside of the library.

So, something like this would be pretty awesome and should support both MVVM and static XAML:

I'm currently trying to implement something like this, even though component design isn't my strong suit. The implementation for the MaterialDesignExtensions isn't clean, in my opinion, as it requires the displayed content to inherit a view model provided by the library.

Originally posted by @hailstorm75 in #7 (comment)_

Circular Contextmenu

Implement Circular Contextmenu or ContextFlyout

Problem in finding styles

Hi,
I create a new avalonia project with jetbrains rider and add the styles below to App.xaml. (target framework is net 6.0)

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="using:Avalonia.NETCoreMVVMApp1"
             x:Class="Avalonia.NETCoreMVVMApp1.App">
    <Application.DataTemplates>
        <local:ViewLocator/>
    </Application.DataTemplates>

    <!-- <Application.Styles> -->
    <!--     <FluentTheme Mode="Light"/> -->
    <!-- </Application.Styles> -->
    <Application.Styles>
        <StyleInclude Source="avares://Avalonia.Themes.Fluent/Accents/BaseLight.xaml"/>
        <StyleInclude Source="avares://Aura.UI.FluentTheme/AuraUI.xaml"/>
        <StyleInclude Source="avares://Avalonia.Themes.Default/Accents/BaseLight.xaml"/>
        <StyleInclude Source="avares://Avalonia.Themes.Default/DefaultTheme.xaml"/>
    </Application.Styles> 
</Application>

I get an exception in row <StyleInclude Source="avares://Aura.UI.FluentTheme/AuraUI.xaml"/>.

How can i solve this problem?

Getting object null error when creating a new instance of TabItem

I'm creating a control using AuraTabView. I'm trying to add a default tab in C# but keep getting object null error when creating a new AuraTabItem. Should I not be adding it here?

NavigationView Background Color

How can one change navigation background color to custom color?

FloatingButtonBar Clicking issue

Hi @PieroCastillo

there is an issue where the Click doesn't work everywhere. See video attached:

I already know the root cause:

• The ItemsPresenter is Transparent bur still above the ToggleButton.
• This leads to the ItemsPresenter eating up the Click-Event

Possible Solution:

• Set IsHitTestVisible=false
• Set IsTabStop=false
• Set Focusable=false
• or alternative: Set IsVisible=false (But this may break animation)

Happy coding
Tim

Roadmap

0.1.4

• NavigationView MVVM support [WIP]
• AuraTabView MVVM support [Done]
• CardCollection MVVM support [Done]
• FlutterButtonBar MVVM support [WIP]
• CardControl Command & CommandParameter properties [Done]
• Refresh NavigationView Style [WIP]
• Remake SearchSystem in NavigationView.
• Fixed Title for NavigationView [Done]

0.1.5

• NavigationView History
• Mobile controls (maybe with Flutter styles)
• ColorPicker [WIP]
• AudioPlayer
• Attached Properties for common uses, like these:

<TextBlock AuraProperties.TextBlockTextType="H1"/>
<TextBlock AuraProperties.TextBlockTextType="H2"/>
<TextBlock AuraProperties.TextBlockTextType="H3"/> //maybe until H6

[Suggestion] FlyoutContentControl

A content control that displays content just like the regular ContentControl and additionally introduces flyout windows that slide in from the sides.

Please refer to the MahApps implementation of GestureWindow.Flyouts

Example usage:

<FlyoutContentControl>
  <FlyoutContentControl.Content>
    <Label Content="My regular content"/>
  </FlyoutContentControl.Content>
  <FlyoutContentControl.Flyout>
    <Flyout IsOpen="{Binding IsOpen}" Position="Left" Width="300" Header="{Binding SelectedItem}" DisableContentWhenOpen="True" CloseOnClickOutside="True">
      <!-- Flyout content -->
    </Flyout>
  </FlyoutContentControl.Flyout>
</FlyoutContentControl>

MacOS support

some xaml markup errors in macOS.
Will there be future support?

Suggestions :)

I open this issue so that people who want to give suggestions can do so.

How to bind AuraTabView Items to Observable Collection

Hello,

i'm currently trying to use the NAvigationView for one of our Apps main menu.
The menu items are stored in an obervable collection and are menu groups and menu elements which belong to one group.
Till now, we're using a treeview to show the menu by binding to the collection with the following code:

<TreeView x:Name="tvwMainMenu" Width="250" Grid.Column="0" Items="{Binding MenuElements}">
  <TreeView.DataTemplates>
    <TreeDataTemplate DataType="caocore:CNavigationGroup" ItemsSource="{Binding NavigationElements}">
      <StackPanel Orientation="Horizontal">
        <Image Source="{Binding Icon, Converter={StaticResource BitmapConverter}}" />
        <TextBlock Text="{Binding Name}" />
      </StackPanel>
    </TreeDataTemplate>
    
    <DataTemplate DataType="caocore:CNavigationElement">
      <StackPanel Orientation="Horizontal">
        <Image Source="{Binding Icon, Converter={StaticResource BitmapConverter}}" />
        <TextBlock Text="{Binding Name}" />
      </StackPanel>
    </DataTemplate>
  </TreeView.DataTemplates>
</TreeView>

Could you please give me a hint, how to bind to the NavigationView?

BR