Develop Reference

Why is this Xamarin.Forms autowire binding connecting my Command but not my Entry?

I have this XAML
<?xml version="1.0" encoding="utf-8"?>
<ContentPage
...
x:Class="MyProj.LoginPageView"
local:ViewModelLocator.AutoWireViewModel="True">
...cut for brevity...
<Entry MinimumWidthRequest="60" Grid.Row="0" Grid.Column="2" VerticalOptions="Center" Text="{Binding Username, Mode=TwoWay}"/>
<Entry Grid.Row="1" Grid.Column="2" VerticalOptions="Center" Text="{Binding Password, Mode=TwoWay}"/>
<Button Text="Login" Command="{Binding LoginCommand}"/>
<Button Text="Register" Command="{Binding RegisterCommand}"/>
Attached using autowiring to this viewmodel:
public class LoginPageViewModel: BindableObject
{
public ICommand LoginCommand { get; set; }
public ICommand RegisterCommand { get; set; }
private string username;
private string password;
public string Username { get { return username; } set { username = value; OnPropertyChanged("Username"); } }
public string Password { get { return password; } set { password = value; OnPropertyChanged("Password"); } }
public LoginPageViewModel()
{
LoginCommand = new Command(() =>
Login());
RegisterCommand = new Command(() =>
Register());
}
private void Login()
{
}
private void Register()
{
Console.WriteLine("sdfsd");
}
}
The command bindings are working fine and the Register and Login methods get called when I click the button. In the autowiring the binding context of the view is set to the viewmodel as follows:
static ViewModelLocator()
{
_container = new TinyIoCContainer();
//register viewmodels
_container.Register<LoginPageViewModel>();
}
public static readonly BindableProperty AutoWireViewModelProperty =
BindableProperty.CreateAttached("AutoWireViewModel", typeof(bool), typeof(ViewModelLocator), default(bool), propertyChanged: OnAutoWireViewModelChanged);
public static bool GetAutoWireViewModel(BindableObject bindable)
{
return (bool)bindable.GetValue(ViewModelLocator.AutoWireViewModelProperty);
}
public static void SetAutoWireViewModel(BindableObject bindable, bool value)
{
bindable.SetValue(ViewModelLocator.AutoWireViewModelProperty, value);
}
private static void OnAutoWireViewModelChanged(BindableObject bindable, object oldValue, object newValue)
{
var view = bindable as Element;
if (view == null)
{
return;
}
var viewType = view.GetType();
var viewName = viewType.FullName.Replace(".Views.", ".ViewModels.");
var viewAssemblyName = viewType.GetTypeInfo().Assembly.FullName;
var viewModelName = string.Format(
CultureInfo.InvariantCulture, "{0}Model, {1}", viewName, viewAssemblyName);
var viewModelType = Type.GetType(viewModelName);
if (viewModelType == null)
{
return;
}
var viewModel = _container.Resolve(viewModelType);
view.BindingContext = viewModel;
}
When I click register in debug mode the register method gets called which means the command binding has been connected but the value I put in the Entry fields for username and password aren't connected to the corresponding properties on the VM and the properties just have null values.

How to bind combobox events to viewmodel with ICommand

I am relatively new to MVVM and I want to bind my view to the view model. I have a lot of code to move from the CodeBehind into the ViewModel class.
What I would like to do is binding the ComboBox Events to the corresponding ViewModel ICommand methods. I want the ComboBox to show "CompanyB" when the view loads and when I make a selection, the ComboBox should give me "CompanyA", "CompanyB" and "CompanyC" as options to select from.
After a company was selected, the values of the 2 textboxes below
Nachbest.Empf_Ansprechpartner
Nachbest.Empfaenger_Mail
must change accordingly.
The problem is with my code both the ComboBox and the textboxes remain empty and there is also nothing to choose from inside the combobox.
Could you please help me find what I am missing here? Thanks in advance for any help!
XAML (neueNachbestellung.xaml):
<Window xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity">
<Grid>
<StackPanel Grid.Column="0" Margin="25,25,0,0" x:Name="leftStPnl">
<ComboBox x:Name="cboxEmpfaenger"
ItemsSource="{Binding Empf}"
Text="{Binding Empfaenger}"
FontSize="12" Width="150" Margin="118,0,0,0"
SelectedItem="{Binding SelValue}">
</ComboBox>
<TextBox x:Name="txtEmpfAnsprechpartner" Text="{Binding Empf_Ansprechpartner}" FontSize="12" IsEnabled="False" Width="150" Margin="50,0,0,0"/>
<TextBox x:Name="txtEmpfMail" Text="{Binding Empfaenger_Mail}" FontSize="12" IsEnabled="False" Width="150" Margin="73,0,0,0"/>
</StackPanel>
</Grid>
</Window>
Code Behind (neueNachbestellung.xaml.cs):
public neueNachbestellung(string someId)
{
InitializeComponent();
this.DataContext = new neueNachbestellungViewModel(someId);
}
View Model(neueNachbestellungViewModel.cs):
public class neueNachbestellungViewModel: INotifyPropertyChanged
{
public ICommand LoadCombobox => new DelegateCommand<object>(ExecuteLoadCombobox);
public ICommand ComboboxSelectionChanged => new DelegateCommand<object>(ExecuteComboboxSelectionChanged);
public Nachbestellung Nachbest { get; set; }
private object someObject;
private ObservableCollection<string> _empf;
public ObservableCollection<string> Empf
{
get { return _empf; }
set
{
_empf = value;
OnPropertyChanged("Empf");
}
}
private string _selValue = "12";
public string SelValue
{
get { return _selValue; }
set
{
_selValue = value;
OnPropertyChanged("SelValue");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public virtual void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public neueNachbestellungViewModel(string id)
{
this.Artikel = new ArtikelViewModel();
this.ArtikelList = new ObservableCollection<Artikel>();
InitializeReorderModel(id);
ExecuteComboboxSelectionChanged(someObject);
}
public void InitializeReorderModel(string id)
{
//set the MODEL
this.Nachbest = new Nachbestellung();
//Retrieve and set some values on *VIEW LOAD*!
var dbOracle = new Datenbank();
this.Nachbest.Bv = dbOracle.GetBauvorhaben(hv);
this.Nachbest.Hv = hv;
this.Nachbest.Bauleiter = dbOracle.GetBauleiter(hv);
this.Nachbest.Projektleiter = dbOracle.GetProjektleiter(hv);
}
private void ExecuteLoadCombobox(object param)
{
Empf = new ObservableCollection<string>()
{
"CompanyA",
"CompanyB",
"CompanyC"
};
//Company B is the standard selection on combobox load
Nachbest.Empf_Ansprechpartner = "CompanyB";
Nachbest.Empfaenger_Mail = "orders#companyB.com";
}
private void ExecuteComboboxSelectionChanged(object param)
{
Empf = new ObservableCollection<string>()
{
"CompanyA",
"CompanyB",
"CompanyC"
};
switch (SelValue)
{
case "CompanyA":
{
Nachbest.Empf_Ansprechpartner = "CompanyA";
Nachbest.Empfaenger_Mail = "service#companyA.com";
}
break;
case "CompanyB":
{
Nachbest.Empf_Ansprechpartner = "CompanyB";
Nachbest.Empfaenger_Mail = "orders#companyB.com";
}
break;
case "CompanyC":
{
Nachbest.Empf_Ansprechpartner = "CompanyC";
Nachbest.Empfaenger_Mail = "info#companyC.com";
}
break;
default:
MessageBox.Show("Something went wrong with the company selection!");
break;
}
}
}
View Fragment:

This is my quick & dirty solution. It does what it needs to and I don't have these click_button, selection_changed events inside my code behind anymore but inside my view model. That is all I need for now. Obviously not an elegant solution but it is working. I hope I can help some developers with it in the future who run into similar problems. Just a side note: The ICommand properties inside the view model are not necessary in this scenario but I am using them to handle button click events in the view. You can replace them with your own properties if you don't need the DelegateCommand class in your application.
XAML (neueNachbestellung.xaml):
<Window>
<Grid>
<StackPanel Grid.Column="0" Margin="25,25,0,0" x:Name="leftStPnl">
<ComboBox x:Name="cboxEmpfaenger"
ItemsSource="{Binding Empf}"
Text="{Binding Empfaenger}"
FontSize="12" Width="150" Margin="118,0,0,0"
SelectedItem="{Binding SelValue}">
</ComboBox>
<TextBox x:Name="txtEmpfAnsprechpartner" DataContext="{Binding Nachbest}" Text="{Binding Empf_Ansprechpartner}" FontSize="12" IsEnabled="False" Width="150" Margin="50,0,0,0"/>
<TextBox x:Name="txtEmpfMail" DataContext="{Binding Nachbest}" Text="{Binding Empfaenger_Mail}" FontSize="12" IsEnabled="False" Width="150" Margin="73,0,0,0"/>
</StackPanel>
</Grid>
</Window>
Code Behind (neueNachbestellung.xaml.cs):
public neueNachbestellung(string someId)
{
InitializeComponent();
this.DataContext = new neueNachbestellungViewModel(someId);
}
neueNachbestellungViewModel.cs:
public class neueNachbestellungViewModel: INotifyPropertyChanged
{
//public ICommand LoadCombobox => new DelegateCommand<object>(ExecuteLoadCombobox);
public ICommand ComboboxSelectionChanged => new DelegateCommand<object>(ExecuteComboboxSelectionChanged);
public Nachbestellung Nachbest { get; set; }
private object someObject; //DelegateCommand.cs requires an argument
private ObservableCollection<string> _empf;
public ObservableCollection<string> Empf
{
get { return _empf; }
set
{
_empf = value;
OnPropertyChanged("Empf");
}
}
private string _selValue = "CompanyB"; //default value
public string SelValue
{
get { return _selValue; }
set
{
_selValue = value;
OnPropertyChanged("SelValue");
switch (SelValue)
{
case "CompanyA":
{
Nachbest.Empf_Ansprechpartner = "CompanyA";
Nachbest.Empfaenger_Mail = "service#companyA.com";
}
break;
case "CompanyB":
{
Nachbest.Empf_Ansprechpartner = "CompanyB";
Nachbest.Empfaenger_Mail = "orders#companyB.com";
}
break;
case "CompanyC":
{
Nachbest.Empf_Ansprechpartner = "CompanyC";
Nachbest.Empfaenger_Mail = "info#companyC.com";
}
break;
default:
MessageBox.Show("Something went wrong with the company selection!");
break;
}
//setting the Empfaenger property here with the current selected value is necessary for the database insert later on!
Nachbest.Empfaenger = SelValue;
}
}
public event PropertyChangedEventHandler PropertyChanged;
public virtual void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public neueNachbestellungViewModel(string id)
{
this.Artikel = new ArtikelViewModel();
this.ArtikelList = new ObservableCollection<Artikel>();
InitializeReorderModel(id);
ExecuteComboboxSelectionChanged(someObject);
}
public void InitializeReorderModel(string id)
{
//set the MODEL
this.Nachbest = new Nachbestellung();
//Retrieve and set some values on *VIEW LOAD*!
var dbOracle = new Datenbank();
this.Nachbest.Bv = dbOracle.GetBauvorhaben(hv);
this.Nachbest.Hv = hv;
this.Nachbest.Bauleiter = dbOracle.GetBauleiter(hv);
this.Nachbest.Projektleiter = dbOracle.GetProjektleiter(hv);
}
private void ExecuteComboboxSelectionChanged(object param)
{
Empf = new ObservableCollection<string>()
{
"CompanyA",
"CompanyB",
"CompanyC"
};
Nachbest.Empf_Ansprechpartner = "CompanyB";
Nachbest.Empfaenger_Mail = "orders#companyB.com";
Nachbest.Empfaenger = SelValue; //if this is left out and there is no selection (just the default remaining unchanged!), Nachbest.Empfaenger will be null!
}
}

Picker function in Xamarin not showing items

Here is my code.
List<DriverStatusViewModel> driverStatus = PopulateDriverStatus();
var selectedStatus = driverStatus.FirstOrDefault();
var picker = new Picker { Title = "Select a status" };
picker.SetBinding(Picker.ItemsSourceProperty, "driverStatus");
picker.SetBinding(Picker.SelectedItemProperty, "selectedStatus");
picker.ItemDisplayBinding = new Binding("Status");
Populate the List
private List<DriverStatusViewModel> PopulateDriverStatus()
{
var driverStatus = new List<DriverStatusViewModel>();
var stat1 = new DriverStatusViewModel();
stat1.EnumId = 1;
stat1.Status = "At Lunch";
driverStatus.Add(stat1);
var stat2 = new DriverStatusViewModel();
stat2.EnumId = 2;
stat2.Status = "Break";
driverStatus.Add(stat2);
var stat3 = new DriverStatusViewModel();
stat3.EnumId = 3;
stat3.Status = "Delivering";
driverStatus.Add(stat3);
return driverStatus;
}
Xaml codes for display
<Picker Title="Select a status"
ItemsSource="{Binding driverStatus}"
TextColor="Black"
BackgroundColor="Red"
ItemDisplayBinding="{Binding Name}"
SelectedItem="{Binding selectedStatus}" />
Below image is how it looks like when running in emulator
Im very new to Xamarin, Please help me and Thank you in advance.

In Xaml, add x:Name="pic":
<Picker Title="Select a monkey"
TextColor="Black"
x:Name="pic"
BackgroundColor="Red"
ItemDisplayBinding="{Binding Name}"
SelectedItem="{Binding selectedStatus}"/>
In your page add:
pic.ItemsSource = driverStatus;

The problem is that when you set a Binding in code, the string cannot "point" to a local variable. The binding is evaluated at runtime, so there would have to be a property with the name driverStatus and selectedDriver in the view model.
So instead of setting it as a local variable, create two properties DriverStatus and SelectedDriver and bind to them. Also you probably want to use INotifyPropertyChanged so that the UI is notified when the property values change.

This is what I did to solve the Picker.
//ViewModel
public class DriverStatusViewModel : INotifyPropertyChanged
{
List<DriverStatus> statusList;
public List<DriverStatus> StatusList
{
get { return statusList; }
set
{
if (statusList != value)
{
statusList = value;
OnPropertyChanged();
}
}
}
public string Title { get; set; }
DriverStatus selectedStatus;
public DriverStatus SelectedStatus
{
get { return selectedStatus; }
set
{
if (selectedStatus != value)
{
selectedStatus = value;
OnPropertyChanged();
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
//Model
public class DriverStatus
{
public int E_Id { get; set; }
public string E_Name { get; set; }
}
//cs file
BindingContext = new DriverStatusViewModel
{
StatusList = PopulateDriverStatus()
};
//adding Static data for DriverStatus
private List<DriverStatus> PopulateDriverStatus()
{
var driverStatus = new List<DriverStatus>();
var stat1 = new DriverStatus();
stat1.E_Id = 1;
stat1.E_Name = "At Lunch";
driverStatus.Add(stat1);
var stat2 = new DriverStatus();
stat2.E_Id = 2;
stat2.E_Name = "Break";
driverStatus.Add(stat2);
var stat3 = new DriverStatus();
stat3.E_Id = 3;
stat3.E_Name = "Delivering";
driverStatus.Add(stat3);
return driverStatus;
}
//XAML file
<Picker x:Name="picker"
Title="Select new status"
TextColor="Black"
HorizontalOptions="Start"
ItemsSource="{Binding StatusList}"
ItemDisplayBinding="{Binding E_Name}"
SelectedItem="{Binding SelectedStatus}"/>
<Label Text="{Binding SelectedStatus.E_Id}" IsVisible="False" x:Name="E_Id"/>
Special thanks to this answer Xamarin Forms Picker Binding I followed what he did.

Can't able to perform button click and combo box selection changed in WinRT MVVM

UPDATE 1 : You can download the sample project from here.
Can you please help me to find the error in my code. I can't able to assign item source to combo box as well as button click event in WinRT app. I am using MVVM and MetroEventToCommand. I am new to MVVM concept, so please answer my silly question.
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Click Here">
<mvvm:EventToCommandManager.Collection>
<mvvm:EventToCommand Command="{Binding ButtonClickCommand}" Event="Click"/>
</mvvm:EventToCommandManager.Collection>
</Button>
<ComboBox x:Name="FontsCombo" Height="50" Width="150" SelectedItem="{Binding SelectedFont}" ItemsSource="{Binding fonts}" />
<TextBlock FontSize="30" Text="{Binding SelectedFont}"/>
</Grid>
public MainPage()
{
this.InitializeComponent();
this.DataContext = new VM();
}
public class VM : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public RelayCommand ButtonClickCommand { get; set; }
private ObservableCollection<string> _fonts = new ObservableCollection<string>();
public ObservableCollection<string> fonts
{
get { return _fonts; }
set
{
_fonts = value;
if (null != PropertyChanged)
{
PropertyChanged(this, new PropertyChangedEventArgs("fonts"));
}
}
}
private string _SelectedFont = "";
public string SelectedFont
{
get { return _SelectedFont; }
set
{
// Some logic here
_SelectedFont = value;
if (null != PropertyChanged)
{
PropertyChanged(this, new PropertyChangedEventArgs("SelectedFont"));
}
}
}
public VM()
{
fonts.Add("Arial");
fonts.Add("Courier New");
fonts.Add("Times New Roman");
ButtonClickCommand = new RelayCommand(Click);
}
private void Click()
{
new Action(async () => await new Windows.UI.Popups.MessageDialog("Testing dialog").ShowAsync()).Invoke();
}
}

For the SelectedItem, you didn't specify the Mode=TwoWay :
<ComboBox x:Name="FontsCombo" Height="50" Width="150" SelectedItem="{Binding SelectedFont, Mode=TwoWay}" ItemsSource="{Binding fonts}" />
EDIT
I found the solution :
public class VM : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public RelayCommand ButtonClickCommand { get; set; }
private ObservableCollection<string> _fonts;
public ObservableCollection<string> fonts
{
get { return _fonts; }
set
{
_fonts = value;
if (null != PropertyChanged)
{
PropertyChanged(this, new PropertyChangedEventArgs("fonts"));
}
}
}
private string _SelectedFont;
public string SelectedFont
{
get { return _SelectedFont; }
set
{
// Some logic here
_SelectedFont = value;
if (null != PropertyChanged)
{
PropertyChanged(this, new PropertyChangedEventArgs("SelectedFont"));
}
}
}
public VM()
{
this.fonts = new ObservableCollection<string>();
fonts.Add("Arial");
fonts.Add("Courier New");
fonts.Add("Times New Roman");
ButtonClickCommand = new RelayCommand(Click);
}
private void Click()
{
new Action(async () => await new Windows.UI.Popups.MessageDialog("Testing dialog").ShowAsync()).Invoke();
}
}
If I instance fonts in the constructor, the UX is not freezing anymore.

ObservableCollection not updating View

I am just starting with MVVM and have hit a hurdle that I hope someone can help me with. I am trying to create a simple View with 2 listboxes. A selection from the first listbox will populate the second list box. I have a class created that stores the information I want to bind to.
MyObject Class (Observable Object is just a base class that implements INotifyPopertyChanged)
public class MyObject : ObservableObject
{
String _name = String.Empty;
ObservableCollection<MyObject> _subcategories;
public ObservableCollection<MyObject> SubCategories
{
get { return _subcategories; }
set
{
_subcategories = value;
RaisePropertyChanged("SubCategories");
}
}
public String Name
{
get { return _name; }
set
{
_name = value;
RaisePropertyChanged("Name");
}
}
public MyObject()
{
_subcategories = new ObservableCollection<EMSMenuItem>();
}
}
In my viewmodel I have two ObservableCollections created
public ObservableCollection<EMSMenuItem> Level1MenuItems { get; set; }
public ObservableCollection<EMSMenuItem> Level2MenuItems { get; set; }
In my constructor of the ViewModel I have:
this.Level1MenuItems = new ObservableCollection<EMSMenuItem>();
this.Level2MenuItems = new ObservableCollection<EMSMenuItem>();
this.Level1MenuItems = LoadEMSMenuItems("Sample.Xml");
That works fine for the Level1 items and they correctly show in the View. However I have a command that gets called when the user clicks an item in the listbox, which has the following:
Level2MenuItems = ClickedItem.SubCategories;
For some reason this does not update the UI of the second listbox. If I put a breakpoint at this location I can see that Level2MenuItems has the correct information stored in it. If I write a foreach loop and add them individually to the Level2MenuItems collection then it does display correctly.
Also as a test I added the following to the constructor:
Level2MenuItems = Level1MenuItems[0].SubCategories;
And that updated correctly.
So why would the code work as expected in the constructor, or when looping through, but not when a user clicks on an item in the listbox?

You need to raise the change notification on the Level2MenuItems property.
Instead of having
public ObservableCollection<EMSMenuItem> Level2MenuItems { get; set; }
you need
private ObservableCollection<EMSMenuItem> _level2MenuItems;
public ObservableCollection<EMSMenuItem> Level2MenuItems
{
get { return _level2MenuItems; }
set
{
_level2MenuItems = value;
RaisePropertyChanged(nameof(Level2MenuItems));
}
}
The reason the former works in the constructor is that the Binding has not taken place yet. However since you are changing the reference via a command execute which happens after the binding you need to tell view that it changed

You need to make your poco class within the ObservableCollection implement INotifyPropertyChanged.
Example:
<viewModels:LocationsViewModel x:Key="viewModel" />
.
.
.
<ListView
DataContext="{StaticResource viewModel}"
ItemsSource="{Binding Locations}"
IsItemClickEnabled="True"
ItemClick="GroupSection_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" Margin="0,0,10,0" Style="{ThemeResource ListViewItemTextBlockStyle}" />
<TextBlock Text="{Binding Latitude, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Style="{ThemeResource ListViewItemTextBlockStyle}" Margin="0,0,5,0"/>
<TextBlock Text="{Binding Longitude, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Style="{ThemeResource ListViewItemTextBlockStyle}" Margin="5,0,0,0" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
public class LocationViewModel : BaseViewModel
{
ObservableCollection<Location> _locations = new ObservableCollection<Location>();
public ObservableCollection<Location> Locations
{
get
{
return _locations;
}
set
{
if (_locations != value)
{
_locations = value;
OnNotifyPropertyChanged();
}
}
}
}
public class Location : BaseViewModel
{
int _locationId = 0;
public int LocationId
{
get
{
return _locationId;
}
set
{
if (_locationId != value)
{
_locationId = value;
OnNotifyPropertyChanged();
}
}
}
string _name = null;
public string Name
{
get
{
return _name;
}
set
{
if (_name != value)
{
_name = value;
OnNotifyPropertyChanged();
}
}
}
float _latitude = 0;
public float Latitude
{
get
{
return _latitude;
}
set
{
if (_latitude != value)
{
_latitude = value;
OnNotifyPropertyChanged();
}
}
}
float _longitude = 0;
public float Longitude
{
get
{
return _longitude;
}
set
{
if (_longitude != value)
{
_longitude = value;
OnNotifyPropertyChanged();
}
}
}
}
public class BaseViewModel : INotifyPropertyChanged
{
#region Events
public event PropertyChangedEventHandler PropertyChanged;
#endregion
protected void OnNotifyPropertyChanged([CallerMemberName] string memberName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(memberName));
}
}
}

Your Subcategories property should be read-only.