CODEWITHSUNDEEP
wpfmvvm-light
Yogesh
Yogesh

Reputation: 849

Change Button Background color through MVVM pattern in WPF

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

Upvotes: 25

Views: 40454

Answers (3)

demoncrate
demoncrate

Reputation: 390

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>

Upvotes: 0

almog.ori
almog.ori

Reputation: 7889

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.

Upvotes: 36

brunnerh
brunnerh

Reputation: 185445

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.

Upvotes: 31

Related Questions