Question

我有一个列表视图，它使用可观察的集合绑定值。 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"，我想将按钮的背景色更改为红色并隐藏图像按钮。

Answer 1

对于按钮，您需要一个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();
    }
}

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

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

Answer 2

这是另一种解决方案-纯XAML编写。除了提到的行为，这也可以通过 VisualStateManager 完成：

<ListView ItemsSource="{x:Bind ShopList}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:ShopItem">
            <UserControl>
                <Button Click="Button_Click">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="AvailableStates">
                            <VisualState x:Name="Default"/>
                            <VisualState x:Name="Available">
                                <VisualState.Setters>
                                    <Setter Target="ItemGrid.Background" Value="Green"/>
                                    <Setter Target="ItemImage.Source" Value="/Assets/Tick.png"/>
                                </VisualState.Setters>
                                <VisualState.StateTriggers>
                                    <StateTrigger IsActive="{x:Bind IsBookAvailable, Mode=OneWay}"/>
                                </VisualState.StateTriggers>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="ItemGrid">
                        <TextBlock Foreground="Black" FontWeight="Bold" Text="{x:Bind Title}"/>
                        <Image x:Name="ItemImage" Source="/Assets/NotAvailable.png" Stretch="None" />
                    </Grid>
                </Button>
            </UserControl>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

添加了点击以进行一些测试：

private void Button_Click(object sender, RoutedEventArgs e)
{
    var shopItem = (e.OriginalSource as FrameworkElement).DataContext as ShopItem;
    shopItem.IsBookAvailable = !shopItem.IsBookAvailable;
}

您可以check at GitHub的整个示例。

如何根据绑定值更改Listview项目的图像-UWP

2 个答案: