从ListViewItem单击UWP按钮

Question

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

我有以下UWP项目的设置：

• 在我的应用程序页面内的XAML中声明的ListView，Tubes.xaml:

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

• 作为ListViewItem(UserControl.Resources(:的模板的UserControl

  <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

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

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

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