Avalonia的模板控件（Templated Controls）

雨后听风景

在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

1. [/code]然后，在C#代码中实现类，需要定义Button的Content属性，点击事件，和ContentPresenter的子内容
2. TemplatedControl1.axaml.cs
3. [code]using Avalonia;
4. using Avalonia.Controls;
5. using Avalonia.Controls.Presenters;
6. using Avalonia.Controls.Primitives;
7. using Avalonia.Controls.Templates;
8. using Avalonia.Interactivity;
9. using Avalonia.Markup.Xaml.Templates;
10. using Avalonia.Metadata;
11. using System;
12. using System.Linq;
14. namespace AvaloniaApplication1
15. {
16.     public class TemplatedControl1 : TemplatedControl
17.     {
18.         public static readonly StyledProperty<string> ContentProperty =
19.             AvaloniaProperty.Register<TemplatedControl1, string>(nameof(Content));
21.         public string Content
22.         {
23.             get { return GetValue(ContentProperty); }
24.             set { SetValue(ContentProperty, value); }
25.         }
27.         public static readonly RoutedEvent<RoutedEventArgs> ClickEvent =
28.             RoutedEvent.Register<TemplatedControl1, RoutedEventArgs>(nameof(Click), RoutingStrategies.Bubble);
31.         public event EventHandler<RoutedEventArgs> Click
32.         {
33.             add => AddHandler(ClickEvent, value);
34.             remove => RemoveHandler(ClickEvent, value);
35.         }
37.         private void OnClick(object sender, RoutedEventArgs e)
38.         {
39.             RaiseEvent(new RoutedEventArgs(ClickEvent));
40.         }
42.         public static readonly StyledProperty<DataTemplate> ContentTemplateProperty =
43.              AvaloniaProperty.Register<TemplatedControl1, DataTemplate>(nameof(ContentTemplate));
45.         [Content]
46.         public IDataTemplate ContentTemplate
47.         {
48.             get => GetValue(ContentTemplateProperty);
49.             set => SetValue(ContentTemplateProperty, value);
50.         }
52.         public override void EndInit()
53.         {
54.             base.EndInit();
55.             ApplyTemplate();
57.             var childs = this.GetTemplateChildren().ToList();
58.             var button = childs.FirstOrDefault(e => e.Name == "PART_Button");
59.             if (button != null)
60.             {
61.                 ((Button)button).Click += OnClick;
62.             }
64.             // Apply the content template to the ContentPresenter
65.             //var contentPresenter = childs.FirstOrDefault(e => e.Name == "contentPresenter");
66.             //((ContentPresenter)contentPresenter).ContentTemplate = ContentTemplate;
67.         }
68.     }
69. }

复制代码

并在App.axaml中使用StyleInclude声明此控件
App.axaml

1. <Application xmlns="https://github.com/avaloniaui"
2.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3.              x:Class="AvaloniaApplication1.App"
4.              xmlns:local="using:AvaloniaApplication1"
5.              RequestedThemeVariant="Default">
6.             
8.     <Application.DataTemplates>
9.         <local:ViewLocator/>
10.     </Application.DataTemplates>
11.   
12.     <Application.Styles>
13.         <FluentTheme />
14.         <StyleInclude Source="CControls/TemplatedControl1.axaml"/>
15.     </Application.Styles>
16. </Application>

复制代码

最后在MainWindow.axaml中使用此控件，并为此控件传递Content，Click属性，和DataTemplate的子内容
MainWindow.axaml

1. <Window xmlns="https://github.com/avaloniaui"
2.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3.         xmlns:vm="using:AvaloniaApplication1.ViewModels"
4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6.         xmlns:local="clr-namespace:AvaloniaApplication1"
7.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
8.         x:Class="AvaloniaApplication1.Views.MainWindow"
9.         x:DataType="vm:MainWindowViewModel"
10.         Icon="/Assets/avalonia-logo.ico"
11.         Title="AvaloniaApplication1">
13.     <Design.DataContext>
14.         <vm:MainWindowViewModel/>
15.     </Design.DataContext>
17.     <local:TemplatedControl1 Content="test control" Click="HandleButtonClick">
18.         <DataTemplate>
19.             <Button Content="Click Me"/>
20.         </DataTemplate>
21.     </local:TemplatedControl1>
22. </Window>

复制代码

MainWindow.axaml.cs中定义HandleButtonClick
MainWindow.axaml.cs

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

复制代码

运行即可查看到效果

 

来源:https://www.cnblogs.com/chenyishi/p/18121005
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！