如何在DataBinding中实现ControlTemplates的Xamarin.Forms

Question

免责声明:我是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;
        }
    }
}

所以我的模板似乎起作用了。我看到两个红色街区。但这些绑定似乎都没有起作用。一切都是空的：

​

如何使数据绑定工作？

Answer 1

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

public class SomeViewModel : BindableObject

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

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

对.也有帮助。

Answer 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>