title: Scrolling a ListView CollectionViewSource to a group of items based on a search textbox's text in C#
body: <p>I am working on a Windows Phone 8.1 app in XAML and C#.</p>
  
  <p>I have a listview, whose item source is set to a <code>CollectionViewSource</code> called <code>MusicSource</code>. On the backend in C#, I have an <code>ObservableCollection</code> called <code>source</code> and the following code populates it by getting getting all the music files on the phone, groups it by artist and then puts them in the CollectionViewSource, which shows them in the listview:</p>
  
  <pre><code>var folders = await folder.GetFoldersAsync();
      if (folders != null)
          foreach (var fol in folders)
              await getMusic(fol);
  
  var files = await folder.GetFilesAsync();
  foreach (var file in files)
  {
      MusicProperties musicProperties = await file.Properties.GetMusicPropertiesAsync();
      this.source.Add(new Music((musicProperties.Artist.Length &gt; 0) ? musicProperties.Artist : "Custom", (musicProperties.Title.Length &gt; 0) ? musicProperties.Title : file.Name, (musicProperties.Album.Length &gt; 0) ? musicProperties.Album : "Custom Album", file.Path));
  }
  itemSource = AlphaKeyGroup&lt;Music&gt;.CreateGroups(source, CultureInfo.CurrentUICulture, s =&gt; s.Artist, true);
  this.MusicSource.Source = itemSource;
  </code></pre>
  
  <p>The following is the XAML side of it:</p>
  
  <pre><code>&lt;Page.Resources&gt;
      &lt;DataTemplate x:Key="GroupTemplate"&gt;
          &lt;Grid Grid.Column="1"&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;StackPanel Grid.Column="1"&gt;
                  &lt;TextBlock x:Name="SongTitle" Text="{Binding Title}"
                             Style="{ThemeResource ListViewItemTextBlockStyle}"/&gt;
                  &lt;TextBlock x:Name="ArtistName" Text="{Binding Album}"
                             Style="{ThemeResource ListViewItemContentTextBlockStyle}"/&gt;
              &lt;/StackPanel&gt;
          &lt;/Grid&gt;
      &lt;/DataTemplate&gt;
  
      &lt;CollectionViewSource x:Name="MusicSource" IsSourceGrouped="true" /&gt;
  
      &lt;DataTemplate x:Key="headerTemplate"&gt;
          &lt;StackPanel HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=contentList}"&gt;
              &lt;TextBlock Text="{Binding Key}" /&gt;
          &lt;/StackPanel&gt;
      &lt;/DataTemplate&gt;
  &lt;/Page.Resources&gt;
  
  &lt;Grid&gt;
      &lt;SemanticZoom&gt;
          &lt;SemanticZoom.ZoomedInView&gt;
              &lt;ListView
                  x:Name="contentList"
                  SelectionMode="Multiple"
                  ItemsSource="{Binding Source={StaticResource MusicSource}}"
                  ItemTemplate="{StaticResource GroupTemplate}"&gt;
                  &lt;ListView.GroupStyle&gt;
                      &lt;GroupStyle HidesIfEmpty="True" HeaderTemplate="{StaticResource headerTemplate}"/&gt;
                  &lt;/ListView.GroupStyle&gt;
              &lt;/ListView&gt;
          &lt;/SemanticZoom.ZoomedInView&gt;
      &lt;/SemanticZoom&gt;
      &lt;Border
          x:Name="SearchBorder"
          Background="White"&gt;
          &lt;TextBox
                  x:Name="Search" TextChanged="TextBox_TextChanged" /&gt;
      &lt;/Border&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>So I get something like the following in the listview:</p>
  
  <p>Michael Jackson</p>
  
  <ul>
  <li>Bad</li>
  <li>Dangerous</li>
  <li>Thriller</li>
  </ul>
  
  <p>Eminem</p>
  
  <ul>
  <li>Not Afraid</li>
  <li>The Monster</li>
  </ul>
  
  <p>I have a textbox with the name <code>search</code> that is intended to search the listview.</p>
  
  <p>What should happen is that as I type in the textbox, the listview scrolls to the nearest group whose group header matches the text in the textbox. So if I type "Em", the listview should immediately scroll downwards to the "Eminem" category of items.</p>
  
  <p>How would I achieve this?</p>
  
  <p>Also, is it possible to do the same thing, except scroll to the item whose <code>songTitle</code> attribute matches that of the text in the textbox?</p>