Windows Store Apps: Grid View Group Binding background color?

Question

I have a grid view with a CollectionViewSource as it's items source.

I want to to bind the background property of each group container panel so that each group has its own background color.

how can this be achieved?

I'm trying to use binding in the <GroupStyle.ContainerStyle> of the gridview but can't get it to work.

Answer 1

OK, here's what I've got. I had to modify the template of the Group Container Style:

<GroupStyle.ContainerStyle>
                            <Style TargetType="GroupItem">
                                <Setter Property="IsTabStop" Value="False" />
                                <Setter Property="Margin" Value="10,0,0,0" />
                                <Setter Property="Padding" Value="20"/>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="GroupItem">
                                            <Border Background="{Binding Group, Converter={StaticResource ThemeColorConverter}}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                                                <Grid>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="Auto" />
                                                        <RowDefinition Height="*" />
                                                    </Grid.RowDefinitions>
                                                    <ContentControl x:Name="HeaderContent"
                                        Content="{TemplateBinding Content}"
                                        ContentTransitions="{TemplateBinding ContentTransitions}"
                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                        ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                        Margin="{TemplateBinding Padding}"
                                        TabIndex="0"
                                        IsTabStop="False" />
                                                    <ItemsControl x:Name="ItemsControl"
                                      Grid.Row="1"
                                      ItemsSource="{Binding GroupItems}"
                                      IsTabStop="False"
                                      TabNavigation="Once"
                                      TabIndex="1" >
                                                        <ItemsControl.ItemContainerTransitions>
                                                            <TransitionCollection>
                                                                <AddDeleteThemeTransition />
                                                                <ContentThemeTransition />
                                                                <ReorderThemeTransition />
                                                                <EntranceThemeTransition IsStaggeringEnabled="False" />
                                                            </TransitionCollection>
                                                        </ItemsControl.ItemContainerTransitions>
                                                    </ItemsControl>
                                                </Grid>
                                            </Border>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </GroupStyle.ContainerStyle>

This line did the trick:

<Border Background="{Binding Group, Converter={StaticResource ColorConverter}}"/>

Binding to Group gives you access to the group's data source.