locked
Custom control and MVVM RRS feed

  • Question

  • User390293 posted

    Hello everyone !

    I'm beginner with xamarin and MVVM, and programming in general. I'm trying to make a mobile app using the MVVM pattern.

    I want to create custom control but I have anissue with binding Let me show you, it will more easier to explain

    Here, my custon control class

    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class TapeableImage : ContentView
    {
        public static readonly BindableProperty LabelTextProperty = BindableProperty.Create(nameof(LabelText), typeof(string), typeof(TapeableImage));
        public static readonly BindableProperty ImageSourceProperty = BindableProperty.Create(nameof(ImageSource), typeof(string), typeof(TapeableImage));
        public string LabelText
        {
            get { return (string)GetValue(LabelTextProperty); }
            set { SetValue(LabelTextProperty, value); }
        }
    
        public string ImageSource
        {
            get { return (string)GetValue(ImageSourceProperty); }
            set { SetValue(ImageSourceProperty, value); }
        }
    
        public TapeableImage()
        {
            InitializeComponent();
    
            BindingContext = this;
        }
    
    }
    

    The view corresponding to my control:

        <Frame Grid.Row="0" Grid.Column="0">
            <StackLayout>
                <Image Source="{Binding ImageSource}"></Image>
                <Label Text="{Binding LabelText}"></Label>
            </StackLayout>
        </Frame>
    

    Ok now I use my control into this page

    <StackLayout>
        <local:TapeableImage LabelText="{Binding LabelTextTest}" ImageSource="barbell.png" HeightRequest="200"></local:TapeableImage>
    </StackLayout>
    

    and there is the code behind

    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class DashBoardPage : ContentPage
    {
        public DashBoardPage(DashBoardViewModel dashBoardViewModel)
        {
            InitializeComponent();
    
            BindingContext = dashBoardViewModel;
        }
    }
    

    And here the viewmodel passed to the view

    public class DashBoardViewModel : BaseViewModel
    {
        private ExercisesViewModel _exercisesViewModel { get; set; }
    
        public string LabelTextTest { get; set; } = "Test12345";
    
        public DashBoardViewModel()
        {
            _exercisesViewModel = new ExercisesViewModel();
            ExerciseListPage = new ExerciseListPage(_exercisesViewModel);
        }
    }
    

    So now, my problem is that: in my custom component, if I set the bindable property with hard code like ImageSource property, it work, the bindable property of my control is correctly feed, but when I pass data from my bindingcontext which correspond to my view model, it does'nt work.

    If i put breakpoint on the constructor of my DashBoardPage, the arguments is correctly feed. So why the binding doesn't work in this case ? What I've missing ?

    Thanks !

    Monday, November 25, 2019 9:48 PM

All replies

  • User2148 posted

    https://xamarinhelp.com/xamarin-forms-user-control/

    Tuesday, November 26, 2019 7:35 AM