xaml - 更改 ListView 项目的颜色并删除项目 UWP

Question

我会删除 ListView 项目中带有按钮的项目，并使用 ListView 项目中的另一个按钮更改椭圆的颜色。

类产品代码:

class Product
{
    public string Name { get; set; }
    public double Price { get; set; }
}

xaml主页代码:

<Page
x:Class="ListViewTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ListViewTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Loaded="Page_Loaded">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView x:Name="ListViewProducts" 
            ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
            ScrollViewer.VerticalScrollBarVisibility="Auto"
            FontSize="18" 
            BorderThickness="0" 
            Width="600" 
            Height="800" 
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            ItemsSource="{Binding LineItems}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="10">
                    <Grid HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0">
                        <Ellipse x:Name="EllipseColor" HorizontalAlignment="Left" Height="20" Stroke="Black" VerticalAlignment="Top" Width="20" StrokeThickness="1"/>
                    </Grid>
                    <TextBlock Text="{Binding Name}" Margin="5,0,0,0"/>
                    <TextBlock Text="{Binding Price}" Margin="5,0,0,0"/>
                    <Button x:Name="btnRemove" Click="btnRemove_Click" Height="20" Width="60" Margin="5"/>
                    <Button x:Name="btnChangeColor" Click="btnChangeColor_Click" Height="20" Width="60" Margin="5"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

主页面背后的代码:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private void Page_Loaded(object sender, RoutedEventArgs e)
    {
        ObservableCollection<Product> _listProduct = new ObservableCollection<Product>();
        _listProduct = new ObservableCollection<Product>
        {
            new Product
            {
                Name = "Phone",
                Price = 100
            },
            new Product
            {
                Name = "TV",
                Price = 120
            },
            new Product
            {
                Name = "Computer",
                Price = 80
            },
            new Product
            {
                Name = "Laptop",
                Price = 250
            },
            new Product
            {
                Name = "Tablet",
                Price = 150
            },
            new Product
            {
                Name = "Monitor",
                Price = 200
            },
        };
        ListViewProducts.ItemsSource = _listProduct;
    }

    private void btnRemove_Click(object sender, RoutedEventArgs e)
    {
        // Code to remove item
    }

    private void btnChangeColor_Click(object sender, RoutedEventArgs e)
    {
        // Code to color EllipseColor
    }
}

使用 btnRemove 我会删除 ListView 项目，使用 btnChangeColor 我会把 EllipseColor 的填充颜色涂成红色，在 btnChangeColor_Click 中我会把项目的索引。

提前致谢。

Answer 1

在我看来，您遇到了几个问题。首先是您通过绑定(bind)到一个显然不存在的集合来设置您的 ListView 源，以及在 C# 中设置它。您应该将其移动到使用适当的绑定(bind)。例如，在 MainPage.xaml.cs 中:

private ObservableCollection<Product> _products = new ObservableCollection<Product>();
public ObservableCollection<Product> Products { get => _products; set => _products = value; }

然后绑定(bind)到它:

<ListView ItemsSource={x:Bind Products, Mode=OneWay} />

然后，在 btnRemove_Click 中，您可以从集合中删除该项目:

var product = (sender as Button).DataContext as Product;
Products.Remove(product);

至于为 Ellipse 着色，您实际上不应该在 C# 中这样做。相反，您的 Product 类应该有一个 Status 属性，然后更改该属性。

首先，您需要确保您的属性更改会发出火灾通知。

public class Product : INotifyPropertyChanged
{
    private string _status;
    public string Status
    {
        get => _status;
        set
        {
            _status = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Status)));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

然后更改属性。

var product = (sender as Button).DataContext as Product;
product.Status = "invalid";

然后在您的 XAML 中，使用绑定(bind)转换器根据状态更改 Ellipse 的 Fill 属性。例如

using System;
using Windows.UI;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Media;

public class StatusConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language) =>
        new SolidColorBrush(value.ToString() == "invalid" ? Colors.Red : Colors.Gray);

    public object ConvertBack(object value, Type targetType, object parameter, string language) => 
        throw new NotImplementedException();
}

然后您需要将转换器添加到您的资源中。

<Page...>
    <Page.Resources>
        <locationofyourconverter:StatusConverter x:Key="StatusConverter" />
    </Page.Resources>

    ...

    <Ellipse Fill={Binding Status, Mode=OneWay, Converter={StaticResource StatusConverter}} />