ToB企服应用市场:ToB评测及商务社交产业平台

标题: Avalonia的模板控件（Templated Controls） [打印本页]
作者: 没腿的鸟    时间: 2024-5-16 16:54
标题: Avalonia的模板控件（Templated Controls）
在Avalonia的UI框架中，TemplatedControl是一个核心组件，它提供了一种强大的方式来创建可重用且高度可定制的控件。
本文将深入探讨TemplatedControl的概念、其带来的上风以及它在实际开发中的应用场景，并通过一个示例代码来展示其用法。
什么是TemplatedControl

TemplatedControl是Avalonia中一个特殊的控件范例，它允许开发者定义控件的模板布局。
这个模板可以包罗其他控件、布局、数据绑定等，从而定义控件的外观和举动。
通过将控件的逻辑和外观分离，TemplatedControl提供了一种更加机动和可维护的方式来创建控件。
在TemplatedControl中，开发者可以定义一些模板绑定点，这些绑定点允许在实例化控件时，将特定的子控件或数据绑定到模板中的对应位置。这
种机制使得控件具有极大的机动性，可以适应各种不同的使用场景。
TemplatedControl的上风

TemplatedControl的应用场景

TemplatedControl在Avalonia UI开发中有着广泛的应用场景。以下是一些常见的应用场景：
示例代码

下面是一个简单的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. }
复制代码
运行即可检察到效果

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4