How to delete a ListView Item by a function in UserControl Template?

Question

I am Developing windows 10 Universal app with c#. I have a UserControl that is the MyListview item template. Listview will Bind the data. In userControl,there is a button for Delete the usercontrol DependencyProperty Content(contain string Text, Name and int Id ).

Listview show the text of object and the button for remove it.

Now how can remove that item from my List by click on remove Button?

Update

my Data class:

class Data
    {
        public int Id { get; set; }
        public string Text { get; set; }
    }

my usercontrol.cs :

public Data Content
{
     get { return (Data)GetValue(ContentProperty); }
     set { SetValue(ContentProperty, value); }
}

// Using a DependencyProperty as the backing store for Content.  This enables animation, styling, binding, etc...
 public static readonly DependencyProperty ContentProperty =
            DependencyProperty.Register("Content", typeof(Data), typeof(MyUserControl1), new PropertyMetadata(null));

usercontrol xaml:

<StackPanel>
    <TextBlock x:Name="textBlock" Text="{Binding Content.Text, ElementName=textBlock}" />
    <Button Click="Remove_Click"/>
</StackPanel>

my list implementing:

<Page.Resources>
      <DataTemplate x:Key="ListViewTemplate">
          <local:MyUserControl1 Content="{Binding}"/>
      </DataTemplate>
</Page.Resources>
<Grid>
   <ListView x:Name="ListView" ItemTemplate="{StaticResource ListViewTemplate}" />
</Grid>

and in the code behinde the Page I use an ObservableCollection<Data> items = new ObservableCollection<Data>();to set Listview.ItemsSource to it.

The main Problem is How to remove that item from the items in MyUsercontrol1

Answer 1

You wrote about binding so I'm assuming that in your XAML there is a following code or similar:

<ListView ItemSource = "{Bind SomeCollection"} ... />

If I'm right there is no much to do. If SomeCollection is of type ObservableCollection<T> it is enough to remove an item from SomeCollection and UI will be refreshed ''automatically''. To sum up:

1. Declare SomeCollection as ObservableCollection<T>.
2. In a command that is executed when Delete button is clicked (or in an event handler) simply call ObservableCollection<T>.Remove.

UPDATE

This code is not elegant but shows an idea. Firstly we need to modify Data class:

public class Data
{
    public int Id { get; set; }
    public string Text { get; set; }
    public Action<Data> OnRemoveCallback { get; set; }

    public void OnRemove()
    {
        OnRemoveCallback(this);
    }
}

OnRemoveCallback will be used to inform ListView that a given data element should be removed. Remove_click handler in MyUserControl simply executes OnRemove:

private void Remove_Click(object sender, RoutedEventArgs e)
{
    Content.OnRemove();
}

Finally, in the code behind of your Page we have to define a logic that will be responsible for actual removing data items from the list:

public void Remove(Data d)
{
    ((ObservableCollection<Data>) ListView.ItemsSource).Remove(d);
}

...

ListView.ItemsSource = new ObservableCollection<Data>()
{
    new Data() {Id = 1, Text = "1", OnRemoveCallback = Remove},
    new Data() {Id = 2, Text = "2", OnRemoveCallback = Remove}
};

Now your Page will be informed whenever Delete button is pressed and will do a job.

As I said it is not a perfect solution. Personally, I'll use MVVM pattern. Thanks do that XAML and C# will be seperated.