UWP Нажатие кнопки из ListViewItem

Question

Я действительно надеюсь, что кто-то с большим опытом может дать мне несколько указателей.

У меня есть следующие настройки для проекта UWP:

• A ListView объявлено в XAML на странице моего приложения, Tubes.xaml:

  <ListView Name="TubesGrid"
                ItemsSource="{x:Bind TubeItems, Mode=TwoWay}"
                ItemTemplateSelector="{StaticResource TubeTemplateSelector}"
                IsItemClickEnabled="True"
                ItemClick="TubesGrid_ItemClick"
                SelectionChanged="TubesGrid_SelectionChanged">
  

• A UserControl в качестве шаблона для ListViewItem (UserControl.Resources):

  <local:TubeTemplateSelector x:Key="TubeTemplateSelector"
                              TubeTemplate="{StaticResource TubeTemplate}">
  </local:TubeTemplateSelector>
  <DataTemplate x:Key="TubeTemplate" x:DataType="data:Tube">
      <local:TubeTemplate HorizontalAlignment="Stretch" VerticalAlignment="Stretch" FavoritesNumber="{x:Bind SpaceLength, Mode=OneWay}"></local:TubeTemplate>
  </DataTemplate> 
  

• Внутри TubeTemplate У меня есть кнопка, кроме других видов:

  <Button Name="RemoveTube"
          Click="RemoveTube_Click"
      <Image
              Source="../Assets/xIcon.png"
              Stretch="None">
      </Image>
  </Button>
  

• Чего я пытаюсь достичь:

  1. Когда я нажимаю ListViewItem, я хочу, чтобы событие ItemClick было запущено. Это работает.
  2. Но когда я нажимаю кнопку, которая находится внутри ListViewItem, я хочу, чтобы на главной странице было запущено другое событие.

Идея состоит в том, чтобы щелкнуть элемент, чтобы выбрать его, но когда я нажимаю кнопку внутри элемента, я хочу, чтобы этот элемент был удален.

Какие у меня варианты?

Answer 1

Идея состоит в том, чтобы щелкнуть элемент, чтобы выбрать его, но когда я нажимаю кнопку внутри элемента, я хочу, чтобы этот элемент был удален.

Лучший способ - это привязка Свойство кнопки button с методом команды MainPage, и обработать источник данных в коде позади. Вы можете сослаться на следующий код.

Код позади

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        MakeDataSource();
        this.InitializeComponent();
        DataContext = this;

    }
    public ObservableCollection<string> Items { get; set; }

    private void MakeDataSource()
    {
        Items = new ObservableCollection<string>() { "Nico","CCor","Jack"};

    }
    public ICommand BtnCommand
    {
        get
        {
            return new CommadEventHandler<object>((s) => BtnClick(s));
        }
    }

    private void BtnClick(object s)
    {
        Items.Remove(s as string);
    }
}
public class CommadEventHandler<T> : ICommand
{
    public event EventHandler CanExecuteChanged;

    public Action<T> action;
    public bool CanExecute(object parameter)
    {
        return true;
    }

    public void Execute(object parameter)
    {
        this.action((T)parameter);
    }
    public CommadEventHandler(Action<T> action)
    {
        this.action = action;

    }
}

Код Xaml

Обратите внимание, что нам нужен проходной ток Сконцентрируйте параметр элемента списка просмотра на методе команды и удалите его из источника данных.

<Grid HorizontalAlignment="Stretch" x:Name="RootGrid">
    <ListView ItemsSource="{Binding Items}" x:Name="MyListView">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid  HorizontalAlignment="Stretch">
                    <TextBlock Text="{Binding}" VerticalAlignment="Center"/>
                    <Button HorizontalAlignment="Right" 
                            Margin="0,0,30,0" 
                            Content="Favorite" 
                            Command="{Binding ElementName=MyListView,Path=DataContext.BtnCommand}" 
                            CommandParameter="{Binding}"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

Answer 2

Если похоже, что вы делаете это без использования viewmodels, то вы можете добавить событие в элемент управления TubeTemplate.

 public event EventHandler Closed;

Когда нажата кнопка закрытия, вы запустите событие.

private void RemoveTube_Click(object sender, RoutedEventArgs e)
{
    Closed?.Invoke(this, EventArgs.Empty); // Even better would be to give the item clicked (the data context)
}

Затем из главной страницы вы можете подписаться на событие.

<local:TubeTemplate HorizontalAlignment="Stretch" 
                    VerticalAlignment="Stretch" 
                    Closed="TubeTemplate_Closed">

</local:TubeTemplate>

В методе TubeTemplate_Closed вы можете удалить элемент, по которому щелкнули.

private void TubeTemplate_Closed(object sender, EventArgs e)
{
    var element = (FrameworkElement)sender;
    var tube = (Tube)element.DataContext;

    TubeItems.Remove(tube);
}