Windows Phone 8 : LongListMultiSelector dynamic GroupHeader Color

Question

i'm currently using a LongListMultiSelector from the WPToolkit and i try to change the color of each GroupHeader depending of the GroupHeader Key (name displayed).

Currently my list show items grouped by market name for example: Target and Wal-mart.

I'm using this HeaderTemplate

        <!--GroupHeaderTemplate-->
    <DataTemplate x:Key="GroupHeaderTemplate">
        <Border Background="Transparent" Margin="0,0,0,10">
            <StackPanel Background="Transparent" HorizontalAlignment="Stretch">
                <TextBlock Text="{Binding Key}" Foreground="#FF1B3A70" FontSize="48"  FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                <Rectangle Fill="{Binding HeaderColor}" Height="3"/><!--Fill="#FF5876AA"-->
            </StackPanel>
        </Border>
    </DataTemplate>

and what I wish to do, is to change the rectangle fill color and the foreground color.

For example Wal-mart could have a blue rectangle and Target could have a red one.

Thanks in advance !

Answer 1

Crete a value converter returning a color by the given group header key. Bind the Rectangle Fill and TextBlock Foreground properties to "Key" and use the converter. There will be something like:

<DataTemplate x:Key="GroupHeaderTemplate">
    <Border Background="Transparent" Margin="0,0,0,10">
        <StackPanel Background="Transparent" HorizontalAlignment="Stretch">
            <TextBlock Text="{Binding Key}" Foreground="{Binding Key, Converter={StaticResource MY_FOREGROUND_CONVERTER}}" FontSize="48"  FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Rectangle Fill="{Binding Key, Converter={StaticResource MY_FILL_CONVERTER}}" Height="3"/>
        </StackPanel>
    </Border>
</DataTemplate>