Question

I have alarm model objects which have a Repeat collection containing the days the alarm should repeat. I want to display the alarms in a grid view grouped under the day of the week(like monday,tuesday etc).

And i am adding all these alarms into a collection “Alarms”

For each alarm in alarms, I am again creating alarms for each day in the repeat collection of the alarm and adding them all to a collection “TotalAlarms”.

foreach (Alarm alarm in this.Config.Alarms)
        {
            foreach (DayOfWeek day in alarm.Repeat)
            {
                this.tempAlarm = this.CopyAlarm(alarm);

                tempAlarm.DayOfWeek = day;                 

                TotalAlarms.Add(tempAlarm);
            }
        }

And am using linq to group on the DayOfWeek property of alarm model which indicates the day on which the alarm should go off.

var result = from t in _ViewModel.TotalAlarms
                     group t by  t.DayOfWeek into q                        
                     orderby q.Key
                     select q;

And am adding this result to the groupedItemsViewSource (binding to itemsource of grid view)

groupedItemsViewSource.Source = result;

and for the header of the grid view, am binding it to “Key”

<TextBlock Text="{Binding Key}" Style="{StaticResource TitleTextStyle}" FontSize="20" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="100" Height="30" Margin="5"/>

This approach displays only the days of week for which there is an alarm. Like if the alarms are set to friday and saturday, only friday and saturday are shown in the group headers.

What i want is all the days beings shown as group headers and if there are no alarms for that day then it can be empty. But the group headers should display all days.

I am really finding it hard to think of a way to do that. If anyone has any idea, please help me out here….

Thanks

Answer 1

I finally figured out the answer myself. Its a bit messy and ugly but it works. I use 7 grid views now instead of one. But it still doesnt show the header unless there is a data item in the grid view. SO if the grid view collection is empty then i add some empty object to the collection binding the grid view and then i reduce the height of the grid view so that the empty item is not displayed and only the header is displayed.

This is the sample code for one grid view.

 emptyAlarmsList = new ObservableCollection<Alarm>();
        emptyAlarmsList.Add(new Alarm());

        var sundayAlarms = from t in _ViewModel.TotalAlarms
                           where t.DayOfWeek == DayOfWeek.Sunday
                           group t by t.DayOfWeek into g
                           orderby g.Key
                           select g;

        if (sundayAlarms.Count() == 0)
        {
            var sundayEmptyAlarms = from t in this.emptyAlarmsList                                   
                               group t by t.DayOfWeek into g
                               orderby g.Key
                               select g;
            SundayAlarmsView.Source = sundayEmptyAlarms;
            itemGridView1.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Top;
            itemGridView1.Height = 100;
        }
        else
            SundayAlarmsView.Source = sundayAlarms;

And the XAMl code for one grid view

 <CollectionViewSource
        x:Name="SundayAlarmsView"            
        IsSourceGrouped="true"
        />
            <GridView
        x:Name="itemGridView1"
        AutomationProperties.AutomationId="ItemGridView1"
        AutomationProperties.Name="Grouped Items"            
        Grid.Column="0"
        Margin="0,-3,0,0"
        Padding="116,0,40,46"
        SelectionMode= "Extended"
        ItemsSource="{Binding Source={StaticResource SundayAlarmsView}}"
        ItemTemplate="{StaticResource AlarmListTemplate}"
        SelectionChanged="Alarm_SelectionChanged">

                <GridView.ItemContainerStyle>
                    <Style
                TargetType="GridViewItem">
                        <Setter
                    Property="Height"
                    Value="150" />
                        <Setter
                    Property="Width"
                    Value="250" />
                        <Setter
                    Property="Margin"
                    Value="10,10" />
                    </Style>
                </GridView.ItemContainerStyle>

                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>

                                <TextBlock Text="Sunday" Style="{StaticResource TitleTextStyle}" FontSize="20" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="100" Height="30" Margin="5"/>

                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </GridView.GroupStyle>
            </GridView>