Windows Store Apps: Grid View Group Binding background color

既然列表已经被分组了，那么在每个GridViewItem上应用背景将会奏效，这取决于你是想将每个项目中的backgound定义为属性还是使用转换器来实现:

public class Data
{
    public String Prop1 { get; set; }
    public String Prop2 { get; set; }
    public SolidColorBrush GroupeBrush { get; set; } //the groupe background color
}

和xaml

<Page.Resources>
    <CollectionViewSource x:Name="DataCollection" IsSourceGrouped="true" />
</Page.Resources>
<Grid>
    <GridView SelectionMode="None"   ItemsSource="{Binding Source={StaticResource DataCollection}}" >
        <GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
            </Style>
        </GridView.ItemContainerStyle>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid Background="{Binding GroupeBrush}">
                    <TextBlock Text="{Binding Prop2}" />
                </Grid>                    
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>

或者你也可以围绕GridView GroupStyle玩，尽管你需要找到一种方法将background与Style Setter绑定:

<GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Border Background="Black" HorizontalAlignment="Stretch">
                            <TextBlock Text='{Binding Key}' Foreground="White" Margin="5" Style="{StaticResource SubheaderTextBlockStyle}" />
                        </Border>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="GroupItem">
                        <Setter Property="MinWidth" Value="600"/>
                        <Setter Property="BorderBrush" Value="DarkGray"/>
                        <Setter Property="BorderThickness" Value="2"/>
                        <Setter Property="Margin" Value="3,0"/>
                        <Setter Property="Background" Value="BurlyWood"/>
                    </Style>
                </GroupStyle.ContainerStyle>                   
            </GroupStyle>
        </GridView.GroupStyle>

这里是后面的完整代码，以防有人想尝试更多

public sealed partial class MainPage : Page
{
    private ObservableCollection<Data> _datas = new ObservableCollection<Data>()
    {
        new Data()
        {
            Prop1 = "val1",
            Prop2 = "val2",
            GroupeBrush=new SolidColorBrush(Colors.Blue)
        }, new Data()
        {
            Prop1 = "val1",
            Prop2 = "val2",
            GroupeBrush=new SolidColorBrush(Colors.Blue)
        }, new Data()
        {
            Prop1 = "val1",
            Prop2 = "val3",
            GroupeBrush=new SolidColorBrush(Colors.Blue)
        }, new Data()
        {
            Prop1 = "val2",
            Prop2 = "val4",
            GroupeBrush=new SolidColorBrush(Colors.Green)
        }, new Data()
        {   
            Prop1 = "val3",
            Prop2 = "val5",
            GroupeBrush=new SolidColorBrush(Colors.Red)
        },
    };
    public ObservableCollection<Data> Datas
    {
        get
        {
            return _datas;
        }
        set
        {
            if (_datas == value)
            {
                return;
            }
            _datas = value;                
        }
    }
    public MainPage()
    {
        this.DataContext = this;
        InitializeComponent();
        DataCollection.Source = GetAllGrouped();
    }
    public IEnumerable<IGrouping<string, Data>> GetAllGrouped()
    {
        return Datas.GroupBy(x => x.Prop1);
    }      
}
public class Data
{
    public String Prop1 { get; set; }
    public String Prop2 { get; set; }
    public SolidColorBrush GroupeBrush { get; set; } //the groupe background color
}

好的，这是我得到的。我必须修改组容器样式的模板:

<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>

这行成功了:

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

绑定到Group可以访问组的数据源。