Mixing
How to change the image of listview item based on bind value - UWP
How to change the image of listview item based on bind value - UWP
I have a listview which bind values using observable collection. listview contains a button with image and text. Based on the text value I want to change the background color of button and also need to change the source of image. How can I achieve this?
<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>
If the value of IsBooksAvailable="Yes", I want to change the background color of button to green and source of image to /Assets/booksAvailable.png. And if the value of IsBooksAvailable="No" I want to change the background color of button to red and hide the image button.
IsBooksAvailable="Yes"
/Assets/booksAvailable.png
IsBooksAvailable="No"
2 Answers
2
For the button, you need an IValueConverter. It should look like this:
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();
}
}
Bind the color property of the button to the IsBooksAvailable with this converter.
For the Image, you can do the same, bind the Source property to the text field and, if necessary, use a converter to adjust the text to a correct path.
But I would prefer storing the images in a byte property in the ObservableCollection and use a ByteArrayToImageConverter.
what is (bool)value) here? how can I check the Text Yes or No?
– nsds
2 days ago
You bind the background property of the button to IsBooksAvailable. That makes no sense because a bool cannot be a brush. So we use a converter. In the convert method the value is the value you bind to, in this case IsBooksAvailable. value is an object, so we have to cast it to a bool. And then we return green if true and red if false. This is what the button in xaml should look like: <Button Background="{Binding IsBooksAvailable,UpdateSourceTrigger=PropertyChanged,Converter={StaticResource BoolToColorConverter}}"/> But mind that you have to define the converter in the resources of the xaml
– Mr.Sheep
2 days ago
In my case Yes or No is not boolean.they are string values. In the place of "if ((bool)value)" I want to check if that equals to "Yes" / "No"
– nsds
2 days ago
Oh, sorry i was assuming it was a bool. So you only have to cast to a string and write: if((string)value == "Yes"). The rest of the converter can be the same, but i reccomend to catch null and a string which is not "yes" or "no"
– Mr.Sheep
2 days ago
Here is other solution - made pure in XAML. Apart from mentioned Behaviors this can also be done with 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>
Added click for some testing:
private void Button_Click(object sender, RoutedEventArgs e)
{
var shopItem = (e.OriginalSource as FrameworkElement).DataContext as ShopItem;
shopItem.IsBookAvailable = !shopItem.IsBookAvailable;
}
The whole sample you can check at GitHub.
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Hi nsds: have a look there => github.com/Microsoft/XamlBehaviors/wiki/DataTriggerBehavior
– thezapper
2 days ago