Avalonia Ursa 使用

Avalonia Ursa是一个企业级的Avalonia UI组件库，它提供了丰富的预制控件、现代化的设计系统，并支持Windows、MacOS、Linux、Android、IOS和Web平台。

1.环境准备安装

环境要求

项目	要求
.NET SDK	.Net6.0或更高版本
Avalonia UI	11.1x或11.2.x (不支持11.2.0)
开发工具	Visual Studio 2022,Rider或支持Avalonia 的IDE

2.安装

安装核心包：在Avalonia项目中，通过命令安装Ursa核心库

install-package Irihi.Ursa

安装主题包：必须安装一个主题包才能使控件可见。这是最关键也最容易遗漏的一步

install-package Semi.Avalonia
install-package Irihi.Ursa.Themes.Semi
或通过命令安装
dotnet add package Semi.Avalonia
dotnet add package Irihi.Srsa.Thems.Semi

配置样式：在项目的App.axaml 文件中，引入主题命名空间并将其添加到应用样式中

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="AvaloniaUrsaDemo.App"
			 xmlns:semi="https://irihi.tech/semi"
			 xmlns:u-semi="https://irihi.tech/ursa/themes/semi"
             RequestedThemeVariant="Default">
             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->

    <Application.Styles>
        <FluentTheme />
		<!--添加Semi基础主题和Ursa的Semi主题-->
		<semi:SemiTheme Locale="zh-CN" />
		<u-semi:SemiTheme Locale="zh-CN" />
    </Application.Styles>
</Application>

核心功能与使用

安装完成后，就可以在xaml中使用Ursa控件了
1.引入命名控件: 在窗口或用户控件的axaml头部添加命名空间

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:u="https://irihi.tech/ursa"
		mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaUrsaDemo.MainWindow"
        Title="Ursa 框架应用">
	<Grid RowDefinitions="*,*,*,*" ShowGridLines="True">
		<StackPanel Orientation="Horizontal">
			<u:DatePicker Width="120" DisplayFormat="yyyy-MM-dd HH:mm:ss"
						  Watermark="请选择时间" Height="40" VerticalAlignment="Center"/>
            
		</StackPanel>
	</Grid>
</Window>

Ursa 提供了超过60各组件，以下是一些典型类别

类别	包含空间的示例
导航	NavMenu(导航菜单)、Breadcrumb(面包屑)、Pagination(分页)
数据录入	Form(表单)、AutoCompleteBox(自动完成)、TagInput(标签输入)
反馈	Loading(加载中)、Notification(通知)、MessageBox(消息框)
数据展示	Descriptions(描述列表)、TimeLine(时间线)、Skeleton(骨架屏)
布局	AspectRatioLayout(宽高比布局)、ElasticWrapPanel(弹性换行面板)

启动画面：Ursa 内置了SplashWindow,可以用来自定义启动画面，显示Logo、进度条和状态文本，有效提升应用启动时的体验
主题与样式自定义：Semi Design提供了深浅色主题，你也可以通过覆盖DynamicResource 来深度自定义颜色、尺寸等样式

示例

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:u="https://irihi.tech/ursa"
		xmlns:semi="https://irihi.tech/ursa/themes/semi"
		mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaUrsaDemo.MainWindow"
        Title="Ursa 框架应用">
	<Window.Styles>
		<Style Selector="Button">
			<Setter Property="Margin" Value="10 5" />
			<Setter Property="Background" Value="SkyBlue" />
			<Setter Property="Foreground" Value="White" />
			<Setter Property="CornerRadius" Value="7" />
			
		</Style>
	</Window.Styles>
	<Grid RowDefinitions="50,2*,*,Auto" ShowGridLines="True">
		<StackPanel Orientation="Horizontal">
			<Button Click="Button_Click" Content="MessageBox 消息框" Height="30" Width="180"/>
			<u:Breadcrumb Separator="|">
				<u:BreadcrumbItem>
					主页
				</u:BreadcrumbItem>
				<u:BreadcrumbItem>
					产品介绍
				</u:BreadcrumbItem>
				<u:BreadcrumbItem>
					联系我们
				</u:BreadcrumbItem>
			</u:Breadcrumb>
		</StackPanel>
		<StackPanel Orientation="Horizontal" Grid.Row="1">
			<u:NavMenu IsHorizontalCollapsed="False" >
				<u:NavMenu.Items>
					<MenuItem Header="文件" Click="Menu_Click"/>
					<MenuItem Header="打开" Click="Menu_Click" />
					<MenuItem Header="编辑" Click="Menu_Click" />
				</u:NavMenu.Items>
			</u:NavMenu>
			<u:FormGroup>
				<u:Form Height="300" Width="200">
					<Border BorderBrush="Blue" BorderThickness="1" Background="AliceBlue">
						<TextBlock Text="Form1" />
					</Border>
				</u:Form>
				<u:Form>
					<u:Form.Items>
						<u:FormItem>
							<StackPanel Orientation="Vertical">
								<StackPanel Orientation="Horizontal">
									<Button Width="120" Height="40" Content="Btn1"/>
								</StackPanel>
							</StackPanel>
						</u:FormItem>
					</u:Form.Items>
				</u:Form>
			</u:FormGroup>
			<u:AutoCompleteBox  Height="40" Width="120"/>
			<u:Loading Width="40" Height="40" IsLoading="True" Margin="10 0"/>
			<Button Content="Notice" Height="40" Width="80" Click="BtnNotice_Click" />
			<u:Timeline>
				<u:Timeline.Items>
					<u:TimelineItem Header="第一步" Content="自阀手柄运转位" Time="14:30:00" />
					<u:TimelineItem Header="第二步" Content="自阀手柄紧急位" Time="14:32:00" />
				</u:Timeline.Items>
			</u:Timeline>
		</StackPanel>
		
		<u:Pagination Grid.Row="4" PageSize="10" />
	</Grid>
</Window>

Code

using Avalonia.Controls;
using System.Threading.Tasks;
using Ursa.Controls;
using Avalonia.Interactivity;
namespace AvaloniaUrsaDemo
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private async void Button_Click(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
        {
           await  MessageBox.ShowAsync("你好","提示",MessageBoxIcon.Information,MessageBoxButton.OK);
        }

        private async void Menu_Click(object? sender, RoutedEventArgs e)
        {
            if (e.Source is MenuItem)
            {
                MenuItem item = (MenuItem)e.Source;
                await MessageBox.ShowAsync(item.Header.ToString(),"提示",MessageBoxIcon.Information,MessageBoxButton.OK);
            }
        }
       
    }
}

效果

posted @ 2026-02-10 11:53 丹心石阅读(881) 评论(0) 收藏举报

刷新页面返回顶部