MvvmCross + Telerik UI for Xamarin

4 posts, 1 answers
  1. Lance
    Lance avatar
    3 posts
    Member since:
    May 2016

    Posted 16 Nov 2016 Link to this post

    I've been pulling my hair out trying to successfully blend my Xamarin / MvvmCross app with Telerik UI for Xamarin. Can anyone tell me if this is possible? Are there any examples of how a successful blend of these would work?
  2. Lance
    Lance avatar
    3 posts
    Member since:
    May 2016

    Posted 16 Nov 2016 Link to this post

    The better question is.... do I even need MvvmCross in order to use a mvvm architecture with UI for Xamarin? Or similar to other Telerik products, is mvvm built-in to UI for Xamarin already?
  3. Answer
    Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    316 posts

    Posted 17 Nov 2016 Link to this post

    Hello Lance,

    The UI for Xamarin components are compatible with an MVVM architecture, for example binding a control property to a view model property:

    <RadCalendar SelectedDate="{Binding MyViewModelProperty, Mode=TwoWay}" />


    The specific MVVM Framework isn't actually important, you could even have a simple view model with INotifyPropertyChanged. Let me demonstrate using a simple, vanilla MVVM approach and a RadCalendar that updates a Label when the date has changed

    Here is the View
    <ContentPage...>
       
      <ContentPage.BindingContext>
        <viewModels:StartPageViewModel/>
      </ContentPage.BindingContext>
       
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
     
        <telerikInput:RadCalendar SelectedDate="{Binding SelectedDate, Mode=TwoWay}"/>
     
        <Label Text="{Binding SelectedDate}" HorizontalOptions="Center" VerticalOptions="Center" Grid.Row="1"/>
     
      </Grid>
    </ContentPage>



    Here's the ViewModel
    public class StartPageViewModel : INotifyPropertyChanged
    {
            public StartPageViewModel()
            {
            }
     
            private DateTime? selectedDate;
            public DateTime? SelectedDate
            {
                get { return selectedDate; }
                set { selectedDate = value; OnPropertyChanged();}
            }
             
            public event PropertyChangedEventHandler PropertyChanged;
            protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
    }


    Command Bindings

    Some controls have commands you can bind to directly. For example, take a look at the RadSideDrawer's bindable commands here. However, not every event has a Command equivalent, for example ListView's events. This is easily resolved with one of two approaches:

    1 - Use an EventToCommand paradigm
    We do not have a command for the RadListView for ItemTapped (, so you'll want to use the Xamarin Forms Behaviors library and the EventToCommandBehavior. Here's an example on how to wire up the ListView's ItemTapped event to fire a command.

    2 - Create your own single behavior to handle all the control's events
    You can find a demo download and explanation of how to do this from Rosy here

    Please let us know if you have any further questions.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  4. Lance
    Lance avatar
    3 posts
    Member since:
    May 2016

    Posted 17 Nov 2016 in reply to Lance | Tech Support Engineer, Sr. Link to this post

    Thanks for the thorough response! I'll digest and play with this and let you know if I have any more questions.
Back to Top