Grouped Listview windows-phone

Question

I'm trying to to show a grouped Listview based on this class

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>();

This is how I grouped and ordered all the elements in every group:

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;

And here goes the 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>

The question is that all the info is grouped Ok, every group with its key, its list of elements correctly ordered by date, but the listview doesn't shows any info. It only some empty blocks (the number of block is the same to the number of groups).

What is the problem? How I can fix this?

This is what I get:

This is what I want to achieve:

Thank you in advance!

Answer 1

Some stuff I see that might fix your problems:

1) Change your private class EInfo to public

2) Your first ListView does not have ItemsSource set while your second LiewView has it set to ItemsSource="{Binding query}"

3) You can group your ListView and GridView nicely by using a CollectionViewSource see here : CollectionViewSource example

4) Or you can do it manually by Grouping it into an AlphaKeyGroup, I have a working example here : AlphaKeyGroup

---

Last idea, is to check the output of your GroupBy code vs the CollectionViewSource and AlphaKeyGroup in the debugger to see if they match up.