Windows 应用商店应用程序：网格视图组绑定背景颜色？

Question

我有一个带有 CollectionViewSource 作为项目源的网格视图。

我想绑定每个组容器面板的背景属性，让每个组都有自己的背景色。

如何做到这一点？

我正在尝试在 gridview 的 <GroupStyle.ContainerStyle> 中使用绑定，但无法正常工作。

Answer 1

由于列表已经分组，因此在每个 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
}

Answer 2

好的，这就是我所拥有的。我不得不修改Group Container Style的template：

<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 可让您访问该组的数据源。