title: UWP listview groups style
body: <p>I am creating UWP application. There is a listview, with groups.</p>
  
  <p>XAML code goes like this:</p>
  
  <pre><code>&lt;Page.Resources&gt;
      &lt;CollectionViewSource x:Name="ContactsCVS"  IsSourceGrouped="True" /&gt;
  
      &lt;!-- When using x:Bind, you need to set x:DataType --&gt;
      &lt;DataTemplate x:Name="ContactListViewTemplate" x:DataType="data:Contact"&gt;
          &lt;Grid&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="*"/&gt;
                  &lt;RowDefinition Height="*"/&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="Auto"/&gt;
                  &lt;ColumnDefinition Width="*"/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Ellipse x:Name="Ellipse"
                       Grid.RowSpan="2"
                       Width ="32"
                       Height="32"
                       Margin="6"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       Fill="LightGray"/&gt;
              &lt;TextBlock Grid.Column="1"
                         Text="{x:Bind Name}" 
                         x:Phase="1"  
                         Style="{ThemeResource BaseTextBlockStyle}"
                         Margin="12,6,0,0"/&gt;
              &lt;TextBlock  Grid.Column="1"
                          Grid.Row="1"
                          Text="{x:Bind Position}" 
                          x:Phase="2"
                          Style="{ThemeResource BodyTextBlockStyle}"
                          Margin="12,0,0,6"/&gt;
          &lt;/Grid&gt;
      &lt;/DataTemplate&gt;
  
  &lt;/Page.Resources&gt;
  
  &lt;Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"&gt;
  
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="Auto"/&gt;
          &lt;RowDefinition Height="*"/&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="Auto"/&gt;
          &lt;ColumnDefinition Width="*"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  
      &lt;ListView ItemsSource="{x:Bind ContactsCVS.View}"
                ItemTemplate="{StaticResource ContactListViewTemplate}"
                SelectionMode="Single"
                ShowsScrollingPlaceholders="True"
                Grid.Row="1"
                Grid.ColumnSpan="2" x:Name="listViewMain"&gt;
  
          &lt;ListView.GroupStyle&gt;
              &lt;GroupStyle&gt;
                  &lt;GroupStyle.HeaderTemplate&gt;
                      &lt;DataTemplate x:DataType="data:GroupInfoList"&gt;
                          &lt;TextBlock Text="{x:Bind Key}" 
                                     /&gt;
                      &lt;/DataTemplate&gt;
                  &lt;/GroupStyle.HeaderTemplate&gt;
              &lt;/GroupStyle&gt;
          &lt;/ListView.GroupStyle&gt;
      &lt;/ListView&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>And everything is ok, except that I want to make each group to have some kind of border. Like this:</p>
  
  <p><img src="https://i.stack.imgur.com/e6ubr.jpg" alt="[1]">
  <br>
  <br>
  How to achieve this?</p>