Problem binding gradient background color uwp

Question

Im trying to bind a gradients to variables in a uwp app. Y tried binding it with a background and there was zero problem. But when I tried to binding it to the gradient in the xaml it looks trasnparent. Any idea why?

Here is in the xaml

<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                            <GradientStop Color="{Binding Gradient0}" Offset="0" />
                                            <GradientStop Color="{Binding Gradient1}" Offset="0.210" />
                                            <GradientStop Color="{Binding Gradient2}" Offset="0.760" />
                                            <GradientStop Color="{Binding Gradient3}" Offset="0.900" />
                                        </LinearGradientBrush>

These are my variables:

private Brush Gradient0;
public Brush Gradient0 { get => Gradient0; set { Gradient0 = value; NotifyPropertyChanged(nameof(Gradient0)); } }

private Brush Gradient1;
public Brush Gradient1{ get => Gradient1; set { Gradient1= value; NotifyPropertyChanged(nameof(Gradient1)); } }

private Brush Gradient2;
public Brush Gradient2{ get => Gradient2; set { Gradient2 = value; NotifyPropertyChanged(nameof(Gradient2)); } }

private Brush Gradient3;
public Brush Gradient3{ get => Gradient3; set { Gradient3= value; NotifyPropertyChanged(nameof(Gradient3)); } }

I tried using the some of the gradients brushes as a flat background color and it worked, but as a gradient it doesn´t

This is how the button looks with the gradient binded

This is how it looks if I use Gradient0 value as binded background color

Answer 1

Problem binding gradient background color uwp

During the testing, the problem is the Color property can't be set Brush directly, you need replace the type of Gradient with Color for the ViewModdel class.

For Example

public class HomeViewModel : INotifyPropertyChanged
{
    private Color _gradient0;
    public Color Gradient0 { get => _gradient0; set { _gradient0 = value; NotifyPropertyChanged(nameof(Gradient0)); } }

    private Color _gradient1;
    public Color Gradient1 { get => _gradient1; set { _gradient1 = value; NotifyPropertyChanged(nameof(Gradient1)); } }

    private Color _gradient2;
    public Color Gradient2 { get => _gradient2; set { _gradient2 = value; NotifyPropertyChanged(nameof(Gradient2)); } }

    private Color _gradient3;

    public Color Gradient3 { get => _gradient3; set { _gradient3 = value; NotifyPropertyChanged(nameof(Gradient3)); } }
    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

}

Usgae

public HomePage()
{
    this.InitializeComponent();
    //var viewmodel = new HomeViewModel()
    //{
    //    Gradient0 = new SolidColorBrush(Colors.Red),
    //    Gradient1 = new SolidColorBrush(Colors.LightBlue),
    //    Gradient2 = new SolidColorBrush(Colors.LightCyan),
    //    Gradient3 = new SolidColorBrush(Colors.Beige)
    //};

    var viewmodel = new HomeViewModel()
    {
        Gradient0 = Colors.Red,
        Gradient1 = Colors.LightBlue,
        Gradient2 = Colors.LightCyan,
        Gradient3 = Colors.Beige
    };

    this.DataContext = viewmodel;
}