时间戳

首页 > 解决方案 > 如何根据绑定值更改列表视图项的图像 - UWP

c# - 如何根据绑定值更改列表视图项的图像 - UWP

问题描述

我有一个使用可观察集合绑定值的列表视图。listview 包含一个带有图像和文本的按钮。根据文本值我想改变按钮的背景颜色，还需要改变图像的来源。我怎样才能做到这一点？

<ListView ItemsSource="{x:Bind ShopArray}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:CurrentShopList2">
            <Button Background="Green" >
                <Grid>
                    <TextBlock Foreground="Black" FontWeight="Bold" Text="{x:Bind IsBooksAvailable}"/>
                    <Image  Source="/Assets/booksAvailable.png" Stretch="None" />
                </Grid>
            </Button>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

如果值为IsBooksAvailable="Yes"，我想将按钮的背景颜色更改为绿色，将图像源更改为 /Assets/booksAvailable.png。如果IsBooksAvailable="No"我想将按钮的背景颜色更改为红色并隐藏图像按钮。

标签： c#xamllistviewuwp

解决方案

对于按钮，您需要一个 IValueConverter。它应该如下所示：

public class BoolToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {

           if ((bool)value)            
               return new SolidColorBrush(Color.FromArgb(255, 0, 255, 0));
           else
               return new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));
    }

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

使用此转换器将按钮的颜色属性绑定到 IsBooksAvailable。

对于图像，您可以执行相同的操作，将 Source 属性绑定到文本字段，并在必要时使用转换器将文本调整为正确的路径。但我更喜欢将图像存储在 ObservableCollection 的 byte[] 属性中，并使用 ByteArrayToImageConverter。

推荐阅读