I'm new to XamarinForms and I can't figure something out about a ListView.
I have a model class UserSetting. Based on the value of the property UserSettingsType the ListView shows a different DataTemplate for the cell. For this I have written a DataTempateSelector
There is a UserSettingCell, a PhonenumberCell and a UserSwitchCell. These cells are part of a ListView on the page UserSettingsPage.
All cells except one (the PhonenumberCell) consists of a key/value (Firstname/John) pair to be showed.
The PhonenumberCell is one cell where the value consists of multiple values (Phonenumber/06-22222222,06-88888888). To store these values I used an ObservableCollection in the UserSetting class.
By tapping on the PhonenumberCell it is possible to add another value. I can add that value to the ObservableCollection, but I do not know how to update my ListView to show the changes made.
So, the PhonenumberCell befor tapping it shows :
2 Telefoonnummers. Tap voor meer informatie
After tapping it should show:
3 Telefoonnummers. Tap voor meer informatie
Maybe somebody knows how to achieve the following (my preferred UI).
Before tapping the cell
Telefoonnummer
- 06-22222222
- 06-88888888
After tapping the cell
Telefoonnummer
- 06-22222222
- 06-88888888
- 06-44444444
In this case the cells underneath the PhonenumberCell has to move down when an phonenumber is added. That is my preferred solution, hopefully somebody can help me.
Thanks,
Hendrik Jan
public class SettingsPage : ContentPage
{
public ObservableCollection<UserSetting> UserSettings { get; set; }
public SettingsPage ()
{
Padding = new Thickness (10, Device.OnPlatform (20, 0, 0), 10, 5);
Content = CreateListView ();
}
ListView CreateListView ()
{
UserSettings = DemoData.UserSettings ();
var listView = new TemplateSelectorListView ();
listView.ItemsSource = UserSettings;
listView.HasUnevenRows = true;
listView.PropertyChanged += HandlePropertyChanged;
var datatemplateSelector = new UserSettingTemplateSelector ();
datatemplateSelector.UserSettingCell = new DataTemplate (typeof(UserSettingCell));
datatemplateSelector.UserSwitchCell = new DataTemplate (typeof(UserSwitchCell));
datatemplateSelector.PhonenumberCell = new DataTemplate (typeof(PhonenumberCell));
listView.TemplateSelector = datatemplateSelector;
listView.ItemTapped += HandleListViewTapped;
return listView;
}
void HandleListViewTapped (object sender, ItemTappedEventArgs e)
{
var userSetting = ((UserSetting)e.Item);
if (userSetting.UserSettingType == UserSettingTypes.Add) {
userSetting.Values.Add ("06-44444444");
}
}
public enum UserSettingTypes
{
Add,
Select,
Switch
}
public class UserSetting
{
public int Id { get; set; }
public string Name { get; set; }
public string Key { get; set; }
public ObservableCollection<string> Values { get; set; }
public string Value { get { return GetValuesAsString (); } }
public UserSettingTypes UserSettingType { get; set; }
public string GetValuesAsString ()
{
if (Values != null) {
if (Values.Count == 1) {
return Values [0];
} else {
return string.Format ("{0} Telefoonnummers. Tap voor meer informatie", Values.Count);
}
}
return null;
}
}
public class PhonenumberCell : ViewCell
{
public PhonenumberCell ()
{
var keyLabel = new Label ();
FontHelper.SetBoldFont (keyLabel);
var titleBinding = new Binding ("Key");
keyLabel.SetBinding (Label.TextProperty, titleBinding);
var valueLabel = new Label ();
FontHelper.SetRegularFont (valueLabel, 14);
var valueBinding = new Binding ("Value");
valueLabel.SetBinding (Label.TextProperty, valueBinding);
var accessoryImage = new Image ();
accessoryImage.Source = "iconPlus.png";
accessoryImage.ScaleTo (0.25);
var grid = new Grid {
Padding = 5,
HorizontalOptions = LayoutOptions.StartAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
RowDefinitions = {
new RowDefinition { Height = 15 },
new RowDefinition { Height = 15 }
},
ColumnDefinitions = {
new ColumnDefinition{ Width = new GridLength (1, GridUnitType.Star) },
new ColumnDefinition{ Width = 40 }
}
};
grid.Children.Add (keyLabel, 0, 0);
grid.Children.Add (valueLabel, 0, 1);
grid.Children.Add (accessoryImage, 1, 0);
Grid.SetRowSpan (accessoryImage, 2);
View = grid;
}
}