C# 使用 Avalonia的 SukiUI Nuget元件完整範例(A example of using Avalonia’s SukiUI components)

資料來源: 

https://gemini.google.com/share/1262dfbb84b6
https://gemini.google.com/share/98beaa4104e5

原始專案GITHUB: https://github.com/kikipoulet/SukiUI

自己測試GITHUB: https://github.com/jash-git/A-example-of-using-Avalonia-s-SukiUI-components

核心Code:

00.App.axaml

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="SukiUI_Avalonia.App"
             xmlns:sukiUi="clr-namespace:SukiUI;assembly=SukiUI"
             RequestedThemeVariant="Default">
             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
  
    <Application.Styles>
        <FluentTheme />
        <!-- SukiUI Theme -->
        <sukiUi:SukiTheme ThemeColor="Blue" Locale="zh-TW" />
    </Application.Styles>
</Application>

01.MainWindow.axaml

<sukiUi:SukiWindow xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:SukiUI_Avalonia.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        xmlns:sukiUi="clr-namespace:SukiUI.Controls;assembly=SukiUI"
        x:Class="SukiUI_Avalonia.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="SukiUI_Avalonia" IsMenuVisible="False">

    <Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainWindowViewModel/>
    </Design.DataContext>

	<Grid Margin="20">
        <StackPanel Spacing="10" VerticalAlignment="Center">
            
            <sukiUi:GlassCard Width="300" Height="150">
                <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                    <TextBlock Text="歡迎使用 SukiUI" Classes="h2" />
                    <Button Content="點擊我" Classes="Primary" Margin="0,10,0,0" />
                </StackPanel>
            </sukiUi:GlassCard>

            <ProgressBar Value="60" Width="300" Height="70"/>
            
            <CheckBox Content="啟用功能" IsChecked="True" />

            <CheckBox Content="放大後的選項" RenderTransformOrigin="0.5,0.5">
                <CheckBox.RenderTransform>
                    <ScaleTransform ScaleX="1.5" ScaleY="1.5" />
                </CheckBox.RenderTransform>
            </CheckBox>
        </StackPanel>
    </Grid>

</sukiUi:SukiWindow>

02.MainWindow.cs

using Avalonia.Controls;
using SukiUI.Controls;

namespace SukiUI_Avalonia.Views
{
    public partial class MainWindow : SukiWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

AI回復圖片備份