将绑定分组数据发布到 cvs 以进行语义缩放

Question

我在将语义缩放正确绑定到 CollectionViewSource 时遇到了一些问题。我是 MVVM 的新手，所以我不确定我是否正确设置了东西。

查看模型

    private async void GetData()
    {
        // Simulate pulling data from api
        string response;
        StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(new Uri(@"ms-appx:///DesignData/GetLive.json"));
        using (StreamReader sRead = new StreamReader(await file.OpenStreamForReadAsync()))
            response = await sRead.ReadToEndAsync();

        // Deserialize data to class
        LiveStreamModel liveGames = JsonConvert.DeserializeObject<LiveStreamModel>(response);
        Schedules = liveGames.schedule;

        // Group data by event
        var groupData = liveGames.schedule.GroupBy(a => a.@event);

        // Set cvs source to grouped data
        ScheduleSource = new CollectionViewSource() { IsSourceGrouped = true, Source = groupData };
    }

    private CollectionViewSource scheduleSource;
    public CollectionViewSource ScheduleSource
    {
        get
        {
            return scheduleSource;
        }
        set
        {
            scheduleSource = value;
            RaisePropertyChanged("ScheduleSource");
        }
    }

查看

Page.Resources>
    <DataTemplate x:Key="ZoomedInTemplate">
        <StackPanel Orientation="Horizontal" MinWidth="200" Margin="12,6,0,6">
            <!--<Image Source="{Binding ImagePath}" Height="80" Width="80"/>-->
            <StackPanel Margin="20,0,0,0">
                <TextBlock Text="{Binding homeTeam}" Style="{StaticResource BaseTextBlockStyle}"/>
                <TextBlock Text="{Binding awayTeam}" TextWrapping="Wrap" HorizontalAlignment="Left" Width="300" 
                           Style="{StaticResource BodyTextBlockStyle}"/>
            </StackPanel>
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="ZoomedInGroupHeaderTemplate">
        <TextBlock Text="{Binding event}" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" 
                   Style="{StaticResource SubtitleTextBlockStyle}"/>
    </DataTemplate>

    <DataTemplate x:Key="ZoomedOutTemplate">
        <TextBlock Text="{Binding event}" Style="{StaticResource SubtitleTextBlockStyle}"/>
    </DataTemplate>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <SemanticZoom x:Name="GetLiveZoom"  >
        <SemanticZoom.ZoomedInView>
            <GridView x:Name="GetLiveGrid" ItemsSource="{Binding ScheduleSource.View}" ItemTemplate="{StaticResource ZoomedInTemplate}" SelectionMode="Single"
                    ScrollViewer.IsHorizontalScrollChainingEnabled="False">
                <GridView.GroupStyle>
                    <GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}" />
                </GridView.GroupStyle>
            </GridView> 
        </SemanticZoom.ZoomedInView>
        <SemanticZoom.ZoomedOutView>
            <GridView x:Name="GetLiveList" ItemsSource="{Binding ScheduleSource.View.CollectionGroups}" ItemTemplate="{StaticResource ZoomedOutTemplate}" SelectionMode="None"
                    ScrollViewer.IsVerticalScrollChainingEnabled="False"/>
        </SemanticZoom.ZoomedOutView>
    </SemanticZoom>
</Grid>

调试时，我的数据已按 @event 正确分组，但是将 cvs 的源设置为分组数据并将其绑定到语义缩放控件导致没有任何显示。

Answer 1

您需要修复以下数据绑定：

1)对于ZoomedInGroupHeaderTemplate，因为Source是分组数据，所以如果要在ZoomedInView中显示组名，设置Key 属性:

的数据绑定

<DataTemplate x:Key="ZoomedInGroupHeaderTemplate">
            <TextBlock Text="{Binding Key}" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" 
                   Style="{StaticResource SubtitleTextBlockStyle}"/>
        </DataTemplate>

2) 对于 ZoomedOutTemplate，来源是 ICollectionView.CollectionGroups，参考 MSDN -> ICollectionViewGroup interface

我们需要使用 ICollectionViewGroup.Group 属性来获取 ZoomedOutView 中的组名：

<DataTemplate x:Key="ZoomedOutTemplate">
            <TextBlock Text="{Binding Group.Key}" Style="{StaticResource SubtitleTextBlockStyle}"/>
        </DataTemplate>

在Github

中检查我完成的示例

ZoomedInView 的屏幕截图：

ZoomedOutView 的屏幕截图：

将绑定分组数据发布到 cvs 以进行语义缩放

Issue binding grouped data to cvs for semantic zoom

c#

mvvm

winrt-xaml

windows-10