Avalonia的模板控制項（Templated Controls）

在Avalonia的UI框架中，TemplatedControl是一個核心組件，它提供了一種強大的方式來創建可重用且高度可定製的控制項。本文將深入探討TemplatedControl的概念、其帶來的優勢以及它在實際開發中的應用場景，並通過一個示例代碼來展示其用法。什麼是TemplatedContr ...

在Avalonia的UI框架中，TemplatedControl是一個核心組件，它提供了一種強大的方式來創建可重用且高度可定製的控制項。

本文將深入探討TemplatedControl的概念、其帶來的優勢以及它在實際開發中的應用場景，並通過一個示例代碼來展示其用法。

什麼是TemplatedControl

TemplatedControl是Avalonia中一個特殊的控制項類型，它允許開發者定義控制項的模板結構。

這個模板可以包含其他控制項、佈局、數據綁定等，從而定義控制項的外觀和行為。

通過將控制項的邏輯和外觀分離，TemplatedControl提供了一種更加靈活和可維護的方式來創建控制項。

在TemplatedControl中，開發者可以定義一些模板綁定點，這些綁定點允許在實例化控制項時，將特定的子控制項或數據綁定到模板中的對應位置。這

種機制使得控制項具有極大的靈活性，可以適應各種不同的使用場景。

TemplatedControl的優勢

高度可定製：TemplatedControl允許開發者通過修改模板來定製控制項的外觀和行為，從而滿足不同的設計需求。
邏輯與外觀分離：通過將控制項的邏輯和外觀分離，TemplatedControl使得代碼更加清晰、易於維護。開發者可以專註於實現控制項的功能邏輯，而不需要關心其外觀的呈現。
提高復用性：通過定義通用的TemplatedControl，併在不同的地方使用不同的模板來實例化它，可以大大提高代碼的復用性，減少重覆勞動。
易於擴展：TemplatedControl的設計使得它很容易進行擴展。開發者可以繼承現有的TemplatedControl並添加自定義的邏輯和模板，從而創建出具有特定功能的控制項。

TemplatedControl的應用場景

TemplatedControl在Avalonia UI開發中有著廣泛的應用場景。以下是一些常見的應用場景：

自定義控制項：開發者可以使用TemplatedControl來創建具有獨特外觀和行為的自定義控制項，如自定義按鈕、自定義列表框等。
數據展示控制項：對於需要展示數據的場景，如列表、表格、樹形控制項等，TemplatedControl可以提供一個靈活的模板來定義數據的展示方式。
主題和樣式：通過修改TemplatedControl的模板，可以輕鬆實現應用程式的主題切換和樣式定製。

示例代碼

下麵是一個簡單的TemplatedControl示例，展示如何創建一個自定義的控制項：

首先，我們定義模板讓其包含一個Button和ContentPresenter。

其中Button使用TemplateBinding綁定Content屬性。ContentPresenter展示調用時的子控制項。

TemplatedControl1.axaml

<Styles 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:controls="using:AvaloniaApplication1">
    <Design.PreviewWith>
        <controls:TemplatedControl1 />
    </Design.PreviewWith>

    <Style Selector="controls|TemplatedControl1">
        <!-- Set Defaults -->
        <Setter Property="Template">
            <ControlTemplate>
                <StackPanel>
                    <Button Name="PART_Button" Content="{TemplateBinding Content}" />
                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Name="contentPresenter" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </StackPanel>
            </ControlTemplate>
        </Setter>
    </Style>
</Styles>

然後，在C#代碼中實現類，需要定義Button的Content屬性，點擊事件，和ContentPresenter的子內容

TemplatedControl1.axaml.cs

using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Presenters;
using Avalonia.Controls.Primitives;
using Avalonia.Controls.Templates;
using Avalonia.Interactivity;
using Avalonia.Markup.Xaml.Templates;
using Avalonia.Metadata;
using System;
using System.Linq;

namespace AvaloniaApplication1
{
    public class TemplatedControl1 : TemplatedControl
    {
        public static readonly StyledProperty<string> ContentProperty =
            AvaloniaProperty.Register<TemplatedControl1, string>(nameof(Content));

        public string Content
        {
            get { return GetValue(ContentProperty); }
            set { SetValue(ContentProperty, value); }
        }

        public static readonly RoutedEvent<RoutedEventArgs> ClickEvent =
            RoutedEvent.Register<TemplatedControl1, RoutedEventArgs>(nameof(Click), RoutingStrategies.Bubble);


        public event EventHandler<RoutedEventArgs> Click
        {
            add => AddHandler(ClickEvent, value);
            remove => RemoveHandler(ClickEvent, value);
        }

        private void OnClick(object sender, RoutedEventArgs e)
        {
            RaiseEvent(new RoutedEventArgs(ClickEvent));
        }

        public static readonly StyledProperty<DataTemplate> ContentTemplateProperty =
             AvaloniaProperty.Register<TemplatedControl1, DataTemplate>(nameof(ContentTemplate));

        [Content]
        public IDataTemplate ContentTemplate
        {
            get => GetValue(ContentTemplateProperty);
            set => SetValue(ContentTemplateProperty, value);
        }

        public override void EndInit()
        {
            base.EndInit();
            ApplyTemplate();

            var childs = this.GetTemplateChildren().ToList();
            var button = childs.FirstOrDefault(e => e.Name == "PART_Button");
            if (button != null)
            {
                ((Button)button).Click += OnClick;
            }

            // Apply the content template to the ContentPresenter
            //var contentPresenter = childs.FirstOrDefault(e => e.Name == "contentPresenter");
            //((ContentPresenter)contentPresenter).ContentTemplate = ContentTemplate;
        }
    }
}

併在App.axaml中使用StyleInclude聲明此控制項

App.axaml

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="AvaloniaApplication1.App"
             xmlns:local="using:AvaloniaApplication1"
             RequestedThemeVariant="Default">
             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->

    <Application.DataTemplates>
        <local:ViewLocator/>
    </Application.DataTemplates>
  
    <Application.Styles>
        <FluentTheme />
        <StyleInclude Source="CControls/TemplatedControl1.axaml"/>
    </Application.Styles>
</Application>

最後在MainWindow.axaml中使用此控制項，併為此控制項傳遞Content，Click屬性，和DataTemplate的子內容

MainWindow.axaml

<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>
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <local:TemplatedControl1 Content="test control" Click="HandleButtonClick">
        <DataTemplate>
            <Button Content="Click Me"/>
        </DataTemplate>
    </local:TemplatedControl1>
</Window>

MainWindow.axaml.cs中定義HandleButtonClick

MainWindow.axaml.cs

public void HandleButtonClick(object sender, RoutedEventArgs e)
{
    Debug.WriteLine("click");
}

運行即可查看到效果