CODEWITHSUNDEEP
xamarinmvvmxamarin.forms
Dhaval Patel
Dhaval Patel

Reputation: 7591

How to Create a UserControl using MVVM in Xamarin.Forms

I have tried to develop a usercontrol in Xamarin.Forms but I am not able to bind the controls of that Usercontrol using ViewModel.

My CustomeEntryUserControl is look like 

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

Code behind of this usercontrol is look like 

 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; }
    }
}

I have tried to use this control in one of my content page is like 

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

code behind of above mentioned content page is 

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

        }

    }
}

and My ViewModel contain the one Property like 

 private string _Name;

        public string Name
        {
            get { return _Name; }
            set { _Name = value; RaisePropertyChanged(); }
        }

Can anyone please guide how I can bind the Entry Text of UserControl to my ViewModel property Name direct?

Upvotes: 0

Views: 1552

Answers (1)

Shimmy Weitzhandler
Shimmy Weitzhandler

Reputation: 104692

In you CustomerEntry there is no control that displays the Text you're binding to.

You have to set up all the bindings in your custom control too.

You can also pass a handler to the TextProperty's `propertyChanged' parameter, and set other view's properties on behalf.

Remove the properties from the custom control and bind directly to the BindingContext which will be passed along (containing you viewmodel).
Then set Text="{Binding Text=.}" in your custom control's entry (same with Button's Command) to have it bind to the text from the BindingContext, in fact you can remove all your properties from the custom control, and bind directly to the ViewModel.

Upvotes: 1

Related Questions