如何在Xamarin.Forms中使用MVVM创建UserControl

时间:2017-05-04 12:41:47

标签: xamarin mvvm xamarin.forms

我尝试在Xamarin.Forms中开发用户控件,但我无法使用ViewModel绑定该Usercontrol的控件。

我的CustomeEntryUserControl看起来像

    App app = (App) getApplicationContext();
    Log.d("", "İnternet durum: " + app.internetAktif());

此用户控件后面的代码看起来像

    <?xml version="1.0" encoding="UTF-8"?>
<Grid xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LearningApp.UserControls.CustomeEntry"
             xmlns:local="clr-namespace:LearningApp.Extension">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="20" />
    </Grid.ColumnDefinitions>
    <Entry Grid.Column="0"  x:Name="entry" />
    <local:RoundedButton Grid.Column="1" Text="X" BackgroundColor="Gray" TextColor="White" HeightRequest="20" WidthRequest="10" VerticalOptions="Center" Margin="-30,0,30,0" x:Name="cancelbtn" />

</Grid>

我试图在我的一个内容页面中使用此控件就像

 public partial class CustomeEntry : Grid
{
    public CustomeEntry()
    {
        InitializeComponent();

    }

    public static readonly BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(CustomeEntry), default(string));

    public static readonly BindableProperty CommandProperty = BindableProperty.Create(nameof(Command), typeof(CustomeEntry), typeof(ICommand), default(ICommand));

    public ICommand Command
    {
        get { return (ICommand)GetValue(CommandProperty); }
        set { SetValue(CommandProperty, value); }
    }
    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public string PlaceHolder
    {
        get { return entry.Placeholder; }
        set { entry.Placeholder = value; }
    }
}
上面提到的内容页面背后的代码是

    <?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="LearningApp.Views.TriggersDemo.DataTriggers"
             xmlns:local="clr-namespace:LearningApp.UserControls">
    <StackLayout Orientation="Vertical">
        <Label FontSize="Large" FontAttributes="Bold" Text="{Binding lblText}"></Label>
        <local:CustomeEntry   Text="{Binding Name}" Command="{Binding CancelCommand}" PlaceHolder="Enter Name"/>
        <Button Command="{Binding CheckCommand}" Text="Check" />

    </StackLayout>
</ContentPage>

和我的ViewModel包含一个属性,如

 namespace LearningApp.Views.TriggersDemo
{
    public partial class DataTriggers : ContentPage
    {
        public DataTriggers()
        {
            InitializeComponent();
            this.BindingContext = new TriggersViewModel();

        }

    }
}

有人可以指导我如何将UserControl的条目 private string _Name; public string Name { get { return _Name; } set { _Name = value; RaisePropertyChanged(); } } 直接绑定到我的ViewModel属性Text吗?

1 个答案:

答案 0 :(得分:1)

在您CustomerEntry中,没有控件显示您要绑定的文字。

您还必须在自定义控件中设置所有绑定。

您还可以将处理程序传递给TextProperty的{​​{3}}参数,并代表设置其他视图的属性。

从自定义控件中删除属性并直接绑定到将传递的BindingContext(包含您的viewmodel)。
然后在自定义控件的条目中设置Text="{Binding Text=.}"(与Button的{​​{1}}相同),使其与Command中的文本绑定,实际上您可以删除所有自定义控件中的属性,并直接绑定到ViewModel。