The following is my XAML code:
<Page.Resources>
<DataTemplate x:Key="GroupTemplate">
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1">
<TextBlock x:Name="SongTitle" Text="{Binding Title}"
Style="{ThemeResource ListViewItemTextBlockStyle}"/>
<TextBlock x:Name="ArtistName" Text="{Binding Album}"
Style="{ThemeResource ListViewItemContentTextBlockStyle}"/>
</StackPanel>
</Grid>
</DataTemplate>
<CollectionViewSource x:Name="MusicSource" IsSourceGrouped="true" />
<DataTemplate x:Key="headerTemplate">
<StackPanel HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=contentList}">
<TextBlock Text="{Binding Key}" />
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid>
<SemanticZoom>
<SemanticZoom.ZoomedInView>
<ListView
x:Name="contentList"
SelectionMode="Multiple"
ItemsSource="{Binding Source={StaticResource MusicSource}}"
ItemTemplate="{StaticResource GroupTemplate}">
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True" HeaderTemplate="{StaticResource headerTemplate}"/>
</ListView.GroupStyle>
</ListView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<Border
x:Name="SearchBorder"
Background="White">
<TextBox
x:Name="Search" TextChanged="TextBox_TextChanged" />
</Border>
</Grid>
The following is the C# code behind it:
// imports
namespace Test
{
public sealed partial class Player : Page
{
ObservableCollection<Music> source = new ObservableCollection<Music>();
List<AlphaKeyGroup<Music>> itemSource;
public Player()
{
this.InitializeComponent();
this.SetItemSource();
}
private async Task getMusic(IStorageFolder folder)
{
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, musicProperties.Title, musicProperties.Album));
}
itemSource = AlphaKeyGroup<Music>.CreateGroups(source, CultureInfo.CurrentUICulture, s => s.Artist, true);
this.MusicSource.Source = itemSource;
}
public async void SetItemSource()
{
await getMusic(Windows.Storage.KnownFolders.MusicLibrary);
}
private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{
}
}
}
As the user types in the textbox, the listview should automatically scroll to the matching group.
The groups are based on Artist, so it's like:
Michael Jackson
- Song 1
- Song 2
Eminem
- Song 1
- Song 2
So if I type "Em", the listview should immediately scroll down to the second group, since that artist "Eminem" comes closest to "Em".
Is this possible?
I am using the AlphaKeyGroup class.
<Page.Resources>
<DataTemplate x:Key="GroupTemplate">
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1">
<TextBlock x:Name="SongTitle" Text="{Binding Title}"
Style="{ThemeResource ListViewItemTextBlockStyle}"/>
<TextBlock x:Name="ArtistName" Text="{Binding Album}"
Style="{ThemeResource ListViewItemContentTextBlockStyle}"/>
</StackPanel>
</Grid>
</DataTemplate>
<CollectionViewSource x:Name="MusicSource" IsSourceGrouped="true" />
<DataTemplate x:Key="headerTemplate">
<StackPanel HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=contentList}">
<TextBlock Text="{Binding Key}" />
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid>
<SemanticZoom>
<SemanticZoom.ZoomedInView>
<ListView
x:Name="contentList"
SelectionMode="Multiple"
ItemsSource="{Binding Source={StaticResource MusicSource}}"
ItemTemplate="{StaticResource GroupTemplate}">
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True" HeaderTemplate="{StaticResource headerTemplate}"/>
</ListView.GroupStyle>
</ListView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<Border
x:Name="SearchBorder"
Background="White">
<TextBox
x:Name="Search" TextChanged="TextBox_TextChanged" />
</Border>
</Grid>
The following is the C# code behind it:
// imports
namespace Test
{
public sealed partial class Player : Page
{
ObservableCollection<Music> source = new ObservableCollection<Music>();
List<AlphaKeyGroup<Music>> itemSource;
public Player()
{
this.InitializeComponent();
this.SetItemSource();
}
private async Task getMusic(IStorageFolder folder)
{
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, musicProperties.Title, musicProperties.Album));
}
itemSource = AlphaKeyGroup<Music>.CreateGroups(source, CultureInfo.CurrentUICulture, s => s.Artist, true);
this.MusicSource.Source = itemSource;
}
public async void SetItemSource()
{
await getMusic(Windows.Storage.KnownFolders.MusicLibrary);
}
private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{
}
}
}
As the user types in the textbox, the listview should automatically scroll to the matching group.
The groups are based on Artist, so it's like:
Michael Jackson
- Song 1
- Song 2
Eminem
- Song 1
- Song 2
So if I type "Em", the listview should immediately scroll down to the second group, since that artist "Eminem" comes closest to "Em".
Is this possible?
I am using the AlphaKeyGroup class.