MAUI怎么创建和使用模板化控件 MAUI TemplatedView教程

8次阅读

MAui 中 TemplatedView 是分离逻辑与样式的可复用模板控件,通过继承、定义绑定属性、重写 OnapplyTemplate 并配合 ControlTemplate 实现定制化 UI,支持主题切换与动态模板替换。

MAUI怎么创建和使用模板化控件 MAUI TemplatedView教程

MAUI 中的 TemplatedView 是创建可复用、样式可定制的模板化控件的核心方式,它不自带 UI,而是通过 ControlTemplate 定义外观,再由子类(如自定义控件)绑定数据并渲染。关键在于“分离逻辑与样式”,适合封装带交互的组件(如卡片、开关、状态指示器等)。

一、创建 TemplatedView 子类

新建一个类继承 TemplatedView,声明可绑定的属性(如标题、图标、是否启用),并在构造函数中设置默认模板:

  • 在类中定义 BindableProperty(例如 TitlePropertyIsEnabledProperty
  • 重写 OnApplyTemplate() 方法,在其中获取模板内命名元素(如 GetTemplateChild("TitleLabel"))并绑定逻辑或事件
  • 模板本身暂不写死,留待 XAML 或样式中指定

二、定义 ControlTemplate 模板

模板通常写在资源字典(Resources)里,用 ControlTemplate 包裹布局,并通过 TemplateBinding 绑定到 TemplatedView 的属性:

  • 模板根元素必须是单个容器(如 GridStackLayout
  • 使用 {TemplateBinding Title} 将子控件(如 Label)的 Text 属性关联到 TemplatedView 的 Title 属性
  • 可配合 VisualStateManager 响应状态变化(如 DisabledPressed

三、在页面中使用自定义 TemplatedView

先在 XAML 中声明命名空间,再像普通控件一样使用:

  • 添加 xmlns:local="clr-Namespace:YourApp.Controls"
  • 插入自定义控件,设置绑定属性:
  • 如需覆盖默认模板,可在控件内嵌套 ControlTemplate,或通过 Style 统一设置

四、进阶技巧:支持主题切换与动态模板

TemplatedView 天然适配 MAUI 的主题机制:

  • App.xamlResourceDictionary.MergedDictionaries 中分别定义 LightDark 模板资源
  • OnIdiomOnPlatform 实现平台/设备差异模板
  • 运行时通过 this.ControlTemplate = newTemplate; 切换模板(注意触发 OnApplyTemplate

基本上就这些。TemplatedView 不复杂但容易忽略 OnApplyTemplate 的调用时机和 TemplateBinding作用域限制——它只认 TemplatedView 及其父类的属性,不能跨级绑定。

text=ZqhQzanResources