如何在 Xamarin.Forms 中为 ControlTemplates 进行数据绑定答案

【问题标题】：How to do DataBinding for ControlTemplates in Xamarin.Forms如何在 Xamarin.Forms 中为 ControlTemplates 进行数据绑定
【发布时间】：2016-08-04 09:10:31
【问题描述】：

免责声明：我是 Xamarin.Forms 和 Xaml 的新手

我试图弄清楚 DataBinding 如何在 Xamarin.Forms 的模板中工作。

Xaml：

<ContentPage.Resources>
    <ResourceDictionary>
        <ControlTemplate x:Key="GridItem">
            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="0" ColumnSpacing="0" RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>

                <ContentView Grid.Row="0" Grid.Column="0" BackgroundColor="Red" VerticalOptions="FillAndExpand" Padding="15">
                    <Image Source="{TemplateBinding ImageSource}" BackgroundColor="Red" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
                </ContentView>
              <Label Grid.Row="1" Grid.Column="0" Text="{TemplateBinding LabelText}" FontSize="Large" TextColor="White" BackgroundColor="#8B0000" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
            </Grid>
        </ControlTemplate>
    </ResourceDictionary>
</ContentPage.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>

    <ContentView x:Name="randomButton1" ControlTemplate="{StaticResource GridItem}"  Grid.Row="0" Grid.Column="0" />
    <ContentView x:Name="randomButton2" ControlTemplate="{StaticResource GridItem}"  Grid.Row="0" Grid.Column="1" />
</Grid>

背后的 C# 代码 使用 Xamarin.Forms；

namespace TestApp.XForms
{
    public partial class Page1 : ContentPage
    {
        private readonly MainButtonViewModel[] buttons;

        public Page1()
        {
            InitializeComponent();

            randomButton1.BindingContext = new MainButtonViewModel("some text1", "someimage1.png");
            randomButton2.BindingContext = new MainButtonViewModel("some text2", "someimage2.png");
        }
    }

    public class MainButtonViewModel : BindableObject
    {
        private string labelText;
        public string LabelText
        {
            get { return labelText; }
            set
            {
                labelText = value;
                OnPropertyChanged();
            }
        }

        private string imageSource;
        public string ImageSource
        {
            get { return imageSource; }
            set
            {
                imageSource = value;
                OnPropertyChanged();
            }
        }

        public MainButtonViewModel()
        {
        }
        public MainButtonViewModel(string text, string imageLocation)
        {
            LabelText = text;
            ImageSource = imageLocation;
        }
    }
}

所以我的模板似乎可以工作。我看到 2 个红色块。但似乎没有一个绑定有效。一切都是空的：

我怎样才能让数据绑定工作？

【问题讨论】：

标签： c# xaml xamarin.forms

【解决方案1】：

您的视图模型不支持INotifyPropertyChanged。你可以使用Xamarin.Forms 类：

public class SomeViewModel : BindableObject

然后您可以通知 UI，某些属性已更改：

        private string _someStringProperty;
        public string SomeStringProperty
        {
            get { return _someStringProperty; }
            set
            {
                _someStringProperty = value;
                OnPropertyChanged();
            }
        }

也会有帮助Binding from ControlTemplate.

【讨论】：

我猜这是用于双向绑定。我只需要单向绑定。无论如何我只是尝试过，但它似乎并没有解决我的问题。
TwoWay 绑定是当 UI 告诉视图模型，有些东西已经改变了。我认为，当您从属性返回一些值时，它可以在不实现接口的情况下工作：public string LabelText { get { retutn "Alloha" } }
我用 BindableObject 更新了我的帖子。它没有解决我的问题。我还尝试在 LabelText 的 getter 中硬编码一个字符串。这对我也不起作用。标签仍然是空的。我也尝试过 Binding 而不是 TemplateBinding，因为我不知道哪个是正确的。那也没用
由于article ContentPage 有BindableProperty，你应该从你的Template 绑定到它们。 Sample.

【解决方案2】：

当您使用ControlTemplate 时，TemplateBinding 需要BindingContext，否则它本身不会有任何BindingContext。你可以使用DataTemplate而不设置BindingContext，它继承了父级的BindingContext本身。

即：

<ControlTemplate x:Key="yourTemplate" BindingContext="{TemplateBinding BindingContext}">
  <Grid>
    <!--Your Template-->
  </Grid>
</ControlTemplate>

<DataTemplate x:Key="yourTemplate">
  <Grid>
    <!--Your Template-->
  </Grid>
</DataTemplate>

【讨论】：