irihitech / ursa.avalonia Goto Github PK

View Code? Open in Web Editor NEW

400.0 9.0 34.0 132.35 MB

Home Page: https://irihitech.github.io/Ursa.Avalonia/

License: MIT License

C# 100.00%

avalonia avaloniaui control-library cross-platform cross-platform-gui

ursa.avalonia's Introduction

Ursa

Ursa is a UI library for building cross-platform UIs with Avalonia UI.

How to use

Ursa

Add nuget package:

dotnet add package Irihi.Ursa

You can now use Ursa controls in your Avalonia Application.

<Window
    ...
    xmlns:u="https://irihi.tech/ursa"
    ...>
    <StackPanel Margin="20">
        <u:ButtonGroup Classes="Solid Warning">
            <Button Content="Hello" />
            <Button Content="World" />
        </u:ButtonGroup>
        <u:TagInput />
    </StackPanel>
</Window>

Ursa.Themes.Semi

To make Ursa controls show up in your application, you need to reference to a theme package designed for Ursa. Ursa.Themes.Semi is a theme package for Ursa inspired by Semi Design. You can add it to your project by following steps.

Add nuget package:

dotnet add package Semi.Avalonia --version 11.0.7
dotnet add package Irihi.Ursa.Themes.Semi

Include Styles in application:

<Application...
    xmlns:u-semi="https://irihi.tech/ursa/themes/semi"
    ....>

    <Application.Styles>
        <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
        <u-semi:SemiTheme Locale="zh-CN"/>
    </Application.Styles>

Support

We offer limited free community support for Semi Avalonia and Ursa. Please join our group via FeiShu(Lark)

ursa.avalonia's People

Contributors

Stargazers

Watchers

ursa.avalonia's Issues

NavigationMenu & NavigationMenu Item

The application will crash unless the TagInput Width property is set to a special value.

Navigation issues

Direct Items mode is not working after closing menu
MenuItem corner radius is wrong

Add TabView

Would be great if it has a TabView control that can Reorder, New/Close tabs. (Like in FluentAvalonia)

Divider

Dialog count down and close

TagInput binding errors

When attempting to bind the Tag property as below:

<u:TagInput Width="550"  Tags="{Binding TagInputItems}"/>

public ObservableCollection<string> TagInputItems { get; set; } = ["A", "B"];

The application crashed, and the error log reports the following:

System.NullReferenceException: Object reference not set to an instance of an object.at Ursa.Controls.TagInput.OnTagsPropertyChanged(AvaloniaPropertyChangedEventArgs args)

Loading

Default binding values not displayed during initialization

ImageViewer

<u:ImageViewer
    Scale="0.2"
    Source="../Assets/IRIHI.png">

IPv4Box

<u:IPv4Box HorizontalAlignment="Stretch" IPAddress="{Binding Address}"/>

[ObservableProperty] private IPAddress? _address = IPAddress.Parse("192.168.1.1");

talk: consider support without avalonia control? like dialog or date between picker something?

NavigationMenu control parameter bug

NavigationMenu look like padding value is to much,
and set closedWith，openWith parameter is not work

Roadmap

Timepicker
DateRangePicker

Ipbox cannot invoke ime in android.

Pagination: index out of range and Content switch trigger

I use the Pagination in my project,and I found a BUG.When I switch PageSize, it triggers a recalculation of CurrentPage.In UpdateButtons, sometimes index is passed in greater than TotalCount, so it is necessary to check if index is greater than TotalCount when assigning the currentIndex field.
Here are my suggestions:

 private void UpdateButtons(int index)
    {
        if (_buttonPanel is null) return;
        if (PageSize == 0) return;

        // old
        int currentIndex = index;

        // new
        int currentIndex = index <= TotalCount ? index : TotalCount;
        ......
//

Also, when I use Pagination in my project, I need to refresh the page content when the CurrentPage and PageSize properties change. Since Pagination doesn't have event and command bindings, I need to do a page refresh trigger in the set method of the PageSize and CurrentPage bound properties.
When I switch PageSize, the CurrentPage property changes and then the PageSize property changes, which causes my page to refresh repeatedly. Is there any good way to deal with it?
Maybe we can add a Command here,and Execute Command when the property changed.

It would be preferable to have `Badge` extend `HeaderedContentControl`

OverlayDialog: Support Click on mask to close

Timeline

DualBadge `social` classes

请问DataGrid中如何根据单元格的值来动态修改行颜色？

请问DataGrid中如何根据单元格的值来动态修改行颜色？
因为Avalonia中没有DataTrigger的缘故，上述功能是否能实现，能说下思路么？
非常感谢！

Support CancellationToken for ShowAsync related methods.

如何实现浏览PDF文件啊？

Improve icon only button

Icon only button padding is wrong.
Support Orientation.

增加 DataGrid 右侧冻结列等功能

请问未来是否有计划去完善DataGrid的功能，例如右侧冻结列、筛选等等（我们也知道DataGrid确实是个大型控件），现在的项目不知道能否等得到相关控件的支持：）

Badge should have light and inverted theme.

import React from 'react';
import {Badge, Avatar} from '@douyinfe/semi-ui';

() => {
    const bgStyle = {
        padding: '8px',
    };
    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
    return (
        <>
            <div style={{padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)'}}>
                <div style={{display: 'flex'}}>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='solid' type={'primary'}>
                            <Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='solid' type={'secondary'}>
                            <Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='solid' type={'tertiary'}>
                            <Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='solid' type={'success'}>
                            <Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='solid' type={'warning'}>
                            <Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='solid' type={'danger'}>
                            <Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
                        </Badge>
                    </div>
                </div>

                <div style={{display: 'flex'}}>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='light' type={'primary'}>
                            <Avatar color='indigo' shape='square' style={style}>YB</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='light' type={'secondary'}>
                            <Avatar color='indigo' shape='square' style={style}>YB</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='light' type={'tertiary'}>
                            <Avatar color='indigo' shape='square' style={style}>YB</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='light' type={'success'}>
                            <Avatar color='indigo' shape='square' style={style}>YB</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='light' type={'warning'}>
                            <Avatar color='indigo' shape='square' style={style}>YB</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='light' type={'danger'}>
                            <Avatar color='indigo' shape='square' style={style}>YB</Avatar>
                        </Badge>
                    </div>
                </div>

                <div style={{display: 'flex'}}>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='inverted' type={'primary'}>
                            <Avatar color='light-green' shape='square' style={style}>LX</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='inverted' type={'secondary'}>
                            <Avatar color='light-green' shape='square' style={style}>LX</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='inverted' type={'tertiary'}>
                            <Avatar color='light-green' shape='square' style={style}>LX</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='inverted' type={'success'}>
                            <Avatar color='light-green' shape='square' style={style}>LX</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='inverted' type={'warning'}>
                            <Avatar color='light-green' shape='square' style={style}>LX</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge count={'■■■'} theme='inverted' type={'danger'}>
                            <Avatar color='light-green' shape='square' style={style}>LX</Avatar>
                        </Badge>
                    </div>
                </div>

                <div style={{display: 'flex'}}>
                    <div style={bgStyle}>
                        <Badge dot theme='solid' type='primary'>
                            <Avatar color='light-green' shape='square' style={style}>YZ</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge dot theme='solid' type='secondary'>
                            <Avatar color='light-green' shape='square' style={style}>YZ</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge dot theme='solid' type='tertiary'>
                            <Avatar color='light-green' shape='square' style={style}>YZ</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge dot theme='solid' type='success'>
                            <Avatar color='light-green' shape='square' style={style}>YZ</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge dot theme='solid' type='warning'>
                            <Avatar color='light-green' shape='square' style={style}>YZ</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge dot theme='solid' type='danger'>
                            <Avatar color='light-green' shape='square' style={style}>YZ</Avatar>
                        </Badge>
                    </div>
                </div>

                <div style={{display: 'flex'}}>
                    <div style={bgStyle}>
                        <Badge dot theme='light' type='primary'>
                            <Avatar color='lime' shape='square' style={style}>HW</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge dot theme='light' type='secondary'>
                            <Avatar color='lime' shape='square' style={style}>HW</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge dot theme='light' type='tertiary'>
                            <Avatar color='lime' shape='square' style={style}>HW</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge dot theme='light' type='success'>
                            <Avatar color='lime' shape='square' style={style}>HW</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge dot theme='light' type='warning'>
                            <Avatar color='lime' shape='square' style={style}>HW</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge dot theme='light' type='danger'>
                            <Avatar color='lime' shape='square' style={style}>HW</Avatar>
                        </Badge>
                    </div>
                </div>

                <div style={{display: 'flex'}}>
                    <div style={bgStyle}>
                        <Badge dot theme='inverted' type={'primary'}>
                            <Avatar color='lime' shape='square' style={style}>XM</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge dot theme='inverted' type={'secondary'}>
                            <Avatar color='lime' shape='square' style={style}>XM</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge dot theme='inverted' type={'tertiary'}>
                            <Avatar color='lime' shape='square' style={style}>XM</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge dot theme='inverted' type={'success'}>
                            <Avatar color='lime' shape='square' style={style}>XM</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge dot theme='inverted' type={'warning'}>
                            <Avatar color='lime' shape='square' style={style}>XM</Avatar>
                        </Badge>
                    </div>
                    <div style={bgStyle}>
                        <Badge dot theme='inverted' type={'danger'}>
                            <Avatar color='lime' shape='square' style={style}>XM</Avatar>
                        </Badge>
                    </div>
                </div>
            </div>
        </>
    );
};

关于Navigation控件的体验问题

您好，首先Ursa的方向一定是好的，功能也是急的，未来也能给刚接触avalonia的人一个全新的体验。
希望能继续加油！！！
然后是关于Navigation导航的一些意见，在体验上不够流畅，有明显的卡顿和转场动效比较突兀，希望能有更好的体验

TagInput Panel redesign

Consider to remove TextBox from Items, and attach it to the panel individually. This would reduce the brain workload of manipulating tag changes.

Badge is covered by the element on the right

IPBox

Dialog: allow user to config a dialog cannot be dragged.

Banner

Request for New UI Controls: EditableTextblock and RangeSlider

I hope this message finds you well. I am reaching out to request the addition of two new UI controls to enhance our application's interactivity and user experience.

EditableTextblock: A control that combines the display features of a TextBlock with the editability of a TextBox. This control should allow users to view text content as if it's static text but can click or double-click to switch into an edit mode where they can modify the text. Once the editing is finished, it should seamlessly return to a non-editable state. Features like text wrapping, placeholder text, and a commit/cancel edit option would be highly beneficial.
RangeSlider: A dual-thumb slider control that allows users to select a range of values by moving two thumbs along a track. The control should support both horizontal and vertical orientations, step values, and should provide easy access to the lower and upper values selected. It would be ideal if the control also included visual markers for the start, end, and step intervals.
Both controls should be designed with accessibility, responsiveness, and theming in mind, ensuring they can be easily integrated into various parts of our application and customized as per different design requirements.
I believe these controls will be a valuable addition to our UI toolkit and greatly appreciate your consideration of this request. Please let me know if you need further details or if a discussion is required to proceed with the implementation.
Thank you for your time and effort.
Best regards,

Pagination

Dialog: Support Host data template and passing Control instance as parameter.

Some users need to separate View and ViewModel into different projects, so there should be a mechanism to make DialogService compatible with IOC.

Verification code input

Dialog: add chrome layer back...

Support of Side Menu

Hello！Can Semi.Avalonia support side menu like this?

IPBox cut hotkey is not implemented.

Toolbar

https://fluent2.microsoft.design/components/web/react/toolbar/usage

KeyGestureInput to implement IClearControl, IInnerContentControl

Numeric updown value binding mode should be twoway

Avalonia 学习分享

你好，在哔哩看到说可以私信你，可以邀请加入微信 Avalonia 群，
麻烦拉我入群可以吗，谢谢

缺少支持带复选的树控件

目前缺少CheckBoxTreeViewItem控件，实际开发中是需要带复选框的TreeViewItem，增加控件时期望自带全选和反选效果

Suggestion : RangeSlider control

Example https://api.flutter.dev/flutter/material/RangeSlider-class.html

Default set of contols is missing one, and it is handy in lots of UI tasks

TagInput issues

Tags item update is not reflected on UI.
Support InnerLeftContent and InnerRightContent in UI layout
Support ClearAll in UI.
Support AddTagOnLostFocus

Dialog.ShowCustomModalAsync 问题

在 11.0.7 中使用 IDataTemplate 生成 ComboBox, 当使用 Dialog.ShowCustomModalAsync 弹出窗口时，点击 Combo 的下拉列表无法弹出来。同样的代码在 OverlayDialog.ShowCustomModalAsync 下可以正常弹出来。

/* 
  *   在 View 中主要的代码
  */
<Border BorderThickness="2" BorderBrush="Gray">
    <ItemsControl Name="Items" Grid.Row="0" ItemsSource="{Binding SourceItems}" Padding="0" Margin="0">
        <ItemsControl.DataTemplates>
            <uiExtensions:PropertyDataTemplate />
        </ItemsControl.DataTemplates>
    </ItemsControl>
</Border>


/*
 * ViewModel 中 SourceItems 的示例
 */
  vm.SourceItems= {"你好","世界","Helo","World"};

/* 
  *  PropertyDataTemplate （IDataTemplate ）中主要的代码
  */
 public Control? Build(object? param)
{
   var combo = new ComboBox();
   combo.MaxDropDownHeight = 300;

   combo.ItemsSource = data?.Items ?? new List<object>(); 
    combo.SelectedValue = data.Value;

   // hack: bug320, 解决 下拉框不能自己 popup 的问题,
   combo.PointerPressed += (sender, args) =>
   {
      //if (combo.IsDropDownOpen == false)
      //{
      //    combo.IsDropDownOpen = true;
      //}
  };

  // hack; bug320,值选中时更新
   combo.SelectionChanged += (sender, args) =>
  {
    data.Value = combo.SelectedValue;
  };

   combo.ItemTemplate = data.InnerDataTemplate ?? new TextBlockTemplate();

   DockPanel panel = new DockPanel();
   panel.Children.Add(combo);
   return panel;
  }


 public class TextBlockTemplate : IDataTemplate
 {
     public Control? Build(object? param)
     {
         
         TextBlock md = new TextBlock();
         string str = param?.ToString() ?? "";
         md.Text = str;
         return md;
     }

     public bool Match(object? data)
     {
         return true;
     }
 }