C# ListBox, different background for each item

Question

I have ListBox in xaml:

  <ListBox Name="feedListBox" Height="758" HorizontalAlignment="Center" Margin="0,10,0,0" VerticalAlignment="Top" Width="480" ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionChanged="feedListBox_SelectionChanged" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Background="White">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel VerticalAlignment="Top" Width="480">
                    <TextBlock FontWeight="Bold" FontSize="24" Name="feedTitle" TextWrapping="Wrap" Margin="12,0,0,0" HorizontalAlignment="Left" Foreground="#FF000000" Text="{Binding Title.Text, Converter={StaticResource RssTextTrimmer}}" />
                    <TextBlock Name="feedSummary" Foreground="#FF000000" TextWrapping="Wrap" Margin="12,0,0,0" Text="{Binding Summary.Text, Converter={StaticResource RssTextTrimmer}}" />
                    <TextBlock Name="feedPubDate" Foreground="#FF939393" Margin="12,0,10,10" Text="{Binding PublishDate.DateTime}" HorizontalAlignment="Right" />
                    <Border BorderThickness="1" Height="2" HorizontalAlignment="Center" VerticalAlignment="Top" Width="480" BorderBrush="Black" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
  </ListBox>

How can I specify different background for each item?

have you managed to solve this? If so please mark the answer that helped you most as accepted answer. — user1859022, Jul 21 '14 at 11:50

score 2 · Answer 1 · edited May 23 '17 at 11:50

2

add a Brush property to your viewmodel and bind the controls in your DataTemplate to it

ViewModel:

using System.ComponentModel;
using System.Windows.Media;
...
public class YourViewModel : INotifyPropertyChanged{
    ...
    private Brush _backgroundCol = Brushes.Red; //Default color
    public Brush BackgroundCol
    {
        get { return _backgroundCol; }
        set 
        {
            _backgroundCol = value;
            OnPropertyChanged("BackgroundCol");
        }
    }
    ...
}

xaml:

<TextBlock Name="feedPubDate" Background="{Binding Path=BackgroundCol}" />

for Information about how to implement the INotifyPropertyChanged interface have a look at: Implementing INotifyPropertyChanged - does a better way exist?

edited May 23 '17 at 11:50

Community

1
1

answered Jul 16 '14 at 13:59

user1859022

2,585
1
21
33

specifying a different colour for each item the brush property probably wants to be a get, set property – JKennedy Jul 16 '14 at 14:22
@user1 good point - I have updated my code sample to reflect your suggestions – user1859022 Jul 17 '14 at 06:22

score 0 · Answer 2 · answered Jul 17 '14 at 05:23

Try this:

XAML:

            <ListBox Name="feedListBox" Height="758" HorizontalAlignment="Center" Margin="0,10,0,0" VerticalAlignment="Top" Width="480" ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionChanged="feedListBox_SelectionChanged" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Background="White">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel VerticalAlignment="Top" Width="480">
                            <Grid Background="{Binding feedTitleBack}">
                                <TextBlock FontWeight="Bold" FontSize="24" Name="feedTitle" TextWrapping="Wrap" Margin="12,0,0,0" HorizontalAlignment="Left" Foreground="#FF000000" Text="{Binding Title}"/>
                            </Grid>
                            <Grid Background="{Binding feedSummaryBack}">
                                <TextBlock Name="feedSummary" Foreground="#FF000000" TextWrapping="Wrap" Margin="12,0,0,0" Text="{Binding Summary}" />
                            </Grid>
                            <Grid Background="{Binding feedPubDateBack}">
                                <TextBlock Name="feedPubDate" Foreground="#FF939393" Margin="12,0,10,10" Text="{Binding PublishDate}" HorizontalAlignment="Right" />
                            </Grid>
                            <Border BorderThickness="1" Height="2" HorizontalAlignment="Center" VerticalAlignment="Top" Width="480" BorderBrush="Black" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

CS:

public class data
{
    public string Title { get; set; }
    public string feedTitleBack { get; set; }
    public string Summary { get; set; }
    public string feedSummaryBack { get; set; }
    public string PublishDate { get; set; }
    public string feedPubDateBack { get; set; }

    public data() { }
    public data(string Title, string feedTitleBack, string Summary, string feedSummaryBack, string PublishDate, string feedPubDateBack)
    {
        this.Title = Title;
        this.feedTitleBack = feedTitleBack;
        this.Summary = Summary;
        this.feedSummaryBack = feedSummaryBack;
        this.PublishDate = PublishDate;
        this.feedPubDateBack = feedPubDateBack;
    }
}

    void loadData()
    {
        List<data> obj = new List<data>();
        obj.Add(new data("Title1", "Red", "Summary1", "Green", "Date", "Blue"));
        obj.Add(new data("Title1", "#DD4B39", "Summary1", "#006621", "Date", "#1A0DAB"));
        feedListBox.ItemsSource = obj;
    }

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    loadData();
}

C# ListBox, different background for each item

2 Answers2