UWP按钮从ListViewItem单击

Question

我真的希望有更多经验的人能给我一些指导。

我对UWP项目具有以下设置：

• 在我的应用程序页面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

如果看起来像是在不使用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);
}

Answer 2

想法是单击一个项目以将其选中，但是当我单击该项目内的按钮时，我希望将该项目删除。

更好的方法是将按钮命令属性与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代码

请注意，我们需要将当前焦点listview的项目参数传递给命令方法，并将其从数据源中删除。

<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>