How to change list value on certain position click? - xaml

Question

I have a list of products in BindableLayout.
When i click on some product i want to change the value of the Active field and "reload" the list print1.
There is any way to change the values of the list from the xaml?
What is the best approach?
MainPage.xaml.cs
public partial class MainPage : ContentPage
{
public List<ProductStatus> ProductList => getProducts();
public MainPage()
{
InitializeComponent();
this.BindingContext = this;
}
public List<ProductStatus> getProducts()
{
return new List<ProductStatus>
{
new ProductStatus { Id="P13", Name = "Product X", Active = false },
new ProductStatus { Id="P17", Name = "Product Y", Active = false },
new ProductStatus { Id="P21", Name = "Product Z", Active = true },
};
}
}
public class ProductStatus
{
public string Id { get; set; }
public string Name { get; set; }
public bool Active { get; set; }
}
}
MainPage.xaml
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout BindableLayout.ItemsSource="{Binding ProductList}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" Spacing="1" Padding="20">
<StackLayout.Style>
<Style TargetType="StackLayout">
<Style.Triggers>
<DataTrigger Binding="{Binding Active}" Value="true" TargetType="StackLayout">
<Setter Property="BackgroundColor" Value="#f0f0f0"/>
</DataTrigger>
<DataTrigger Binding="{Binding Active}" Value="false" TargetType="StackLayout">
<Setter Property="BackgroundColor" Value="Transparent"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackLayout.Style>
<Label Text="{Binding Name}"/>
<Label HorizontalOptions="EndAndExpand">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding Active}" Value="true" TargetType="Label">
<Setter Property="TextColor" Value="Green"/>
<Setter Property="Text" Value="A"/>
</DataTrigger>
<DataTrigger Binding="{Binding Active}" Value="false" TargetType="Label">
<Setter Property="TextColor" Value="Red"/>
<Setter Property="Text" Value="I"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<Button Text="Save"/>
</StackLayout>

Answer 1

First if you want to display a list,it's better to use ListView or CollectionView,that's will be more convenient.
If you still want to use BindableLayout here,you could add a TapGestureRecognizer to your StackLayout.And let your ProductStatus implement INotifyPropertyChanged interface(for reload the data).
public partial class MainPage: ContentPage
{
public List<ProductStatus> ProductList => getProducts();
public ICommand TapCommand { get; set; }
public MainPage()
{
InitializeComponent();
TapCommand = new Command<ProductStatus>(OnTapCommand);
this.BindingContext = this;
}
private void OnTapCommand(ProductStatus obj)
{
var product = obj;
product.Active = !obj.Active;
}
public List<ProductStatus> getProducts()
{
return new List<ProductStatus>
{
new ProductStatus { Id="P13", Name = "Product X", Active = false },
new ProductStatus { Id="P17", Name = "Product Y", Active = false },
new ProductStatus { Id="P21", Name = "Product Z", Active = true },
};
}
}
public class ProductStatus :INotifyPropertyChanged
{
public string Id { get; set; }
public string Name { get; set; }
private bool active;
public bool Active {
set
{
active = value;
OnPropertyChanged("Active");
}
get
{
return active;
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
in your xaml (set x:Name to your contentpage,then binding its command):
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Name="root"
x:Class="EntryCa.MainPage">
<ContentPage.Content>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout BindableLayout.ItemsSource="{Binding ProductList}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" Spacing="1" Padding="20">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.TapCommand,Source ={x:Reference root} }"
CommandParameter="{Binding .}"></TapGestureRecognizer>
</StackLayout.GestureRecognizers>
<StackLayout.Style>
<Style TargetType="StackLayout">
<Style.Triggers>
<DataTrigger Binding="{Binding Active}" Value="true" TargetType="StackLayout">
<Setter Property="BackgroundColor" Value="#f0f0f0"/>
</DataTrigger>
<DataTrigger Binding="{Binding Active}" Value="false" TargetType="StackLayout">
<Setter Property="BackgroundColor" Value="Transparent"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackLayout.Style>
<Label Text="{Binding Name}"/>
<Label HorizontalOptions="EndAndExpand">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding Active}" Value="true" TargetType="Label">
<Setter Property="TextColor" Value="Green"/>
<Setter Property="Text" Value="A"/>
</DataTrigger>
<DataTrigger Binding="{Binding Active}" Value="false" TargetType="Label">
<Setter Property="TextColor" Value="Red"/>
<Setter Property="Text" Value="I"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<Button Text="Save"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
the effect like: