title: Grouping items in ListView - Windows Store Apps
body: <p>Im trying to achieve this <img src="https://i.stack.imgur.com/VHCeJ.png" alt="enter image description here"></p>
  
  <p>but so far i can on list all the blue items in the list, without the seperation between them.
  this is what im using</p>
  
  <p>XAML:</p>
  
  <p>Page.xaml    </p>
  
  <pre><code>&lt;Grid Grid.Row="1" Grid.RowSpan="2" Background="White"&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="875" /&gt;
                  &lt;ColumnDefinition Width="385"/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;ListView Grid.Column="0" ItemsSource="{Binding MyMeets}" Style="{StaticResource MyMeetingsRowUsers}" &gt;&lt;/ListView&gt;
          &lt;/Grid&gt;
  </code></pre>
  
  <p>Style:</p>
  
  <pre><code>&lt;DataTemplate x:Key="MyMeetingUser"&gt;
      &lt;Grid Margin="0,0,0,10" &gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition&gt;&lt;/RowDefinition&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;StackPanel Height="78" Width="875"&gt;
              &lt;StackPanel.Background&gt;
                  &lt;LinearGradientBrush EndPoint="0.5,1" StartPoint="0,1"  &gt;
                      &lt;GradientStop Color="#FF0072C6" Offset="0"/&gt;
                      &lt;GradientStop Color="#FF008FD4" Offset="1"/&gt;
                  &lt;/LinearGradientBrush&gt;
              &lt;/StackPanel.Background&gt;
              &lt;Grid&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="90"/&gt;
                      &lt;ColumnDefinition Width="65"/&gt;
                      &lt;ColumnDefinition Width="388"/&gt;
                      &lt;ColumnDefinition Width="*"/&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
  
                  &lt;TextBlock x:Name="MyMeetingRowDayNumber" Grid.Column="0" Text="{Binding MyMeetingRowDayNumber}" Style="{StaticResource MyMeetingsRowDay}"   /&gt;
                  &lt;Grid Grid.Column="1"&gt;
                      &lt;Grid.RowDefinitions&gt;
                          &lt;RowDefinition /&gt;
                          &lt;RowDefinition /&gt;
                      &lt;/Grid.RowDefinitions&gt;
                      &lt;TextBlock Grid.Row="0" x:Name="MyMeetingRowDayText" Text="{Binding MyMeetingRowDayText}" Style="{StaticResource MyMeetingsRowDayText}" Height="28"&gt;&lt;/TextBlock&gt;
                      &lt;TextBlock Grid.Row="1" x:Name="MyMeetingRowDayHour" Text="{Binding MyMeetingRowDayHour}" Style="{StaticResource MyMeetingsRowDayHour}" &gt;&lt;/TextBlock&gt;
                  &lt;/Grid&gt;
                  &lt;TextBlock Grid.Column="2" x:Name="MyMeetingsRowTitle" Text="{Binding MyMeetingsRowTitle}" Style="{StaticResource MyMeetingsRowTitle}" /&gt;
              &lt;/Grid&gt;
          &lt;/StackPanel&gt;
      &lt;/Grid&gt;
  &lt;/DataTemplate&gt;
  
  &lt;Style x:Key="MyMeetingsRowUsers" TargetType="ListView" &gt;
      &lt;Setter Property="HorizontalContentAlignment" Value="Right" /&gt;
      &lt;Setter Property="VerticalContentAlignment" Value="Center" /&gt;
      &lt;Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" /&gt;
      &lt;Setter Property="Background" Value="Transparent"/&gt;
      &lt;Setter Property="TabNavigation" Value="Local"/&gt;
      &lt;Setter Property="IsHoldingEnabled" Value="True"/&gt;
      &lt;Setter Property="Margin" Value="44,36,0,0" /&gt;
      &lt;Setter Property="ItemTemplate" Value="{StaticResource MyMeetingUser}" /&gt;
      &lt;Setter Property="Transitions"&gt;
          &lt;Setter.Value&gt;
              &lt;TransitionCollection&gt;
                  &lt;EntranceThemeTransition /&gt;
              &lt;/TransitionCollection&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>and on the code behind i have this</p>
  
  <pre><code>private ObservableCollection&lt;MeetingRow&lt;Meeting&gt;&gt; myMeet = new ObservableCollection&lt;MeetingRow&lt;Meeting&gt;&gt;();
      public ObservableCollection&lt;MeetingRow&lt;Meeting&gt;&gt; MyMeets
      {
          get { return myMeet; }
          set { SetProperty(ref myMeet, value); }
      }
  </code></pre>
  
  <p>that i fill with <a href="http://paste2.org/ZEhZ3h7H" rel="nofollow noreferrer">items</a> on the OnNavigatedTo. Like i said, i get the blue rows, but i dont know how to add the gray ones to separate them according to the date.</p>