从项目中的按钮获取列表视图中项目的索引
本文关键字:项目 视图 索引 列表 按钮 获取 | 更新日期: 2023-09-27 18:10:31
我正在编写一个通用应用程序,我希望它使用新的"汉堡包"样式菜单。为了填充我为应用程序创建的汉堡包菜单,我使用了一个目前托管在Azure上的JSON数据源。我可以很好地下载数据,将其放置在ObservableCollection中,并绑定它-但是我需要汉堡包菜单中的按钮来知道它在单击时的列表视图的位置(索引)。
我使用一个RelayCommand绑定到ListView来处理它的按钮点击动作。
My Page's XAML
x:Class="IOTLightsUniversal.MainPage"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:IOTLightsUniversal"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
RequestedTheme="Dark"
Name="MPage">
<Page.Resources>
<MenuFlyout x:Key="FlyoutBase1"/>
</Page.Resources>
<SplitView x:Name="MainSplitView" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="225">
<SplitView.Pane>
<StackPanel Background="Gray" Name="Root">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Command="{Binding HamburgerListItemCommand}" Click="HamburgerButton_Click"/>
<ListView Padding="-12,0,0,0" x:Name="HamburgerList" Foreground="White" SelectionChanged="HamburgerList_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate x:Name="HamburgerItemTemplate">
<StackPanel Orientation="Horizontal" Padding="0">
<Button Margin="-0,0,0,0" FontFamily="Segoe MDL2 Assets" Command="{Binding ElementName=Root, Path=DataContext.HamburgerListItemCommand}" Content="" Width="50" Height="50" Background="Transparent" x:Name="HamburgerButton" />
<TextBlock x:Name="HamburgerText" Text="{Binding DeviceName}" FontSize="18" Foreground="Black" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<Grid>
<TextBlock Text="SplitView Content" FontSize="54" Foreground="Black"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="" FontFamily="Segoe MDL2 Assets" Foreground="Black" FontSize="54"/>
</Grid>
</SplitView.Content>
</SplitView>
My Page's . xml .cs codebehind
public sealed partial class MainPage : Page
{
private NavigationHelper navigationHelper;
public ObservableCollection<AzureDataItem> DefaultViewModel = new ObservableCollection<AzureDataItem>();
public MainPage()
{
this.InitializeComponent();
HamburgerListItemCommand = new RelayCommand(HamburgerListButtonClick); //new RelayCommand(this.HamburgerListButtonClick);
}
public MainPage(Frame frame)
{
this.InitializeComponent();
MainSplitView.Content = frame;
(MainSplitView.Content as Frame).Navigate(typeof(MicPage));
getData();
HamburgerListItemCommand = new RelayCommand(this.HamburgerListButtonClick);
HamburgerList.ItemsSource = DefaultViewModel;
}
private async void getData()
{
var AzureDataItems = await AzureDataSource.GetDataItemsAsync();
foreach (AzureDataItem adi in AzureDataItems)
{
DefaultViewModel.Add(adi);
}
}
private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
MainSplitView.IsPaneOpen = !MainSplitView.IsPaneOpen;
}
private void HamburgerListButtonClick()
{
/*What should I put here?*/
}
public ICommand HamburgerListItemCommand
{
get;
private set;
}
}
到目前为止,我已经尝试了第二个代码片段在这里:在一个ListView包含按钮,如何获得点击一个的索引?,但是如果。parent调用得到的是按钮的父类StackPanel而不是ListView,那么它就不起作用了。
提前感谢任何解决方案/建议!
您可以使用"parameterized"命令并为按钮指定CommandParameter属性。
<Button Margin="-0,0,0,0"
FontFamily="Segoe MDL2 Assets"
Command="{Binding ElementName=Root, Path=DataContext.HamburgerListItemCommand}"
CommandParameter="{Binding}"
Content=""
Width="50"
Height="50"
Background="Transparent"
x:Name="HamburgerButton" />
如您所见,我已经将CommandParameter属性绑定到当前的DataContext。
和在你的Main类中:
public MainPage() {
this.InitializeComponent();
HamburgerListItemCommand = new Command<object>(HamburgerListButtonClick);
}
private void HamburgerListButtonClick(object parameter) {
AzureDataItem item = parameter as AzureDataItem;
// Now you have access to the clicked item
int index = DefaultViewModel.IndexOf(item);
}
如您所见,我使用了一个Command类,因为我无法访问您使用的RelyCommand的源,并且现在不知道它是否接受参数。下面是Command类的源代码:
class Command : ICommand {
public event EventHandler CanExecuteChanged;
private Action action;
private bool canExecute = true;
public Command(Action action, bool canExecute = true) {
if (action == null) {
throw new ArgumentNullException("action");
}
this.action = action;
this.canExecute = canExecute;
}
internal bool CanExecuteInternal {
get {
return this.canExecute;
}
set {
if (this.canExecute != value) {
this.canExecute = value;
this.OnCanExecuteChanged(EventArgs.Empty);
}
}
}
public bool CanExecute(object parameter) {
return this.canExecute;
}
public void Execute(object parameter) {
this.action();
}
private void OnCanExecuteChanged(EventArgs e) {
if (this.CanExecuteChanged != null) {
this.CanExecuteChanged(this, e);
}
}
}
class Command<T> : ICommand {
public event EventHandler CanExecuteChanged;
private Action<T> action;
private bool canExecute = true;
public Command(Action<T> action, bool canExecute = true) {
if (action == null) {
throw new ArgumentNullException("action");
}
this.action = action;
this.canExecute = canExecute;
}
internal bool CanExecuteInternal {
get {
return this.canExecute;
}
set {
if (this.canExecute != value) {
this.canExecute = value;
this.OnCanExecuteChanged(EventArgs.Empty);
}
}
}
public bool CanExecute(object parameter) {
return this.canExecute;
}
public void Execute(object parameter) {
this.action((T)parameter);
}
private void OnCanExecuteChanged(EventArgs e) {
if (this.CanExecuteChanged != null) {
this.CanExecuteChanged(this, e);
}
}
}