Question

I am looking for a way to set a gradientbrush as the background for a listbox item. I have a DataTemplate defined and have specified a gradient brush but it always appears as the listbox background (i.e. it never shows as a gradient brush).

I have been able to set the background of the listbox itself, and I can set the listboxitem’s background to a standard color using the “setter” object….but none of these are what I am after.

I really want the background on each list item to be a gradient brush.

Below is the datatemplate that I have constructed.

<ListBox Name="MyListBox"  Margin="12,67,12,169">

        <ListBox.ItemTemplate>
        <DataTemplate>
                <Grid Height="51"  VerticalAlignment="Bottom">
                    <Grid.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFC9F4D0"/>
                            <GradientStop Color="#FF2AC12A" Offset="0.333"/>
                            <GradientStop Color="#FF35DE35" Offset="1"/>
                        </LinearGradientBrush>
                    </Grid.Background>
                    <Canvas >
                        <dataInput:Label Width="227" Foreground="Yellow" Canvas.Left="158" Canvas.Top="8" Content="{Binding Place}"/>
                        <dataInput:Label Width="146" Foreground="Yellow" Canvas.Left="8" Canvas.Top="8" Content="{Binding Date}"/>
                        <dataInput:Label Content="{Binding People}" Width="346" FontSize="9.333" Foreground="Black" Canvas.Left="166" Canvas.Top="28"/>
                        <!-- <dataInput:Label Width="45" Content="Accept" Foreground="White" Canvas.Left="8" Canvas.Top="28"/>
                        <dataInput:Label Width="45" Content="Decline" Foreground="White" Canvas.Left="57" Canvas.Top="28"/> -->
                        <dataInput:Label Content="SomeText" Width="101" FontSize="9.333" Foreground="White" Canvas.Left="389" Canvas.Top="10"/>
                        <Image Height="21" Width="21" Canvas.Left="500" Canvas.Top="8" Source="Green Button.png"/>
                    </Canvas>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Any Thoughts?

Answer 1

What is happening in your data template:

The background of the grid is being set to the color you need. However on top of this Grid, your Canvas is getting painted. Hence the linear gradient background is invisible.

How to correct this?

1. Set Canvas.Background={Binding}
2. For which ever control within the canvas that you wish to inherit the Grid.Background to, set that control’s Background={Binding}

Sample Code:

</Grid.ColumnDefinitions>–>

                    <Canvas Background="{Binding}">

                        <TextBox Width="227" Canvas.Left="158" Canvas.Top="8" Foreground="Yellow" Text="{Binding Name}" Background="{Binding}"/>
                        <TextBox Width="146" Canvas.Left="8" Canvas.Top="8" Foreground="Yellow" Text="{Binding Language}" Background="{Binding}"/>

                    </Canvas>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Hope this helps!