This is a migrated thread and some comments may be shown as answers.

MvvmCross + Telerik UI for Xamarin

3 Answers 186 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Lance
Top achievements
Rank 1
Lance asked on 16 Nov 2016, 07:35 PM
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?

3 Answers, 1 is accepted

Sort by
0
Lance
Top achievements
Rank 1
answered on 16 Nov 2016, 09:45 PM
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?
0
Accepted
Lance | Manager Technical Support
Telerik team
answered on 17 Nov 2016, 10:14 PM
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
0
Lance
Top achievements
Rank 1
answered on 17 Nov 2016, 10:26 PM
Thanks for the thorough response! I'll digest and play with this and let you know if I have any more questions.
Tags
General Discussions
Asked by
Lance
Top achievements
Rank 1
Answers by
Lance
Top achievements
Rank 1
Lance | Manager Technical Support
Telerik team
Share this question
or