What is wrong with this code here that the Background color is not working?

Question

i created a custom Info Card control with linear gradient colors, everything works nice, but when i use it in other places on my project the Background2 color of the linear gradient colors doesn't display Here is my XAML Code:

``

<UserControl x:Class="MyWPFApp.Custom_Controls.InfoCard"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp"
             mc:Ignorable="d" Name="infoCardf" d:DesignHeight="125" d:DesignWidth="250">

    <Border>
        <Border.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,2">
                <GradientStop Color="{Binding Path=Background1, ElementName=infoCardf}" Offset="0"/>
                <GradientStop Color="{Binding Path=Background2, ElementName=infoCardf}" Offset="1"/>
            </LinearGradientBrush>
        </Border.Background>

        <Border.Clip>
            <RectangleGeometry RadiusX="10" RadiusY="10" Rect="0 0 200 100"/>
        </Border.Clip>

        <Grid>
            <Ellipse Width="150" Height="150" Margin="-70,-50,0,0" HorizontalAlignment="Left"  VerticalAlignment="Top">
                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
                        <GradientStop Color="{Binding Path=EllipseBackground1, ElementName=infoCardf}" Offset="0"/>
                        <GradientStop Color="{Binding Path=EllipseBackground2, ElementName=infoCardf}" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>

            <fa:IconImage Margin="10,40,10,20" HorizontalAlignment="Left" VerticalAlignment="Top" Icon="{Binding Path=Icon, ElementName=infoCardf}" Width="40" Height="40" Foreground="#ffffff"/>

            <StackPanel Margin="120,25,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"  Width="100" Height="50">
                <TextBlock Text="{Binding Path=Title, ElementName=infoCardf}" Foreground="#e9e9e9" FontSize="14"/>
                <TextBlock Text="{Binding Path=Number, ElementName=infoCardf}" Foreground="#ffffff" FontSize="24" FontWeight="SemiBold"/>
            </StackPanel>
        </Grid>
    </Border>
</UserControl>

``

and Here is My Code Behind:

``

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace MyWPFApp.Custom_Controls
{
    public partial class InfoCard : UserControl
    {
        public InfoCard()
        {
            InitializeComponent();
        }

        #region Title
        public string Title
        {
            get { return (string)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }

        public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(string), typeof(InfoCard));
        #endregion

        #region Number
        public string Number
        {
            get { return (string)GetValue(NumberProperty); }
            set { SetValue(NumberProperty, value); }
        }

        public static readonly DependencyProperty NumberProperty = DependencyProperty.Register("Number", typeof(string), typeof(InfoCard));
        #endregion

        #region Icon
        public FontAwesome.Sharp.IconChar Icon
        {
            get { return (FontAwesome.Sharp.IconChar)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }

        public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(FontAwesome.Sharp.IconChar), typeof(InfoCard));
        #endregion

        #region Background1
        public Color Background1
        {
            get { return (Color)GetValue(Background1Property); }
            set { SetValue(Background1Property, value); }
        }

        public static readonly DependencyProperty Background1Property = DependencyProperty.Register("Background1", typeof(Color), typeof(InfoCard));
        #endregion

        #region Background2
        public Color Background2
        {
            get { return (Color)GetValue(Background2Property); }
            set { SetValue(Background2Property, value); }
        }

        public static readonly DependencyProperty Background2Property = DependencyProperty.Register("Background2", typeof(Color), typeof(InfoCard));
        #endregion

        #region EllipseBackground1
        public Color EllipseBackground1
        {
            get { return (Color)GetValue(EllipseBackground1Property); }
            set { SetValue(EllipseBackground1Property, value); }
        }

        public static readonly DependencyProperty EllipseBackground1Property = DependencyProperty.Register("EllipseBackground1", typeof(Color), typeof(InfoCard));
        #endregion

        #region EllipseBackground2
        public Color EllipseBackground2
        {
            get { return (Color)GetValue(EllipseBackground2Property); }
            set { SetValue(EllipseBackground2Property, value); }
        }

        public static readonly DependencyProperty EllipseBackground2Property = DependencyProperty.Register("EllipseBackground2", typeof(Color), typeof(InfoCard));
        #endregion


    }
}

``

Answer 1

Hi,@Mesh Ka. I think it needs to be sized. The controls in the UserControl are all set in size, and the Border is not set in size, which is consistent with the size of the UserControl. LinearGradientBrush is the background of Border, and Border does not display the set size. Background2 has a display color, but its color range is larger than that of the control when the size is not set, and it is where you cannot see it.

Method1:

<UserControl x:Class="StyleClickedButton.UcHome"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:StyleClickedButton"
              xmlns:card="clr-namespace:StyleClickedButton.Custom_Controls"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <card:InfoCard Title="Test" Number="1000" Width="200" Height="120" Background1="red" Background2="Blue" 
                       EllipseBackground1="BlueViolet" EllipseBackground2="LightGreen"
                       Icon="Briefcase"/>

    </Grid>
</UserControl>

Method2:

<UserControl x:Class="StyleClickedButton.UcHome"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:StyleClickedButton"
              xmlns:card="clr-namespace:StyleClickedButton.Custom_Controls"
             mc:Ignorable="d" 
             d:DesignHeight="100" d:DesignWidth="200">
    <Grid>
        <!--<Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>-->

        <card:InfoCard Title="Test" Number="1000" Background1="red" Background2="Blue" 
                       EllipseBackground1="BlueViolet" EllipseBackground2="LightGreen"
                       Icon="Briefcase"/>

    </Grid>
</UserControl>

The result:

If no size is set for the UserControl, the UserControl's size will match the parent control's size. You could click on the UserControl(local:UcHome/) in the xaml code to check its actual size in the designer

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.