Delete button in ListView items

Question

I'm starting to develop for UWP. I am trying to create a ListView populated with x:bind . Now I want to create a button for all the individual elements to delete them. Something like Windows 10 Mail:

I created this:

 <ListView x:Name="listActivity" ItemsSource="{x:Bind list}" Grid.Column="0" Header="Activity List" HorizontalAlignment="Center" Width="auto" IsItemClickEnabled="True" ItemClick="showDel"> <ListView.ItemTemplate> <DataTemplate x:DataType="vm:Activity"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="3*"/> <ColumnDefinition Width="1*"/> </Grid.ColumnDefinitions> <TextBlock x:Name="txt" Text="{x:Bind name}" Grid.Column="0"/> <Button x:Name="delItem" Click="delActivity" Grid.Column="1" Visibility="Collapsed" Background="Transparent" Margin="100, 0, 0, 0"> <SymbolIcon Symbol="Delete"/> </Button> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView> 

I want to change the visibility delItem button, but from C # I cannot call it using set Name. How can i do this?

Answer 1

I recommend performing this operation using binding.

a) Add a new Activity visible property to your class

 public class Activity : INotifyPropertyChanged { public string Name { get; set; } private bool _visible; public bool Visible { get { return _visible; } set { _visible = value; RaisePropertyChanged("Visible"); } } public event PropertyChangedEventHandler PropertyChanged; protected void RaisePropertyChanged(string name) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(name)); } } } 

b) Declare also a new class for converting boolean to visibility

 public class BooleanToVisibilityConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { return (value is bool && (bool)value) ? Visibility.Visible : Visibility.Collapsed; } public object ConvertBack(object value, Type targetType, object parameter, string language) { return value is Visibility && (Visibility)value == Visibility.Visible; } } 

c) Finally, update your binding. Remember to set up OneWay mode.

 <Page.Resources> <local:BooleanToVisibilityConverter x:Key="VisibilityConverter"/> </Page.Resources> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <ListView ItemsSource="{x:Bind Activities}"> <ListView.ItemTemplate> <DataTemplate x:DataType="local:Activity"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="3*"/> <ColumnDefinition Width="1*"/> </Grid.ColumnDefinitions> <TextBlock x:Name="txt" Text="{x:Bind Name}" Grid.Column="0"/> <Button x:Name="delItem" Click="delItem_Click" Grid.Column="1" Visibility="{x:Bind Visible, Mode=OneWay, Converter={StaticResource VisibilityConverter}}" Background="Transparent" Margin="100, 0, 0, 0"> <SymbolIcon Symbol="Delete"/> </Button> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView> </Grid> 

Now you can access Visibility or your control directly using code. The full code below is for reference.

 using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; namespace App1 { public sealed partial class MainPage : Page { public List<Activity> Activities { get; set; } public MainPage() { this.InitializeComponent(); Activities = new List<Activity>(); Activities.Add(new Activity { Name = "Activity1", Visible = true }); Activities.Add(new Activity { Name = "Activity2", Visible = false }); } private void delItem_Click(object sender, RoutedEventArgs e) { Activities.First().Visible = false; } } public class BooleanToVisibilityConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { return (value is bool && (bool)value) ? Visibility.Visible : Visibility.Collapsed; } public object ConvertBack(object value, Type targetType, object parameter, string language) { return value is Visibility && (Visibility)value == Visibility.Visible; } } public class Activity : INotifyPropertyChanged { public string Name { get; set; } private bool _visible; public bool Visible { get { return _visible; } set { _visible = value; RaisePropertyChanged("Visible"); } } public event PropertyChangedEventHandler PropertyChanged; protected void RaisePropertyChanged(string name) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(name)); } } } }