Question

Here’s what i’ve tried so far to achieve gradient background in a listbox item (List) depending on a int value of a databinded object

My object in its simplified form:

public class Item {
 public string name { get; set; }
 public string address { get; set; }
 public int highlight { get; set; }
}

Converter Attempt:

Using this Converter:

public class BusinessTypeToBackgroundConverter : IValueConverter
{
    private static readonly LinearGradientBrush NormalBkg = new LinearGradientBrush
    {
        StartPoint = new Point(0, 0),
        EndPoint = new Point(0, 1),
        GradientStops = new GradientStopCollection
                            {
                                new GradientStop {Color = Util.GetColorFromHex("#4ce6e6e6")},
                                new GradientStop {Color = Util.GetColorFromHex("#ffe6e6e6")}
                            }
    };

    private static readonly LinearGradientBrush HighlightedBkg = new LinearGradientBrush
    {
        StartPoint = new Point(0, 0),
        EndPoint = new Point(0, 1),
        GradientStops = new GradientStopCollection
                                                {
                                                    new GradientStop {Color = Util.GetColorFromHex("#4cffffcc")},
                                                    new GradientStop {Color = Util.GetColorFromHex("#ffffffcc")}
                                                }
    };

    public object Convert(object value, Type targetType,
                    object parameter, CultureInfo culture)
    {
        switch ((int)value)
        {
            case 1:
                return HighlightedBkg;
            case 2:
                return NormalBkg;
            default:
                return NormalBkg;
        }
    }

    public object ConvertBack(object value, Type targetType,
                              object parameter, CultureInfo culture)
    {
        throw new NotImplementedException("BusinessTypeToBackgroundConverter ConvertBack Method Not Implemented");
    }
}

And this Item template

<ListBox                     
Name="lstResults" 
ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
<ListBox.ItemTemplate>
    <DataTemplate>                           
        <Grid Background="{Binding highlight, Converter={StaticResource myConverter}}">
            <StackPanel>
                <TextBlock Text="{Binding name}" TextWrapping="Wrap" FontSize="24" FontWeight="Bold" Foreground="Black"/>
                <TextBlock Text="{Binding address}" TextWrapping="Wrap" FontSize="24" Foreground="Black" />
            </StackPanel>
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Code Behind Attempt

Added a “LinearGradientBrush background” property to my Item object

public LinearGradientBrush background
{
    get
    {
        if (highlight == 1) return HighlightedBkg;
        else return NormalBkg;
    }
}

In both cases only the Start color of the Gradient is applied to the listItem (Grid Background). So i end up with a solid color 🙂

Is there anyway to set the background ti a gradient from code and not using the XAML notation:

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
    <GradientStopCollection>
        <GradientStop Color="#ff444444" Offset="0" />
        <GradientStop Color="#ff000000" Offset="1" />
    </GradientStopCollection>
</LinearGradientBrush>

Answer 1

The problem is that when you specify your Gradient stops in code you are not specifying the offset.

However I would suggest the you not avoid Xaml for a solution. First read this blog: A Generic Boolean Value Converter. I would also suggest that your Hightlight property ought to be a bool type not an int.

By including the converter code from the blog in your project you should be in a position to do something like this:-

<Grid x:Name="LayoutRoot">
   <Grid.Resources>
       <local:BoolToBrushConverter x:Key="Highlighter">
            <local:BoolToBrushConverter.TrueValue>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                  <GradientStopCollection>
                <GradientStop Color="#4cffffcc" Offset="0" />
                <GradientStop Color="#ffffffcc" Offset="1" />
                  </GradientStopCollection>
                 </LinearGradientBrush>
            </local:BoolToBrushConverter.TrueValue>
            <local:BoolToBrushConverter.FalseValue>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                  <GradientStopCollection>
                <GradientStop Color="#4ce6e6e6" Offset="0" />
                <GradientStop Color="#ffe6e6e6" Offset="1" />
                  </GradientStopCollection>
                 </LinearGradientBrush>
            </local:BoolToBrushConverter.FalseValue>
       </local:BoolToBrushConverter>
   </Grid.Resources>

<ListBox                     
Name="lstResults" 
ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
<ListBox.ItemTemplate>
    <DataTemplate>                           
        <Grid Background="{Binding highlight, Converter={StaticResource Highlighter}}">
            <StackPanel>
                <TextBlock Text="{Binding name}" TextWrapping="Wrap" FontSize="24" FontWeight="Bold" Foreground="Black"/>
                <TextBlock Text="{Binding address}" TextWrapping="Wrap" FontSize="24" Foreground="Black" />
            </StackPanel>
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>
</ListBox> 

Not only does this approach allow you to keep the visual description in the more familiar Xaml fashion, its much more flexiable and resuable.