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

Hamlen

Answer 1

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.

Crowboot

This is a really nice way to do this when using wpf, if you looking for code that can port to silverlight you may also require the expression SDK for the trigger symantics though – Pannonia

Answer 2

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.

Pannonia

Wouldnt you need to add the Coverter Key to resources? – Chaker

Why is a boolean property being used instead of a ColorToBrushConverter? – Andriaandriana

@Andriaandriana keeping it as a boolean on the viewmodel hides specific UI knowledge of wpf from the viewmodel which promotes testability so you can run the viewmodel headless if need be in test and check its functionality, you can also port this to other stacks quite easily too ( perhaps the same viewmodel in blazor ) there are other reasons but i havent had enough coffee atm to remember them – Pannonia

Answer 3

I would use a Color Property and in the Setter convert the Color to a Brush.

private SolidColorBrush _penBrush;
public SolidColorBrush PenBrush { get { return _penBrush; } set { SetPropertyChanged(ref _penBrush, value, "PenBrush"); } }

private Color _penColor;
public Color PenColor { get { return _penColor; } set { SetPropertyChanged(ref _penColor, value, "PenColor"); PenBrush = new SolidColorBrush(_penColor); } }

With the following XAML Code:

<Button Background="{Binding PenBrush}"></Button>

Andriaandriana