时间戳

首页 > 解决方案 > 数据绑定到列表视图内部的命令在 UWP/MVVM-Light 中不起作用

c# - 数据绑定到列表视图内部的命令在 UWP/MVVM-Light 中不起作用

问题描述

我想为我的每个元素都有一个删除按钮ListView，我搜索了stackoverflow，但没有人回答我的问题。

我尝试在里面给出我的ListView a x:Name="QuizListView"和使用来将命令绑定到按钮。ElementNameListView

QuizOverview.xaml

<Page
    x:Name="QuizOverviewPage"
    x:Class="UwpApp.View.QuizOverview"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UwpApp.View"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    DataContext="{Binding QuizOverviewInstance, Source={StaticResource Locator}}">

    <StackPanel Margin="20">
        <TextBlock Text="Quizzen" FontSize="48"/>
        <ListView x:Name="QuizListView" ItemsSource="{Binding Quizzes}" Margin="0,20" SelectionMode="Single" SelectionChanged="QuizListView_SelectionChanged">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ListViewItem>
                        <StackPanel Orientation="Horizontal">
                            <Border CornerRadius="10" BorderBrush="Black" BorderThickness="2" Height="100" Width="400" VerticalAlignment="Center">
                                <TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="36"></TextBlock>
                            </Border>
                            <Button VerticalAlignment="Center" Padding="20" Margin="20">Edit</Button>
                            <Button VerticalAlignment="Center" Padding="20" Margin="0" Command="{Binding Path=DataContext.DeleteQuizCommand, ElementName=QuizListView}" CommandParameter="{Binding}">Delete</Button>
                        </StackPanel>
                    </ListViewItem>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Button Padding="20" Command="{Binding CreateQuizCommand}">Add New Quiz</Button>
    </StackPanel>
</Page>

QuizOverviewViewModel.cs

    public class QuizOverviewViewModel : ViewModelBase
    {
        public string Title { get; set; }
        public ObservableCollection<Quiz> Quizzes { get; set; }

        public RelayCommand<Quiz> DeleteQuizCommand { get; set; }

        public RelayCommand CreateQuizCommand { get; set; } 

        public QuizOverviewViewModel()
        {
            Title = "Quizzen";
            Quizzes = new ObservableCollection<Quiz> { new Quiz(1, "Test Quiz 1"), new Quiz(2, "Test Quiz 2"), new Quiz(3, "Test Quiz 3") };

            DeleteQuizCommand = new RelayCommand<Quiz>(DeleteQuiz);
            CreateQuizCommand = new RelayCommand(CreateQuizTest);
        }   

        public void DeleteQuiz(Quiz quiz)
        {
            Quizzes.Remove(Quizzes.Single(i => i.Id == quiz.Id));
        }

        public void CreateQuizTest()
        {
            Quizzes.Add(new Quiz(4, "Test Quiz Creation!"));
        }
    }

测验.cs

namespace UwpApp.Model
{
    public class Quiz
    {
        public long Id { get; set; }
        public string Name { get; set; }

        public Quiz(long id, string name)
        {
            Id = id;
            Name = name;
        }
    }
}

Button 对我当前的代码没有任何作用，而命令在ListView.

标签： c#mvvmuwpmvvm-light

解决方案

数据绑定到列表视图内部的命令在 UWP/MVVM-Light 中不起作用

问题是您插入ListViewItem到DataTemplate. 这将导致ListViewItem包含sub-ListViewItem在可视树中，并且您无法使用DataContext按钮中的元素名称正确访问。请ListViewItem从您的代码中删除。

<DataTemplate>
    <StackPanel Orientation="Horizontal">
        <Border CornerRadius="10" BorderBrush="Black" BorderThickness="2" Height="100" Width="400" VerticalAlignment="Center">
            <TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="36"></TextBlock>
        </Border>
        <Button VerticalAlignment="Center" Padding="20" Margin="20">Edit</Button>
        <Button VerticalAlignment="Center" Padding="20" Margin="0" Command="{Binding Path=DataContext.DeleteQuizCommand, ElementName=QuizListView}" CommandParameter="{Binding}">Delete</Button>
    </StackPanel>
</DataTemplate>

推荐阅读