In universal Windows applications, how to change the background color of a button using xaml and data binding if the property in the view model changes

Question

Universal Windows applications do not support data triggers.

Without data triggers, how to change the background color of a button using xaml and data binding only when a boolean property in the view model changes?

For example, given this XAML:

<StackPanel> <Button Name="ButtonA" Click="ButtonA_Click" Content="A" /> <Button Name="ButtonB" Click="ButtonB_Click" Content="B" /> <Button Name="ButtonC" Click="ButtonC_Click" Content="C" /> </StackPanel> 

with this code for

 private void ButtonA_Click(object sender, RoutedEventArgs e) { Model.IsOnA = !Model.IsOnA; } private void ButtonB_Click(object sender, RoutedEventArgs e) { Model.IsOnB = !Model.IsOnB; } private void ButtonC_Click(object sender, RoutedEventArgs e) { Model.IsOnC = !Model.IsOnC; } 

What is the best approach for changing the background color of buttons using data binding when changing the corresponding property in the view model?

I managed to get it to work with one button only with the help of the VisualStateManager manager:

 <VisualStateManager.VisualStateGroups> <VisualStateGroup> <VisualState> <VisualState.StateTriggers> <StateTrigger IsActive="{x:Bind Model.IsOnA, Mode=OneWay}" /> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="ButtonA.Background" Value="Red"></Setter> <Setter Target="ButtonA.Foreground" Value="White"></Setter> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> 

But with a few buttons that are associated with different properties in the view model, this approach does not work.

Answer 1

You can check my previous answer at the following link. Remove button in ListView items

You just need to create a converter that converts Boolean to SolidColorBrush. For instance:

 public class BooleanToColorConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { return (value is bool && (bool)value) ? new SolidColorBrush(Colors.Red) : new SolidColorBrush(Colors.Green); } public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new Exception("Not Implemented"); } } 

And add it to your Xaml Binding.

 <Page.Resources> <local:BooleanToColorConverter x:Key="ColorConverter"/> </Page.Resources> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <ListView ItemsSource="{x:Bind Activities}"> <ListView.ItemTemplate> <DataTemplate x:DataType="local:Activity"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="3*"/> <ColumnDefinition Width="1*"/> </Grid.ColumnDefinitions> <TextBlock x:Name="txt" Text="{x:Bind Name}" Grid.Column="0"/> <Button x:Name="delItem" Click="delItem_Click" Grid.Column="1" Foreground="{x:Bind Visible, Mode=OneWay, Converter={StaticResource ColorConverter}}" Background="Transparent" Margin="100, 0, 0, 0"> <SymbolIcon Symbol="Delete"/> </Button> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView> </Grid> 

Hope this helps.

Answer 2

An alternative to converters is the connection properties. Useful if you need to change several properties or access the view model (via the DataContext of the control) to decide how to change the properties of the user interface.

Here is a simple example:

 public class IsFavoriteBehavior { public static bool GetIsFavorite(DependencyObject obj) { return (bool)obj.GetValue(IsFavoriteProperty); } public static void SetIsFavorite(DependencyObject obj, bool value) { obj.SetValue(IsFavoriteProperty, value); } public static readonly DependencyProperty IsFavoriteProperty = DependencyProperty.RegisterAttached("IsFavorite", typeof(bool), typeof(Button), new PropertyMetadata(false, (o, e) => { var button = o as Button; if (button == null) return; if ((bool)e.NewValue) { button.Background = (SolidColorBrush)Application.Current.Resources["HighlightBackgroundColorBrush"]; button.Foreground = (SolidColorBrush)Application.Current.Resources["HighlightTextColorBrush"]; } else { button.Background = (SolidColorBrush)Application.Current.Resources["NormalBackgroundColorBrush"]; button.Foreground = (SolidColorBrush)Application.Current.Resources["NormalTextColorBrush"]; } o.SetValue(IsFavoriteProperty, e.NewValue); })); } 

It can be used in XAML:

 <Button Name="FavoriteButton" Content="Favorite" local:IsFavoriteBehavior.IsFavorite="{x:Bind ViewModel.Favorite, Mode=OneWay}" > 

Answer 3

You can put a property with a background color brush directly into the view model.

For example, in a view model:

 SolidColorBrush IsOnABackground { get { if(IsOnA) return (SolidColorBrush)Application.Current.Resources["HighlightBackgroundColorBrush"]; else return (SolidColorBrush)Application.Current.Resources["NormalBackgroundColorBrush"]; } } bool isOnA = false; bool IsOnA { set { if (isOnA != value) { isOnA = value; OnPropertyChanged("IsOnA"); OnPropertyChanged("IsOnABackground"); } } get { return isOnA; } } 

and in XAML:

 <Button Name="ButtonA" Content="A" Background="{x:Bind ViewModel.IsOnABackground, Mode=OneWay}" />