'Xamarin ObservableCollection on change value from list inside DataTemplate
I'm trying to detect changes inside a Button in a DataTemplate, I know I can get the button directly and change the value, but I need to do it like this or similar (button example: TextColor = item.IsOn ? Color .Yellow : Color. White) for another functionality such as On/Off all, or when selecting one, change the color of the text of the rest of the Buttons. Any idea? Thanks in advance!
ObservableCollection<NodeMCU> observaleList = new ObservableCollection<NodeMCU>( await db.GetNodeMCUsAsync() );
listView.ItemsSource = observaleList;
listView.ItemTemplate = new DataTemplate(() =>
{
var turnOnDeviceBtn = new Button
{
Padding = 0,
Margin = new Thickness(15, 0, 0, 0),
FontSize = 20,
// Can I somehow do this?
TextColor = item.IsOn ? Color.Yellow : Color.White,
FontFamily = "FontIcons",
Text = "\ue703",
BackgroundColor = Color.Gray
};
turnOnDeviceBtn.Clicked += (o, e) =>
{
var deviceSelected = (NodeMCU)((Button)o).BindingContext;
for ( int i = 0; i < observaleList.Count; i++ )
observaleList[i].IsOn = false;
deviceSelected.IsOn = !deviceSelected.IsOn;
//This way is running OK
if (deviceSelected.IsOn)
turnOnDeviceBtn.TextColor = Color.Yellow;
else
turnOnDeviceBtn.TextColor = Color.White;
};
var grid = new Grid
{
Padding = new Thickness(0, 5),
ColumnDefinitions = new ColumnDefinitionCollection()
{
new ColumnDefinition { Width = new GridLength(.5, GridUnitType.Star) },
new ColumnDefinition { Width = new GridLength(.25, GridUnitType.Star) },
new ColumnDefinition { Width = new GridLength(.25, GridUnitType.Star) }
}
};
grid.Children.Add(turnOnDeviceBtn, 2, 3, 0, 1);
return new ViewCell
{
View = grid
};
});
UPDATE
Okey, I did this and the first time data was loaded it worked fine with the IValueConverter. But when I update all values from the ObservableCollection or click on the template button the value in the list changes but nothing changes with the IValueConverter and the color is not updated
ObservableCollection<NodeMCU> observaleList = new ObservableCollection<NodeMCU>( await db.GetNodeMCUsAsync() );
BoolToColorConverter converter = new BoolToColorConverter() { OnColor = Color.Yellow, OffColor = Color.White };
turnOnDeviceBtn.SetBinding( Label.TextColorProperty, new Binding( "IsOn", BindingMode.Default, converter ) );
External button what updates all Datatemplate data
bool isAllDevicesOn = false;
turnOnAllDevices.Clicked += ( o, e ) =>
{
for ( int i = 0; i < observaleList.Count; i++ )
observaleList[i].IsOn = !isAllDevicesOn;
isAllDevicesOn = !isAllDevicesOn;
};
And that is the IValueConverter
public class BoolToColorConverter : IValueConverter
{
public Color OnColor { set; get; } = Color.Yellow;
public Color OffColor { set; get; } = Color.White;
public object Convert( object value, Type targetType, object parameter, CultureInfo culture )
{
return (bool)value ? OnColor : OffColor;
}
public object ConvertBack( object value, Type targetType, object parameter, CultureInfo culture )
{
return ((Color)value).Equals( OnColor );
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
