Change Button Background color through MVVM pattern in WPF

Question

I am using MVVM light with WPF. I want to set button background color based on some specific condition through ViewModel. Kindly suggest some way to get it. Thanks

Answer 1

You could bind the control's Background to a property on the viewmodel, the trick is to use an IValueConverter to return a Brush with the color you require. Here's an example that converts a boolean value from the viewmodel to a color:

public class BoolToBrushConverter : IValueConverter {     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)     {         if (value == null)             return Brushes.Transparent;          return Convert.ToBoolean(value)             ? Brushes.Red             : Brushes.Transparent;      }      public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)     {         throw new NotImplementedException();     } } 

with a binding expression like

"{Binding Reviewed, Converter={StaticResource BoolToBrushConverter}}" 

where Reviewed is your boolean viewmodel property.

Answer 2

Using triggers:

<Button>     <Button.Style>         <Style TargetType="Button">             <!-- Set the default value here (if any).                   If you set it directly on the button that will override the trigger. -->             <Setter Property="Background" Value="LightGreen" />             <Style.Triggers>                 <DataTrigger Binding="{Binding SomeConditionalProperty}"                              Value="True">                     <Setter Property="Background" Value="Pink" />                 </DataTrigger>             </Style.Triggers>         </Style>     </Button.Style> </Button> 

Explanation of the comment.

---

Using a dependent property in a view model (MVVM):

public bool SomeConditionalProperty  {     get { /*...*/ }     set     {         //...          OnPropertyChanged(nameof(SomeConditionalProperty));         //Because Background is dependent on this property.         OnPropertyChanged(nameof(Background));     } }  public Brush Background =>     SomeConditionalProperty ? Brushes.Pink : Brushes.LightGreen; 

Then you just bind to Background.