I'm in the process of trying to implement "Commanding" in my Xamarin Forms app, in order to follow MVVM architecture pattern.
For Buttons, it works just fine because you can just define Command in the XAML.
But for a Picker
, for example, you have to do the following
(NOTE: xct:EventToCommandBehavior
used the new Xamarin Community Toolkit):
<Picker x:Name="myBackgroundColorChoicePicker" SelectedItem="{Binding BGColorChoice, Mode=TwoWay}"
x:FieldModifier="public"
TextColor="{DynamicResource TextForegroundColor}"
WidthRequest="300" HorizontalOptions="CenterAndExpand">
<Picker.Items>
<x:String>User Selected</x:String>
<x:String>Totally White</x:String>
<x:String>Totally Black</x:String>
</Picker.Items>
<Picker.Behaviors>
<xct:EventToCommandBehavior
EventName="SelectedIndexChanged"
Command="{Binding ProcessBGColorChoiceCommand}"/>
</Picker.Behaviors>
</Picker>
So, I expect that when the user changes the selected item in the Picker
, that the Command ProcessBGColorChoiceCommand
will be called from the ViewModel.
But, the Command in the ViewModel is NOT getting called. I set a breakpoint at the beginning of the Command code, and the breakpoint is NEVER reached.
Is there something that I'm missing? I can't get this to work.
The Binding Context is set at the top of the XAML like so:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewModels="clr-namespace:MedLemnMobile.ViewModels"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
x:Class="MedLemnMobile.Views.ColorPage"
Title="Color"
x:FieldModifier="public"
x:Name="myColorPage"
AutomationId="myColorPage"
BackgroundColor="{DynamicResource PageBackgroundColor}"
x:DataType="viewModels:ColorViewModel">
<ContentPage.BindingContext>
<viewModels:ColorViewModel/>
</ContentPage.BindingContext>
And, the Command is defined in the ViewModel like so:
using MedLemnMobile.Classes;
using MedLemnMobile.Models;
using MedLemnMobile.Views;
using System;
using System.Globalization;
using System.Windows.Input;
using Xamarin.Forms;
using Xamarin.CommunityToolkit;
namespace MedLemnMobile.ViewModels
{
public class ColorViewModel : ViewModelBase
{
public ICommand GotoMenuCommand { get; }
public ICommand ProcessBGColorChoiceCommand { get; }
public ICommand ProcessFGColorChoiceCommand { get; }
public ICommand ProcessBGRedSliderCommand { get; }
public ICommand ProcessBGGreenSliderCommand { get; }
public ICommand ProcessBGBlueSliderCommand { get; }
public ICommand ProcessFGRedSliderCommand { get; }
public ICommand ProcessFGGreenSliderCommand { get; }
public ICommand ProcessFGBlueSliderCommand { get; }
public ColorViewModel()
{
IsBGColorChoiceUserSelected = EquationLibrary.MyCurrentEqSet.BackgroundColorChoice == "User Selected";
IsFGColorChoiceUserSelected = EquationLibrary.MyCurrentEqSet.ForegroundColorChoice == "User Selected";
GotoMenuCommand = new Command<ColorPage>(GotoMenu);
ProcessBGColorChoiceCommand = new Command<ColorPage>(ProcessBGColorChoice);
ProcessFGColorChoiceCommand = new Command<ColorPage>(ProcessFGColorChoice);
ProcessBGRedSliderCommand = new Command<ColorPage>(ProcessBGRedSlider);
ProcessBGGreenSliderCommand = new Command<ColorPage>(ProcessBGGreenSlider);
ProcessBGBlueSliderCommand = new Command<ColorPage>(ProcessBGBlueSlider);
ProcessFGRedSliderCommand = new Command<ColorPage>(ProcessFGRedSlider);
ProcessFGGreenSliderCommand = new Command<ColorPage>(ProcessFGGreenSlider);
ProcessFGBlueSliderCommand = new Command<ColorPage>(ProcessFGBlueSlider);
}
The command ProcessBGColorChoiceCommand
was instantiated with a parameter ColorPage
.
But no command parameter binding in your xaml. To fix that, change the command definition
ProcessBGColorChoiceCommand = new Command(ProcessBGColorChoice);
//also check other commands
And get selected value from property BGColorChoice
in ProcessBGColorChoice
method.