Avalonia(C#) 元件開發

資料來源: copilot

開發一個自訂義的按鈕並載自訂對話和使用 具有:自訂屬性/子元件疊加/繪圖

BaseButton.axaml

<UserControl 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"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
			 x:Name="root"
             x:Class="VPOS_Avalonia.BaseButton" MinWidth="100" MinHeight="50">
	<!-- Grid 疊加圖層準備 -->
	<Grid RowDefinitions="*" ColumnDefinitions="*">
		<!-- Border 圓弧邊框-->
		<Border Name="Bd_Base" Grid.Row="0" CornerRadius="5" 
				BorderBrush="{Binding BorderColor, ElementName=root}"  BorderThickness="1" 
				Background="{Binding BackgroundColor, ElementName=root}" >
			
			<Grid RowDefinitions="*" ColumnDefinitions="*">
				<TextBlock Name="TB_Base" TextWrapping="WrapWithOverflow" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"
				  Text="{Binding Text, ElementName=root}"
				  Background="{Binding BackgroundColor, ElementName=root}" 
				  Foreground="{Binding TextColor, ElementName=root}"/>
				<Canvas>
					<!-- Drawing area
					<Rectangle Fill="Blue" Width="10" Height="10" Stroke="Red" StrokeThickness="2"/>
					 -->			
				</Canvas>			
			</Grid>
		</Border>
	</Grid>
	
</UserControl>

BaseButton.cs

using Avalonia;
using Avalonia.Controls;
using Avalonia.Input;
using Avalonia.Interactivity;
using Avalonia.Media;
using System;
using static System.Net.Mime.MediaTypeNames;

namespace VPOS_Avalonia;

public partial class BaseButton : UserControl
{
    // 可以在此添加額外的屬性、事件或方法
    public static readonly StyledProperty<string> TextProperty =
        AvaloniaProperty.Register<BaseButton, string>(nameof(Text));
    public static readonly StyledProperty<IBrush> TextColorProperty =
        AvaloniaProperty.Register<BaseButton, IBrush>(nameof(TextColor));
    public static readonly StyledProperty<IBrush> BackgroundColorProperty =
        AvaloniaProperty.Register<BaseButton, IBrush>(nameof(BackgroundColor));
    public static readonly StyledProperty<IBrush> BorderColorProperty =
    AvaloniaProperty.Register<BaseButton, IBrush>(nameof(BorderColor));


    public string Text
    {
        get => GetValue(TextProperty);
        set => SetValue(TextProperty, value);
    }

    public IBrush BackgroundColor
    {
        get => GetValue(BackgroundColorProperty);
        set => SetValue(BackgroundColorProperty, value);
    }

    public IBrush TextColor
    {
        get => GetValue(TextColorProperty);
        set => SetValue(TextColorProperty, value);
    }

    public IBrush BorderColor
    {
        get => GetValue(BorderColorProperty);
        set => SetValue(BorderColorProperty, value);
    }

    // Declare the external click event
    public event EventHandler<RoutedEventArgs> ExternalClick;

    public BaseButton()
    {
        InitializeComponent();

        // Attach the event handler for TextBlock's PointerPressed event
        Bd_Base.PointerPressed += OnClick;
        TB_Base.PointerPressed += OnClick;
    }
    // Event handler method
    private void OnClick(object sender, PointerPressedEventArgs e)
    {
        // Raise the external click event
        ExternalClick?.Invoke(this, e);
    }
}

MessageBox.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"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
		xmlns:local="clr-namespace:VPOS_Avalonia"
        x:Class="VPOS_Avalonia.MessageBox"
        Title="MessageBox">
	<Grid RowDefinitions="*,3*" ColumnDefinitions="*" >
		<TextBlock Text="VTEAM MSG" Grid.Row="0" Foreground="Blue" FontSize="32" HorizontalAlignment="Center" VerticalAlignment="Center" />
		<Border Grid.Row="1" BorderBrush="White" BorderThickness="2">
			<Grid RowDefinitions="2*,*" ColumnDefinitions="2.5*,2*,2.5*" >
				<TextBlock x:Name="Msg" TextWrapping="Wrap" Grid.Row="0" Foreground="White" Grid.ColumnSpan="5" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center"/>
				<local:BaseButton x:Name="Close" Grid.Row="1" Grid.Column="1" 
					Text="確定" TextColor="White" BackgroundColor="#ff00a1e0" BorderColor="White"
					HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="30,5,30,5" />
			</Grid>
		</Border>		
	</Grid>
</Window>

MessageBox.cs

using Avalonia;
using Avalonia.Controls;
using Avalonia.Input;
using Avalonia.Interactivity;
using Avalonia.Markup.Xaml;
using Avalonia.Media;
using Avalonia.Platform;
using Avalonia.Styling;
using System;

namespace VPOS_Avalonia;

public partial class MessageBox : Window
{
    public MessageBox(String StrMsg)
    {
        //隱藏工具列
        this.ExtendClientAreaToDecorationsHint = true;
        this.ExtendClientAreaTitleBarHeightHint = -1;
        this.SystemDecorations = SystemDecorations.None;
        //---隱藏工具列

        WindowStartupLocation = WindowStartupLocation.CenterScreen;//視窗置中
        this.Background = new SolidColorBrush(Color.Parse("#ff194a6e"));//設定背景色
        this.BorderBrush = Brushes.Blue;//設定藍色邊框
        this.BorderThickness = new Thickness(2);//設定邊框寬度
        InitializeComponent();
        //---
        //視窗尺寸
        Width = 600;
        Height = 300;
        //---視窗尺寸

        Msg.Text = StrMsg;//指定訊息
        //Close.BorderColor = new SolidColorBrush(Color.Parse("#FF0000"));
        Close.ExternalClick += Close_Click;
    }

    private void Close_Click(object sender, RoutedEventArgs e)
    {
        /*
        //---
        //自訂元件內子元件屬性變更方法
        var userControl = (BaseButton)sender;
        var textBlock = userControl.FindControl<TextBlock>("TB_Base");
        textBlock.Text = "Clicked from outside!";
        //---自訂元件內子元件屬性變更方法
        */
        this.Close();
    }
}