从 ListViewItem 单击 UWP 按钮

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 内的按钮时，我希望在主页内触发一个不同的事件。

想法是点击一个项目select它，但是当我点击项目里面的按钮时，我希望那个项目被删除。

我有哪些选择？

Answer 1

如果看起来是在不使用视图模型的情况下执行此操作，那么您可以向 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

The idea is to click on an item to select it, but when I click the button inside the item, I want that item to be removed.

更好的方法是将按钮命令属性绑定到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>

从 ListViewItem 单击 UWP 按钮

UWP Button click from ListViewItem

c#

xaml

user-controls

uwp