如何在Xamarin.Forms中为ControlTemplates执行DataBinding

时间:2016-08-04 09:10:32

标签: c# xaml xamarin.forms

免责声明:我是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个红色块。但是没有任何绑定似乎有效。一切都是空的: enter image description here

如何让数据绑定工作?

2 个答案:

答案 0 :(得分:0)

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

public class SomeViewModel : BindableObject

然后您可以通知UI,某些属性已被更改:

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

也会有所帮助Binding from ControlTemplate.

答案 1 :(得分:0)

当您使用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>