WPF Linear Fill

Question

Hi,

I have found some example code that creates a gradient fill in a WPF rectangle control:

<Rectangle Height="{Binding ElementName=txtName}" Width="{Binding ElementName=txtName}">
                            <Rectangle.Fill>
                                <LinearGradientBrush>
                                    <GradientStop Color="Silver" Offset="0.0" />
                                    <GradientStop Color="Black" Offset="0.5" />
                                    <GradientStop Color="white" Offset="1.0" />
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle> 

I have some written some code that displays a collection of ListBox's that contain details from MyObject:

<UserControl.Resources>
        <DataTemplate x:Key="CustomerTemplate">
            <Border BorderThickness="2" BorderBrush="Silver" CornerRadius="5" Padding="1" Height="50">
                <Grid x:Name="thisGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <StackPanel Orientation="Horizontal" >
                                <Image Source="C:\MyImage.jpg" Height="50" Width="100" ></Image>
                    </StackPanel>
                    <Border Grid.Column="1" Margin="0" Padding="0">
                            <StackPanel Orientation="Vertical">
                            <TextBlock Name="txtName" Text="{Binding Name}" Background="Silver" Foreground="Black" FontSize="16" FontWeight="Bold" Height="25"/>
                        </StackPanel>
                    </Border>

                </Grid>
            </Border>
        </DataTemplate>
</UserControl.Resources>
    <ListBox ItemsSource="{Binding}" ItemTemplate="{StaticResource CustomerTemplate}" 
                 Name="grdList" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >

    </ListBox>

I would like to apply the same stlye of fill that i get with the first example, in each of my ListBox's. I can't quite figure out how to do this. Can anyone help?

Thanks

Answer 1

Have you looked at setting the background fill of the item containers using the ItemContainerStyle property of ListBox?

Answer 2

Since you can change ControlTemplate of your ListBox like in the example here http://msdn.microsoft.com/en-us/library/ms754242(VS.85).aspx, you can write something like this

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
  <Page.Resources>
  <Style x:Key="{x:Type ListBox}" TargetType="ListBox">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListBox">
        <Border 
          Name="Border" 
          BorderThickness="1"
          CornerRadius="20" Style="{DynamicResource DynamicGridBrush}">         
          <ScrollViewer Margin="0" Focusable="false">
            <StackPanel Margin="2" IsItemsHost="True" />
          </ScrollViewer>
        </Border>        
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
<Style TargetType="Border" x:Key="DynamicGridBrush">
    <Setter Property="Background">
      <Setter.Value>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <GradientStop Offset="0" Color="LightBlue" />
          <GradientStop Offset="0.65" Color="LightGreen" />
          <GradientStop Offset="1" Color="White" />
        </LinearGradientBrush>
      </Setter.Value>      
    </Setter>
  </Style></Page.Resources>
  <Grid>  
    <ListBox>      
      <TextBlock>aaa</TextBlock>
      <TextBlock>bbb</TextBlock>
      <TextBlock>ccc</TextBlock>
    </ListBox>
  </Grid>
</Page>

If I understood your question and you would like to apply gradient background to your whole listbox.