Avalonia的自定義使用者元件

chester·chen發表於2024-04-07
元件

Avalonia中的自定義使用者控制元件

Avalonia是一個跨平臺的.NET UI框架，它允許開發者使用C#和XAML來構建豐富的桌面應用程式。

自定義使用者控制元件（UserControl）是Avalonia中一種重要的元件，它允許我們將多個控制元件組合成一個可重用的單元。

本文將介紹如何在Avalonia中定義和使用自定義使用者控制元件，並展示如何定義自定義事件與屬性。

定義自定義使用者控制元件

首先，我們需要定義一個自定義使用者控制元件。

假設我們要建立一個簡單的使用者控制元件，它包含一個按鈕和一個文字框，當點選按鈕時，文字框的內容會發生變化。

MyUserControl.xaml

<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:Class="AvaloniaApplication1.MyUserControl">
    <StackPanel>
        <TextBox x:Name="myTextBox" Text="Click the button below"/>
        <Button Content="Click Me" Click="OnButtonClick"/>
    </StackPanel>
</UserControl>

在XAML中，我們定義了一個StackPanel作為佈局容器，其中包含了一個TextBox和一個Button。

Button的Click事件繫結到了OnButtonClick方法上，這個方法將在後面的C#程式碼中定義。

MyUserControl.xaml.cs

using Avalonia;
using Avalonia.Controls;
using Avalonia.Interactivity;

namespace AvaloniaApplication1;

public partial class MyUserControl : UserControl
{
    private TextBox _myTextBox;
    public MyUserControl()
    {
        InitializeComponent();

        _myTextBox = this.FindControl<TextBox>("myTextBox");
    }
    // 自定義屬性  
    public static readonly StyledProperty<string> CustomProperty =
        AvaloniaProperty.Register<MyUserControl, string>("CustomProperty");

    public string CustomValue
    {
        get => GetValue(CustomProperty);
        set => SetValue(CustomProperty, value);
    }

    // 自定義事件  
    public static readonly RoutedEvent<RoutedEventArgs> CustomEvent =
        RoutedEvent.Register<MyUserControl, RoutedEventArgs>("CustomEvent", RoutingStrategies.Bubble);

    public void RaiseCustomEvent()
    {
        RaiseEvent(new RoutedEventArgs(CustomEvent));
    }

    // 按鈕點選事件處理  
    private void OnButtonClick(object sender, RoutedEventArgs e)
    {
        _myTextBox.Text = ("CustomValue is " + CustomValue + "Button clicked!");
        RaiseCustomEvent(); // 觸發自定義事件  
    }

}

在C#程式碼中，我們找到名為myTextBox的TextBox控制元件，以便在後面的程式碼中操作它。

接下來，我們定義了一個自定義屬性CustomProperty和一個自定義事件CustomEvent。

最後，我們實現了OnButtonClick方法，用於處理按鈕的點選事件。在這個方法中，我們改變了文字框的內容，並觸發了自定義事件。

使用自定義使用者控制元件

現在，我們可以在其他地方使用這個自定義使用者控制元件了。

MainWindow.xaml

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

    <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>
    <local:MyUserControl Name="myUserControl" CustomValue="test test"></local:MyUserControl>
</Window>

在MainWindow.xaml中，我們直接使用了自定義使用者控制元件MyUserControl，併為其CustomProperty屬性設定了一個初始值。

處理自定義事件

要在父控制元件或其他元件中處理自定義事件，我們需要在相應的C#程式碼中新增事件處理程式。

MainWindow.xaml.cs

using Avalonia.Controls;
using Avalonia.Interactivity;
using System.Diagnostics;

namespace AvaloniaApplication1.Views
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var myUserControl = this.FindControl<MyUserControl>("myUserControl");
            myUserControl.AddHandler(MyUserControl.CustomEvent, MyUserControl_CustomEvent, RoutingStrategies.Bubble);
        }
        private void MyUserControl_CustomEvent(object sender, RoutedEventArgs e)
        {
           // 處理自定義事件  
           Debug.WriteLine("c event triggered");
        }
    }
}

InitializeComponent 方法中，我們透過 FindControl 方法找到 MyUserControl 的例項，並使用 AddHandler 方法訂閱自定義事件。

當 MyUserControl 觸發 CustomEvent 事件時，MyUserControl_CustomEvent 方法會被呼叫。

總結

本文展示瞭如何在Avalonia中定義和使用自定義使用者控制元件，並定義了自定義事件與屬性。

自定義使用者控制元件是構建複雜UI的關鍵元件，而自定義事件和屬性則增強了控制元件的靈活性和可重用性。透過結合XAML和C#程式碼，我們可以建立出功能強大且易於維護的使用者介面。

相關文章