Silverlight Dynamic Background (using gradient) on Border

Question

I'm a fairly experienced .NET desktop developer, but I'm new to Silverlight. I'm trying to convert an iOS application to a Silverlight app.

The app is basically a list of items that are built using data pulled from a database. This data includes a large number of label texts as well as foreground and background color information. Each object is its own user control. It consists of a Border control (for background coloring and rounded edges) with a Grid inside. All of my label controls (TextBlocks) are inside of the Grid.

Each of these color values (foreground and background) come out of the database as a comma-delimited string (i.e., "{r},{g},{b}").

So, I convert those values to actual color objects in code. Then, I set the foreground property of my labels to this color.

All of this (label text assignments and foreground color) is working very well. What's NOT working is converting the background color into a linear gradient brush. I'm currently using the color from the database as a "base" color and calculating a 4-color gradient from this color. (The numbers aren't important, but I adjust the RGB values to 1.4, 1.2, 0.8 and 0.6 of the base color).

Here's the code to create the custom linear gradient brush:

Friend Function CalculateColorsFromBaseColor(ByVal baseColor As Color) As List(Of Color)
    Dim retList As New List(Of Color)
    Dim r As Byte = baseColor.R
    Dim g As Byte = baseColor.G
    Dim b As Byte = baseColor.B
    retList.Add(New Color With {.R = If(r * 1.4 > 255, 255, r * 1.4), .G = If(g * 1.4 > 255, 255, g * 1.4), .B = If(b * 1.4 > 255, 255, b * 1.4)})
    retList.Add(New Color With {.R = If(r * 1.2 > 255, 255, r * 1.2), .G = If(g * 1.2 > 255, 255, g * 1.2), .B = If(b * 1.2 > 255, 255, b * 1.2)})
    retList.Add(New Color With {.R = If(r * 0.8 > 255, 255, r * 0.8), .G = If(g * 0.8 > 255, 255, g * 0.8), .B = If(b * 0.8 > 255, 255, b * 0.8)})
    retList.Add(New Color With {.R = If(r * 0.6 > 255, 255, r * 0.6), .G = If(g * 0.6 > 255, 255, g * 0.6), .B = If(b * 0.6 > 255, 255, b * 0.6)})
    Return retList
End Function

Friend Function CalculateLinearGradientBrushFromBaseColor(ByVal baseColor As Color) As LinearGradientBrush
    Dim lgb As New LinearGradientBrush With {.StartPoint = New Point(0.5, 0), .EndPoint = New Point(0.5, 1)}
    Dim colors As List(Of Color) = CalculateColorsFromBaseColor(baseColor)
    lgb.GradientStops.Add(New GradientStop With {.Color = colors.Item(0), .Offset = 0.0})
    lgb.GradientStops.Add(New GradientStop With {.Color = colors.Item(1), .Offset = 0.5})
    lgb.GradientStops.Add(New GradientStop With {.Color = colors.Item(2), .Offset = 0.5})
    lgb.GradientStops.Add(New GradientStop With {.Color = colors.Item(3), .Offset = 1.0})
    Return lgb
End Function

Here's the code for how I'm trying to incorporate this at runtime:

Dim backColorString As String = iCase.CaseColor
Dim backColorRGB As String() = backColorString.Split(",")
Dim backColor As Color = Color.FromArgb(255, CInt(backColorRGB(0)), CInt(backColorRGB(1)), CInt(backColorRGB(2)))
caseCell.BackgroundBorder.Background = caseCell.CalculateLinearGradientBrushFromBaseColor(backColor)

When I set a background gradient manually in XAML at design-time, it appears correctly. When I try to do it from the code-behind, it appears that I get no background at all. (When the overall page's background is white, so is the color of my user control. When black, it's black. So, it appears that the background of the user control ends up transparent.)

Trying to debug this, I've added the following code around my background assignment:

'' Trying to see what the background values are prior to setting it
For Each iStop As GradientStop In CType(caseCell.BackgroundBorder.Background, LinearGradientBrush).GradientStops
    MessageBox.Show(String.Format("iStop Color: ({0},{1},{2})", iStop.Color.R, iStop.Color.G, iStop.Color.B))
Next
'' Setting the background
caseCell.BackgroundBorder.Background = caseCell.CalculateLinearGradientBrushFromBaseColor(backColor)
'' Checking the values after setting
For Each iStop As GradientStop In CType(caseCell.BackgroundBorder.Background, LinearGradientBrush).GradientStops
    MessageBox.Show(String.Format("iStop Color: ({0},{1},{2})", iStop.Color.R, iStop.Color.G, iStop.Color.B))
Next

All of the message box results are as expected, but still, I get no background gradient. Anybody have any idea what's going on?

Thanks!

Answer 1

STUPID, STUPID, STUPID!!!!!

So, apparently, by not setting the alpha values here:

Friend Function CalculateColorsFromBaseColor(ByVal baseColor As Color) As List(Of Color)
    Dim retList As New List(Of Color)
    Dim r As Byte = baseColor.R
    Dim g As Byte = baseColor.G
    Dim b As Byte = baseColor.B
    retList.Add(New Color With {.R = If(r * 1.4 > 255, 255, r * 1.4), .G = If(g * 1.4 > 255, 255, g * 1.4), .B = If(b * 1.4 > 255, 255, b * 1.4)})
    retList.Add(New Color With {.R = If(r * 1.2 > 255, 255, r * 1.2), .G = If(g * 1.2 > 255, 255, g * 1.2), .B = If(b * 1.2 > 255, 255, b * 1.2)})
    retList.Add(New Color With {.R = If(r * 0.8 > 255, 255, r * 0.8), .G = If(g * 0.8 > 255, 255, g * 0.8), .B = If(b * 0.8 > 255, 255, b * 0.8)})
    retList.Add(New Color With {.R = If(r * 0.6 > 255, 255, r * 0.6), .G = If(g * 0.6 > 255, 255, g * 0.6), .B = If(b * 0.6 > 255, 255, b * 0.6)})
    Return retList
End Function

I was making transparent colors.

STUPID, STUPID, STUPID!!! Here's the working code:

Friend Function CalculateColorsFromBaseColor(ByVal baseColor As Color) As List(Of Color)
    Dim retList As New List(Of Color)
    Dim r As Byte = baseColor.R
    Dim g As Byte = baseColor.G
    Dim b As Byte = baseColor.B
    retList.Add(New Color With {.A = 255, .R = If(r * 1.4 > 255, 255, r * 1.4), .G = If(g * 1.4 > 255, 255, g * 1.4), .B = If(b * 1.4 > 255, 255, b * 1.4)})
    retList.Add(New Color With {.A = 255, .R = If(r * 1.2 > 255, 255, r * 1.2), .G = If(g * 1.2 > 255, 255, g * 1.2), .B = If(b * 1.2 > 255, 255, b * 1.2)})
    retList.Add(New Color With {.A = 255, .R = If(r * 0.8 > 255, 255, r * 0.8), .G = If(g * 0.8 > 255, 255, g * 0.8), .B = If(b * 0.8 > 255, 255, b * 0.8)})
    retList.Add(New Color With {.A = 255, .R = If(r * 0.6 > 255, 255, r * 0.6), .G = If(g * 0.6 > 255, 255, g * 0.6), .B = If(b * 0.6 > 255, 255, b * 0.6)})
    Return retList
End Function