Grouped Listview windows-phone

时间:2016-05-13 18:40:36

标签: c# listview windows-phone-8.1 windows-phone semantic-zoom

我正在尝试根据此类显示分组的Listview

private class EInfo
{
    public double JD { get; set; }
    public string Date { get; set; }
    public string Time { get; set; }
    public string Details { get; set; }
    public string MoreDetails { get; set; }
    public string Icon { get; set; }
}

private List<EInfo> MEphemeries = new List<EInfo>();

这是我对每组中所有元素进行分组和排序的方式:

IEnumerable<IGrouping<string, EInfo>> query = MEphemeries.GroupBy(pet => pet.Details);

foreach (var group in query)
{
    Debug.WriteLine("Group {0}", group.Key);
    group.OrderBy(a => a.JD);
    foreach (var user in group)
    {
        Debug.WriteLine("  {0}", user.Date);
    }
}

listviewME.ItemsSource = query;

这就是XAML:

<SemanticZoom Grid.Row="1" Background="Black" x:Name="semanticZoom" >
    <SemanticZoom.ZoomedInView>
        <ListView x:Name="listviewME" IncrementalLoadingThreshold="15">
            <!--<ListView.SemanticZoomOwner>
                <SemanticZoom/>
            </ListView.SemanticZoomOwner>-->
            <ListView.Header>
                <!-- table header-->
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="listviewMEHeader0" Width="140"/>
                        <ColumnDefinition x:Name="listviewMEHeader1" Width="60"/>
                        <ColumnDefinition x:Name="listviewMEHeader2" Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Grid Grid.Column="0" Background="{StaticResource MediumGreyThemeColor}" Margin="0, 0.5, 0, 0.5">                                                  
                    </Grid>
                    <Grid Grid.Column="1" Background="{StaticResource MediumGreyThemeColor}" Margin="0, 0.5, 0, 0.5">                                                  
                    </Grid>
                    <Grid Grid.Column="2" Background="{StaticResource MediumGreyThemeColor}" Margin="0, 0.5, 0, 0.5">                                                   
                    </Grid>
                </Grid>
            </ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Background="Black" Margin="0,0,0,0">

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="140"/>
                            <ColumnDefinition Width="60"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Grid Grid.Column="0" Background="{StaticResource DarkGreyThemeColor}" Margin="0, 0, 0, 0.5">
                            <StackPanel>
                                <TextBlock Text="{Binding Date}" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource FlyoutPickerTitleTextBlockStyle}"/>
                                <TextBlock Text="{Binding Time}" Margin="5,0,5,5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource BaseTextBlockStyle}" FontSize="14" Foreground="{StaticResource LightGreyThemeColor}"/>
                            </StackPanel>
                        </Grid>
                        <Grid Grid.Column="1" Background="{StaticResource DarkGreyThemeColor}" Margin="0, 0, 0, 0.5">
                            <!--<Rectangle Height="25" Width="25" Margin="0" Fill="{StaticResource MoonThemeColor}" RadiusX="12.5" RadiusY="12.5" />
                            <Rectangle Height="35" Width="35" Margin="0" Stroke="{Binding Color}" StrokeThickness="2" RadiusX="17.5" RadiusY="17.75" />-->
                            <Image Height="30" Width="30" Margin="0" Source="{Binding Icon}" Stretch="Uniform" />
                        </Grid>
                        <Grid Grid.Column="2" Background="{StaticResource DarkGreyThemeColor}" Margin="0, 0, 0, 0.5" Width="{Binding ActualWidth, ElementName=listviewMEHeader2}">
                            <StackPanel>
                                <TextBlock  Text="{Binding Details}" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource FlyoutPickerTitleTextBlockStyle}" Foreground="{StaticResource VeryLightGreyThemeColor}"/>
                                <TextBlock  Text="{Binding MoreDetails}" Margin="5,0,5,5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource BaseTextBlockStyle}" FontSize="14" Foreground="{StaticResource LightGreyThemeColor}"/>
                            </StackPanel>
                        </Grid>

                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.GroupStyle>
                <GroupStyle HidesIfEmpty="True">
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Border Grid.Column="0" Grid.ColumnSpan="3" MinWidth="400" BorderThickness="2" BorderBrush="Blue" Background="AliceBlue" Margin="0,10,5,0" CornerRadius="1">
                                <TextBlock Foreground="White" Text="{Binding Key}"
                                Margin="10,2,2,5" TextTrimming="WordEllipsis" TextWrapping="NoWrap"
                                FontWeight="SemiBold" FontSize="10" />
                            </Border> 
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ListView.GroupStyle>
        </ListView>
    </SemanticZoom.ZoomedInView>

    <SemanticZoom.ZoomedOutView>
        <ListView Margin="5" ItemsSource="{Binding query}" Background="White">

            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Height="99" Margin="16">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Border Background="{StaticResource MediumDarkGreyThemeColor}"  Width="200" Height="111">
                            <Grid>
                                <TextBlock Text="{Binding Group.Key}" Style="{ThemeResource SubheaderTextBlockStyle}" />                                
                            </Grid>
                        </Border>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>
    </SemanticZoom.ZoomedOutView>

</SemanticZoom>

问题是所有信息都分组好了,每个组都有它的键,它的元素列表按日期正确排序,但listview没有显示任何信息。它只有一些空块(块的数量与组的数量相同)。

有什么问题?我怎么解决这个问题?

这就是我得到的:

This is what I get

这是我想要实现的目标: This is what I want to achieve

提前谢谢!

1 个答案:

答案 0 :(得分:0)

我看到的一些东西可能会解决你的问题:

1)将您的private class EInfo更改为public

2)你的第一个ListView没有设置ItemsSource,而你的第二个LiewView设置为ItemsSource="{Binding query}"

3)您可以使用CollectionViewSource很好地对ListView和GridView进行分组,请参阅此处:CollectionViewSource example

4)或者您可以通过将其分组到AlphaKeyGroup中手动完成,我在这里有一个工作示例:AlphaKeyGroup

最后的想法是检查GroupBy代码的输出与调试器中的CollectionViewSource和AlphaKeyGroup的比较,看看它们是否匹配。