Как изменить изображение элемента списка в зависимости от значения привязки - UWP

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

Вот другое решение - сделано чисто в 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;
}

Весь образец вы можете проверить на GitHub .

Answer 2

Для кнопки вам нужен 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 к текстовому полю и, при необходимости, использовать конвертер для корректировки текста по правильному пути. Но я бы предпочел хранить изображения в свойстве byte [] в ObservableCollection и использовать ByteArrayToImageConverter.