In Xamarin.Forms I implemented a custom Picker.
The ItemsSource is set correctly. However when i change the selected item it does not update the property on my ViewModel.
The BindablePicker:
public class BindablePicker : Picker
{
public BindablePicker()
{
this.SelectedIndexChanged += OnSelectedIndexChanged;
}
public static BindableProperty ItemsSourceProperty =
BindableProperty.Create<BindablePicker, IEnumerable>(o => o.ItemsSource, default(IEnumerable), propertyChanged: OnItemsSourceChanged);
public static BindableProperty SelectedItemProperty =
BindableProperty.Create<BindablePicker, object>(o => o.SelectedItem, default(object), propertyChanged: OnSelectedItemChanged);
public IEnumerable ItemsSource
{
get { return (IEnumerable)GetValue(ItemsSourceProperty); }
set { SetValue(ItemsSourceProperty, value); }
}
public object SelectedItem
{
get { return (object)GetValue(SelectedItemProperty); }
set { SetValue(SelectedItemProperty, value); }
}
private static void OnItemsSourceChanged(BindableObject bindable, IEnumerable oldvalue, IEnumerable newvalue)
{
var picker = bindable as BindablePicker;
picker.Items.Clear();
if (newvalue != null)
{
//now it works like "subscribe once" but you can improve
foreach (var item in newvalue)
{
picker.Items.Add(item.ToString());
}
}
}
private void OnSelectedIndexChanged(object sender, EventArgs eventArgs)
{
if (SelectedIndex < 0 || SelectedIndex > Items.Count - 1)
{
SelectedItem = null;
}
else
{
SelectedItem = Items[SelectedIndex];
}
}
private static void OnSelectedItemChanged(BindableObject bindable, object oldvalue, object newvalue)
{
var picker = bindable as BindablePicker;
if (newvalue != null)
{
picker.SelectedIndex = picker.Items.IndexOf(newvalue.ToString());
}
}
}
The Xamlpage:
<controls:BindablePicker Title="Category"
ItemsSource="{Binding Categories}"
SelectedItem="{Binding SelectedCategory}"
Grid.Row="2"/>
The ViewModel properties, didn't implement the NotifyPropertyChanged on the properties since they only need to be updated from the ´Viewto theViewModel`:
public Category SelectedCategory { get; set; }
public ObservableCollection<Category> Categories { get; set; }
When creating your BindableProperty:
public static BindableProperty SelectedItemProperty =
BindableProperty.Create<BindablePicker, object>(o => o.SelectedItem, default(object), propertyChanged: OnSelectedItemChanged);
without specifying the defaultBindingMode, the BindingMode is set to OneWay, meaning the Binding is updated from source (your view model) to target (your view).
This can be fixed by changing the defaultBindingMode:
public static BindableProperty SelectedItemProperty =
BindableProperty.Create<BindablePicker, object>(o => o.SelectedItem, default(object), BindingMode.TwoWay, propertyChanged: OnSelectedItemChanged);
or, if it's the default you want for your picker, but want to update the source only in this view, you can specify the BindingMode for this instance of the Binding only:
<controls:BindablePicker Title="Category"
ItemsSource="{Binding Categories}"
SelectedItem="{Binding SelectedCategory, Mode=TwoWay}"
Grid.Row="2"/>
Beside adding the Mode=TwoWay to my binding a had to change some things in my picker so it could work with the actual objects i had it bound to.
The Items property of the Xamarin Picker is an IList<string>
since all my items are added to it as a string it keeps the same indexed value.
Therefor the ItemsSource is changed to an IList:
public IList ItemsSource
{
get { return (IList)GetValue(ItemsSourceProperty); }
set { SetValue(ItemsSourceProperty, value); }
}
I also modified the SelectedIndexChangedmethod so it doesn't retrieve the item from the Items but from the ItemsSource, wich is in my case an IList<Category>:
private void OnSelectedIndexChanged(object sender, EventArgs eventArgs)
{
if (SelectedIndex < 0 || SelectedIndex > Items.Count - 1)
{
SelectedItem = null;
}
else
{
SelectedItem = ItemsSource[SelectedIndex];
}
}
In my ViewModel i no longer use the ObservableCollection for my Categories but add these items to an IList<Category>.
The ObservableCollectionhas no use since when my BindablePicker binds to the ItemsSource the items are added to the internal IList<string>. when adding an item to the collection it will not be updated. I now update the entire ItemSourceif an item is changed.
Related
What i want is, when the value is changed, it should call CreateChart()and use the new values.
I try to call in an onPropertyChange method OnValueChanged a bindable Property with reflection, but the property is always null and i dont get the value of the property Value
public partial class CorrectWrongRingChart : ContentView
{
public CorrectWrongRingChart()
{
InitializeComponent();
}
public static readonly BindableProperty ChartProperty =
BindableProperty.Create(
nameof(CorrectWrongChart),
typeof(Chart),
typeof(CorrectWrongRingChart));
public Chart CorrectWrongChart
{
get { return (Chart)GetValue(ChartProperty); }
set => SetValue(ChartProperty, value);
}
public static readonly BindableProperty ValueProperty =
BindableProperty.Create(
nameof(Value),
typeof(CorrectWrongValue),
typeof(CorrectWrongRingChart),
propertyChanged: OnValueChanged);/*(b, o, n) => { ((CorrectWrongRingChart)b).OnPropertyChanged("Text");});*/
public CorrectWrongValue Value
{
get { return (CorrectWrongValue)GetValue(ValueProperty); }
set => SetValue(ValueProperty, value);
}
private static void OnValueChanged(BindableObject bindable, object oldValue, object newValue)
{
((CorrectWrongRingChart)bindable).OnPropertyChanged("Text");
//((CorrectWrongRingChart)bindable).OnPropertyChanged("Correct");
//((CorrectWrongRingChart)bindable).OnPropertyChanged("Wrong");
var valueProperty = ValueProperty.GetType().GetProperty("Value");
var value = (CorrectWrongValue)valueProperty.GetValue("Value");
var ChartProperty = ValueProperty.GetType().GetProperty("CorrectWrongChart");
if (value != null)
{
ChartProperty.SetValue("CorrectWrongChart", CreateChart(value));
}
}
public static readonly BindableProperty TextProperty =
BindableProperty.Create(
nameof(Text),
typeof(string),
typeof(CorrectWrongRingChart),
defaultValue: string.Empty);
public string Text => $"{Value?.CorrectCount ?? 0}/{Value?.TotalCount ?? 0}";
//public double Correct => Value.CorrectPercentage;
//public double Wrong => Value.WrongPercentage;
private static Chart CreateChart(CorrectWrongValue value)
{
var chart = new Microcharts.DonutChart();
chart.IsAnimated = false;
ChartEntry corretEntry = new ChartEntry((float)value.CorrectPercentage)
{
Color = SKColor.Parse("#00FF00")
};
ChartEntry wrongEntry = new ChartEntry((float)value.WrongPercentage)
{
Color = SKColor.Parse("#FF0000")
};
chart.Entries = new List<ChartEntry>() { corretEntry, wrongEntry };
return chart;
}
}
Xaml:
<Grid >
<forms:ChartView x:Name="chart1" WidthRequest="130" HeightRequest="130" Chart="{Binding CorrectWrongChart, Source={x:Reference Root}}">
</forms:ChartView>
<Label Text="{ Binding Text, Source={x:Reference Root} }"
VerticalOptions="Center"
HorizontalOptions="Fill"
HorizontalTextAlignment="Center"
TextColor="Black"
FontSize="19"
FontFamily="{ StaticResource AppBoldFontFamily }" />
</Grid>
If you want to get Value when the value is changed , you could get it directly like following
private static void OnValueChanged(BindableObject bindable, object oldValue, object newValue)
{
var currentValue = newValue;
// do something you want
// you could get other property like following
// var view = bindable as CorrectWrongRingChart;
// var currentText = view.Text;
}
The property Value will change automatically when we change the value of it source .So we don't need to invoke the following lines any more , which maybe will lead to infinite loop .
if (value != null)
{
ChartProperty.SetValue("CorrectWrongChart", CreateChart(value));
}
My binding:
<local:MyContentView BindingContext="{Binding Source={x:Reference Root}, Path=BindingContext.Entity.Recipe, Mode=OneWay}"/>
The BindingContext on the ContentView is being updated when Recipe is changed, but the controls inside MyContentView aren't populating with data. If Recipe is a valid value initially the controls inside MyContentView is populated with the data, but if Recipe starts off as null and is changed to a valid target the controls will not update despite the BindingContext changing.
according to your description, you want to bind contentview in contentpage, the data don't update when data source changed, I guess that you may don't implement INotifypropertychanged for Recipe, you can follow then following article to implement INotifyPropertyChanged.
https://xamarinhelp.com/xamarin-forms-binding/
Another way ti to use Bindableproperty, I do one sample for you, you can take a look:
Contentview:
<ContentView.Content>
<StackLayout>
<Label x:Name="label1" Text="{Binding Text}" />
</StackLayout>
public partial class mycontenview : ContentView
{
public static BindableProperty TextProperty = BindableProperty.Create(
propertyName: "Text",
returnType: typeof(string),
declaringType: typeof(mycontenview),
defaultValue: string.Empty,
defaultBindingMode: BindingMode.OneWay,
propertyChanged: HandlePropertyChanged);
public string Text
{
get
{
return (string)GetValue(TextProperty);
}
set
{
SetValue(TextProperty, value);
}
}
private static void HandlePropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
mycontenview contentview = bindable as mycontenview;
contentview.label1.Text = newValue.ToString();
}
public mycontenview()
{
InitializeComponent();
}
}
MainPage:
<StackLayout>
<Label Text="welcome to xamarin world!"/>
<Button x:Name="btn1" Text="btn1" Clicked="btn1_Clicked"/>
<local:mycontenview Text="{Binding str}"/>
</StackLayout>
public partial class MainPage : ContentPage, INotifyPropertyChanged
{
private string _str;
public string str
{
get { return _str; }
set
{
_str = value;
OnPropertyChanged("str");
}
}
public MainPage()
{
InitializeComponent();
m = new model1() { str = "test 1", str1 = "test another 1" };
str = "cherry";
this.BindingContext = this;
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName]string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs((propertyName)));
}
protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName]string propertyName = null)
{
if (EqualityComparer<T>.Default.Equals(storage, value))
{
return false;
}
storage = value;
OnPropertyChanged(propertyName);
return true;
}
private void btn1_Clicked(object sender, EventArgs e)
{
str = "this is test!";
}
}
I have a page called MapPage.xaml and a code behind called MapPage.xaml.cs. In my android project, I have another file called CustomMapRenderer.cs. In the CustomMapRenderer.cs file, I need to retrieve the item selected variable in a XAML picker found in my MapPage.xaml file, which changes when a user picks an option in my XAML picker.
How to I reference the picker from my CustomMapRenderer.cs?
In the CustomMapRenderer.cs file, I need to retrieve the item selected variable in a XAML picker found in my MapPage.xaml file, which changes when a user picks an option in my XAML picker.
If you followed the official doc Customizing a Map to create your CustomMapRenderer, then in PCL, there should be a class which inherits from Map, for example:
public class CustomMap : Map
{
}
Then, if your picker is another control in your MainPage, you can create a bindable property for your CustomMap, and override OnElementPropertyChanged in your renderer to get this property when it changed.
For example, in PCL:
public class MapWithMyZoomControl : Map
{
public ZoomState MyZoom
{
get { return (ZoomState)GetValue(MyZoomProperty); }
set { SetValue(MyZoomProperty, value); }
}
public static readonly BindableProperty MyZoomProperty =
BindableProperty.Create(
propertyName: "MyZoom",
returnType: typeof(ZoomState),
declaringType: typeof(MapWithMyZoomControl),
defaultValue: ZoomState.normal,
propertyChanged: OnZoomPropertyChanged);
public static void OnZoomPropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
}
public enum ZoomState
{
normal,
zoomin,
zoomout
}
}
And in its renderer:
public class MapWithMyZoomControlRenderer : MapRenderer, IOnMapReadyCallback
{
private GoogleMap map;
public void OnMapReady(GoogleMap googleMap)
{
map = googleMap;
map.UiSettings.ZoomControlsEnabled = false;
}
protected override void OnElementChanged(ElementChangedEventArgs<Map> e)
{
base.OnElementChanged(e);
if (e.OldElement != null)
{
// Unsubscribe
}
if (e.NewElement != null)
{
var formsMap = (MapWithMyZoomControl)e.NewElement;
((MapView)Control).GetMapAsync(this);
}
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
var element = Element as MapWithMyZoomControl;
if (e.PropertyName == "MyZoom" && map != null)
{
if (element.MyZoom == MapWithMyZoomControl.ZoomState.zoomin)
{
map.AnimateCamera(CameraUpdateFactory.ZoomIn());
}
else if (element.MyZoom == MapWithMyZoomControl.ZoomState.zoomout)
{
map.AnimateCamera(CameraUpdateFactory.ZoomOut());
}
element.MyZoom = MapWithMyZoomControl.ZoomState.normal;
}
}
}
Out of this map control, I use buttons to control to zoom the map:
map.MyZoom = MapWithMyZoomControl.ZoomState.zoomin;
It'a a demo, but you can modify it to make property connected to your picker.
what is the easiest way to bind selected state of listview's item to model's boolean property?
I have model:
class Model {
public string Name { get; set; }
public bool Selected { get; set; }
}
And listview:
<ListView x:Name="myListView" SelectionMode="Multiple">
<ListView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListView.ItemTemplate>
I bind items to the listview:
myListView.ItemsSource = // list of Model instances
I want the Selected property of Model to always reflect whether it is selected or not in myListView. So - by selecting/deselecting the item in myListView, it will hold the apropriate bool value or by setting Selected property myListView will select/deselect appropriate item.
what is the easiest way to bind selected state of listview's item to model's boolean property?
I'm not sure if this is the most easiest way, but for me I think it is the easiest way to bind SelectorItem.IsSelected property of ListViewItem to your Selected property in model. Only the problem is, we all know each item of ListView is an instance of ListViewItem, but when we use DataTemplate to build the item structure for ListViewItem, ListViewItems are not available in design-time. So my idea is to bind this property in code behind, just for example here:
<ListView x:Name="myListView" SelectionMode="Multiple" Loaded="myListView_Loaded" ItemsSource="{x:Bind Collection}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
code behind:
private ObservableCollection<Model> Collection = new ObservableCollection<Model>();
protected override void OnNavigatedTo(NavigationEventArgs e)
{
for (int i = 0; i < 100; i++)
{
Collection.Add(new Model { Name = "Name " + i });
}
}
private void myListView_Loaded(object sender, RoutedEventArgs e)
{
IEnumerable<ListViewItem> lvItems = FindVisualChildren<ListViewItem>(myListView);
if (lvItems != null)
{
foreach (ListViewItem lvitem in lvItems)
{
Model model = lvitem.Content as Model;
Binding b = new Binding
{
Source = model,
Path = new PropertyPath("Selected"),
Mode = BindingMode.TwoWay,
};
BindingOperations.SetBinding(lvitem, ListViewItem.IsSelectedProperty, b);
}
}
}
private static IEnumerable<T> FindVisualChildren<T>(DependencyObject depObj) where T : DependencyObject
{
if (depObj != null)
{
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
{
DependencyObject child = VisualTreeHelper.GetChild(depObj, i);
if (child != null && child is T)
{
yield return (T)child;
}
foreach (T childOfChild in FindVisualChildren<T>(child))
{
yield return childOfChild;
}
}
}
}
public class Model : INotifyPropertyChanged
{
public string Name { get; set; }
private bool _Selected;
public bool Selected
{
get { return _Selected; }
set
{
if (value != _Selected)
{
_Selected = value;
OnPropertyChanged();
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged([CallerMemberName]string propertyName = "")
{
if (this.PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
I think the perfect way would be to implement the ListView.ItemSelectionChanged event, and iterate through each item in the list view model to set it to true for the item which is selected, false for the rest items.
However, You may want to try something like this, although honestly I'm not sure if this is the correct way:
class Model {
public string Name { get; set; }
public bool Selected
{
get
{
return MyListView.SelectedItems.Count(x => x.Name == Name) > 0;
}
}
}
TheContext refers to my ViewModel in the resources section
<DataGrid DataContext="{StaticResource TheContext}"
ItemsSource="{Binding Path=Cars}">
This is my viewModel.cs
public CarsSearchResultsViewModel()
{
ButtonCommand = new DelegateCommand(x => GetCars());
}
public void GetCars()
{
List<Car> cars = new List<Car>();
cars.Add(new Car() { Make = "Chevy", Model = "Silverado" });
cars.Add(new Car() { Make = "Honda", Model = "Accord" });
cars.Add(new Car() { Make = "Mitsubishi", Model = "Galant" });
Cars = new ObservableCollection<Car>(cars);
}
private ObservableCollection<Car> _cars;
public ObservableCollection<Car> Cars
{
get { return _cars; }
private set
{
if (_cars == value) return;
_cars = value;
}
}
I have tried adding OnPropertyChanged("Cars"), I have tried adding adding People = null before adding the list, I have tried adding UpdateSourceTrigger=PropertyChanged to the ItemsSource, and before using ObservableCollection I tried using IViewCollection.
Im not trying to update or delete from a collection, just populate the grid with a button click. If i run GetCars() in the constructor without the command it works fine.
Your ViewModel needs to implement the INotifyPropertyChanges interface, and call OnpropertyChanged in the setter of your ObservableCollection so that when you reinstated the UI will get notified so you Cars property should looks somethink like this :
private ObservableCollection<Car> _cars ;
public ObservableCollection<Car> Cars
{
get
{
return _cars;
}
set
{
if (_cars == value)
{
return;
}
_cars = value;
OnPropertyChanged();
}
}
The Cars collection needs to be defined inside TheContext class since it is your Context and that last one needs to implement the mentioned interface :
public class TheContext:INotifyPropertyChanged
{
//Cars property and your code ..
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}