Sonic Master
Sonic Master

Reputation: 1248

Different background on each Listbox item

I have a Listbox containing item binding on my table that consist of 5 columns (idStory, title, created, textStory, and feeling).

<ListBox x:Name="MainListBox" Height="418" SelectionChanged="MainListBox_SelectionChanged">
<ListBox.ItemTemplate>
    <DataTemplate>
        <StackPanel x:Name="listPanel" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,5,0,0">
            <Rectangle Width="100" Height="100" Fill="#e34d64" />
            <StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0,0,0">
                <TextBlock Text="{Binding Title}" FontSize="26" Foreground="Black"/>
                <TextBlock Text="{Binding Created}" FontSize="20" Foreground="Black"/>
                <TextBlock Text="{Binding TextStory}" FontSize="20" Foreground="Black" FontStyle="Italic"/>
            </StackPanel>
            <toolkit:ContextMenuService.ContextMenu>
                <toolkit:ContextMenu>
                    <toolkit:MenuItem x:Name="menuEdit" Header="Edit Story" Click="menuEdit_Click"/>
                    <toolkit:MenuItem x:Name="menuDelete" Header="Delete Story" Click="menuDelete_Click"/>
                </toolkit:ContextMenu>
            </toolkit:ContextMenuService.ContextMenu>
        </StackPanel>
    </DataTemplate>
</ListBox.ItemTemplate>

It works well, but i want to change the background on each item depends on column feeling. For example if we get string "sad" then the listbox item will have blue as a background like this https://i.sstatic.net/hWNtQ.jpg

What should i do for making it real? Any help would be greatly appreciated. Thank you.

Upvotes: 1

Views: 154

Answers (1)

Romasz
Romasz

Reputation: 29792

For your purpose I would propose binding Background of your TextBox (or maybe better whole StackPanel - your choice) to Feeling property with a Converter:

<TextBlock Text="{Binding Title}" FontSize="26" Foreground="Black" Background={Binding Feeling, Converter={StaticResource TxtToBrush}}/>

You will have to add key to your Converter somewhere in the Resources:

xmlns:conv="clr-namespace:Yournamespace"
<conv:TextToBrush x:Key="TxtToBrush"/>

And the Converter can look like this:

public class TextToBrush : IValueConverter
{
    List<Tuple<string, Brush>> textBrush = new List<Tuple<string, Brush>>()
    {
        new Tuple<string, Brush>("sad", new SolidColorBrush(Colors.Blue))
    };

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value == null)
            return new SolidColorBrush(Colors.Transparent);
        else
        {
            foreach (Tuple<string,Brush> item in textBrush)
                if ((value as string) == item.Item1) return item.Item2 as Brush;
        }
        return new SolidColorBrush(Colors.Transparent);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

And of course your Property BGColor should raise OnPropertyChanged (your item class should impement INotifyPropertyChanged).

Upvotes: 2

Related Questions