尝试在Xamarin.Forms中创建自定义可绑定模板视图

Question

我试图在Xamarin Forms中创建一个XAML模板，我可以从多个屏幕中引用它。模板具有标题，摘要，并且可以接收触摸输入。在附加的线框中，将有一个支持三个数据块的模型。我在https://developer.xamarin.com/guides/xamarin-forms/templates/control-templates/template-binding/阅读了文档，但此时我觉得我错过了一个重要的概念。我以为我只需要创建一个ContentView模板，并通过.BindingContext以某种方式使标签在运行时可以绑定到对象。我错过了什么？

内容页面

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Namespace.SettingsPage"
             Title ="Settings">
  <ContentPage.Resources>
    <ResourceDictionary>
        <ControlTemplate x:Key="SettingTemplate">
            <StackLayout>
                <Label
                    x:Name="Header"
                    Text="{TemplateBinding Parent.Header}" />
                <Label 
                    x:Name="Summary"
                    Text="{TemplateBinding Parent.Summary}"/>
                </StackLayout>                    
        </ControlTemplate>
    </ResourceDictionary>
  </ContentPage.Resources>
  <ContentPage.Content>      
    <StackLayout>      
        <StackLayout>
            <ContentView x:Name="alerts" ControlTemplate="{StaticResource SettingTemplate}"></ContentView>
            <ContentView x:Name="recipients" ControlTemplate="{StaticResource SettingTemplate}"></ContentView>
            <ContentView x:Name="log" ControlTemplate="{StaticResource SettingTemplate}"></ContentView>
        </StackLayout>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

代码背后

using Xamarin.Forms;

namespace Namespace.Settings
{
    public partial class SettingsPage : ContentPage
    {
        protected SettingsViewModel viewModel;

        public SettingsPage(AlertInfo info)
        { 
            InitializeComponent();
            BindingContext = viewModel = new SettingsViewModel(info, this);

            // Bind individual models here. AlertSummary VM has logic to pull out
            // header and summary fiels.
            this.alerts.BindingContext = new AlertSummaryViewModel(info, Summary.ALERTS, this);
            this.recipients.BindingContext = new AlertSummaryViewModel(info, Summary.RECIPIENTS, this);
        }       
    }
}

Answer 1

这是起点。

    public partial class ControlTemplateTest : ContentPage
    {
        public static readonly BindableProperty HeaderTextProperty =
            BindableProperty.Create("HeaderText", typeof(string), typeof(ControlTemplateTest), "Alerts");
        public static readonly BindableProperty SummaryTextProperty =
          BindableProperty.Create("SummaryText", typeof(string), typeof(ControlTemplateTest), "Three alerts set");

        public string HeaderText
        {
            get { return (string)GetValue(HeaderTextProperty); }
        }

        public string SummaryText
        {
            get { return (string)GetValue(SummaryTextProperty); }
        }

        public ControlTemplateTest()
        {
            InitializeComponent();
        }
    }
}

的Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonRendererDemo.ControlTemplateTest">
  <ContentPage.Resources>
    <ResourceDictionary>
      <ControlTemplate x:Key="SettingTemplate">
        <StackLayout BackgroundColor="#DCF394" >
          <Label FontSize="48" TextColor="Black" Text="{TemplateBinding Parent.Parent.HeaderText}" />
          <Label Text="{TemplateBinding Parent.Parent.SummaryText}"/>
        </StackLayout>
      </ControlTemplate>
    </ResourceDictionary>
  </ContentPage.Resources>

  <ContentPage.Content>
    <StackLayout BackgroundColor="White" VerticalOptions="FillAndExpand" Spacing="0,40" Padding="0,40">
      <ContentView  x:Name="alerts" VerticalOptions="FillAndExpand" ControlTemplate="{StaticResource SettingTemplate}"></ContentView>
      <ContentView x:Name="recipients" VerticalOptions="FillAndExpand" ControlTemplate="{StaticResource SettingTemplate}"></ContentView>
      <ContentView x:Name="log" VerticalOptions="FillAndExpand" ControlTemplate="{StaticResource SettingTemplate}"></ContentView>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>