Add initial CollectionsPage draft

samples/MvvmSample.Core/MvvmSample.Core.csproj

@@ -5,7 +5,8 @@
     <UserSecretsId>4e66f7b4-01a8-4f00-8733-4ae6a08c741f</UserSecretsId>
   </PropertyGroup>
   <ItemGroup>
-    <PackageReference Include="CommunityToolkit.Mvvm" Version="8.0.0-preview2" />
+    <PackageReference Include="CommunityToolkit.Common" Version="8.0.0-build.63" />
+    <PackageReference Include="CommunityToolkit.Mvvm" Version="8.0.0-build.63" />
     <PackageReference Include="Nito.AsyncEx.Coordination" Version="5.1.2" />
     <PackageReference Include="Refit" Version="6.3.2" />
   </ItemGroup>

samples/MvvmSample.Core/ViewModels/CollectionsPageViewModel.cs

@@ -0,0 +1,35 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using CommunityToolkit.Common.Collections;
+using MvvmSample.Core.Services;
+
+namespace MvvmSample.Core.ViewModels;
+
+public class CollectionsPageViewModel : SamplePageViewModel
+{
+    public CollectionsPageViewModel(IFilesService filesService) 
+        : base(filesService)
+    {
+    }
+
+    public ObservableGroupedCollection<string, Person> Contacts { get; } = new()
+    {
+        new ObservableGroup<string, Person>("A")
+        {
+            new Person() { FirstName = "Adam", LastName = "Smith" }
+        },
+        new ObservableGroup<string, Person>("B")
+        {
+            new Person() { FirstName = "Bob", LastName = "Ross" },
+            new Person() { FirstName = "Barbara", LastName = "White" }
+        }
+    };
+}
+
+public sealed class Person
+{
+    public string FirstName { get; set; }
+    public string LastName { get; set; }
+}

samples/MvvmSampleUwp/App.xaml.cs

@@ -59,6 +59,7 @@ sealed partial class App : Application
                 .AddTransient<ObservableValidatorPageViewModel>()
                 .AddTransient<ValidationFormWidgetViewModel>()
                 .AddTransient<RelayCommandPageViewModel>()
+                .AddTransient<CollectionsPageViewModel>()
                 .AddTransient<SamplePageViewModel>()
                 .BuildServiceProvider());
         }

samples/MvvmSampleUwp/MvvmSampleUwp.csproj

@@ -149,6 +149,9 @@
     <Compile Include="Views\RedditServicePage.xaml.cs">
       <DependentUpon>RedditServicePage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Views\CollectionsPage.xaml.cs">
+      <DependentUpon>CollectionsPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Views\SettingsServicePage.xaml.cs">
       <DependentUpon>SettingsServicePage.xaml</DependentUpon>
     </Compile>
@@ -313,6 +316,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Views\CollectionsPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Views\SettingsServicePage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

samples/MvvmSampleUwp/Shell.xaml

@@ -108,6 +108,11 @@
                             Content="Inversion of control"
                             Icon="StopSlideShow"
                             ToolTipService.ToolTip="Explore the support for different types of Inversion of control patterns." />
+                        <muxc:NavigationViewItem
+                            x:Name="CollectionsItem"
+                            Content="Collections"
+                            Icon="AlignLeft"
+                            ToolTipService.ToolTip="Explore the observable collection types included in the library." />
                     </muxc:NavigationViewItem.MenuItems>
                 </muxc:NavigationViewItem>
                 <muxc:NavigationViewItem

samples/MvvmSampleUwp/Shell.xaml.cs

@@ -37,6 +37,7 @@ public sealed partial class Shell : UserControl
             new SampleEntry(SendMessagesItem, typeof(MessengerSendPage), "[IMessenger] Send messages", "messenger messaging message receiver recipient send"),
             new SampleEntry(RequestMessagesItem, typeof(MessengerRequestPage), "[IMessenger] Request messages", "messenger messaging message receiver recipient request reply"),
             new SampleEntry(InversionOfControlItem, typeof(IocPage), "Ioc (Inversion of control)", "ioc inversion control dependency injection service locator"),
+            new SampleEntry(CollectionsItem, typeof(CollectionsPage), "Collections", "collection observable mvvm group list grid items source"),
             new SampleEntry(RedditBrowserOverviewItem, typeof(PuttingThingsTogetherPage), "Putting things together"),
             new SampleEntry(ViewModelsSetupItem, typeof(SettingUpTheViewModelsPage), "Setting up the ViewModels"),
             new SampleEntry(SettingsServiceItem, typeof(SettingsServicePage), "Settings service"),

samples/MvvmSampleUwp/Views/CollectionsPage.xaml

@@ -0,0 +1,106 @@
+<Page
+    x:Class="MvvmSampleUwp.Views.CollectionsPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:collections="using:CommunityToolkit.Common.Collections"
+    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:viewmodels="using:MvvmSample.Core.ViewModels"
+    NavigationCacheMode="Enabled"
+    mc:Ignorable="d">
+    <interactivity:Interaction.Behaviors>
+        <core:EventTriggerBehavior EventName="Loaded">
+            <core:InvokeCommandAction Command="{x:Bind ViewModel.LoadDocsCommand}" CommandParameter="RelayCommand" />
+        </core:EventTriggerBehavior>
+    </interactivity:Interaction.Behaviors>
+
+    <ScrollViewer Padding="{StaticResource DocumentationPageContentPadding}" CanContentRenderOutsideBounds="True">
+        <StackPanel Spacing="16">
+
+            <Border Height="480">
+                <Border.Resources>
+
+                    <!--  SemanticZoom grouped sourc  -->
+                    <CollectionViewSource
+                        x:Name="PeopleViewSource"
+                        IsSourceGrouped="True"
+                        Source="{x:Bind ViewModel.Contacts}" />
+
+                    <!--  Contact template  -->
+                    <DataTemplate x:Key="PersonListViewTemplate" x:DataType="viewmodels:Person">
+                        <Grid>
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="*" />
+                                <RowDefinition Height="*" />
+                            </Grid.RowDefinitions>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="*" />
+                            </Grid.ColumnDefinitions>
+                            <Ellipse
+                                x:Name="Ellipse"
+                                Grid.RowSpan="2"
+                                Width="32"
+                                Height="32"
+                                Margin="6"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Center"
+                                Fill="{ThemeResource SystemControlBackgroundBaseMediumBrush}" />
+                            <TextBlock
+                                Grid.Column="1"
+                                Margin="12,6,0,0"
+                                x:Phase="1"
+                                Style="{ThemeResource BaseTextBlockStyle}"
+                                Text="{x:Bind FirstName}" />
+                            <TextBlock
+                                Grid.Row="1"
+                                Grid.Column="1"
+                                Margin="12,0,0,6"
+                                x:Phase="2"
+                                Style="{ThemeResource BodyTextBlockStyle}"
+                                Text="{x:Bind LastName}" />
+                        </Grid>
+                    </DataTemplate>
+                </Border.Resources>
+                <SemanticZoom>
+                    <SemanticZoom.ZoomedInView>
+                        <ListView
+                            ItemTemplate="{StaticResource PersonListViewTemplate}"
+                            ItemsSource="{x:Bind PeopleViewSource.View}"
+                            SelectionMode="Single">
+                            <ListView.GroupStyle>
+                                <GroupStyle HidesIfEmpty="True">
+                                    <GroupStyle.HeaderTemplate>
+                                        <DataTemplate x:DataType="collections:IReadOnlyObservableGroup">
+                                            <TextBlock
+                                                FontSize="24"
+                                                Foreground="{ThemeResource SystemControlHighlightAccentBrush}"
+                                                Text="{x:Bind Key}" />
+                                        </DataTemplate>
+                                    </GroupStyle.HeaderTemplate>
+                                </GroupStyle>
+                            </ListView.GroupStyle>
+                        </ListView>
+                    </SemanticZoom.ZoomedInView>
+                    <SemanticZoom.ZoomedOutView>
+                        <GridView
+                            HorizontalAlignment="Stretch"
+                            ItemsSource="{x:Bind PeopleViewSource.View.CollectionGroups}"
+                            SelectionMode="Single">
+                            <GridView.ItemTemplate>
+                                <DataTemplate x:DataType="ICollectionViewGroup">
+                                    <TextBlock
+                                        FontSize="32"
+                                        Foreground="{ThemeResource SystemControlHighlightAccentBrush}"
+                                        Text="{x:Bind Group.(collections:IReadOnlyObservableGroup.Key)}" />
+                                </DataTemplate>
+                            </GridView.ItemTemplate>
+                        </GridView>
+                    </SemanticZoom.ZoomedOutView>
+                </SemanticZoom>
+            </Border>
+        </StackPanel>
+    </ScrollViewer>
+</Page>

samples/MvvmSampleUwp/Views/CollectionsPage.xaml.cs

@@ -0,0 +1,24 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using CommunityToolkit.Mvvm.DependencyInjection;
+using MvvmSample.Core.ViewModels;
+using Windows.UI.Xaml.Controls;
+
+namespace MvvmSampleUwp.Views;
+
+/// <summary>
+/// An empty page that can be used on its own or navigated to within a Frame.
+/// </summary>
+public sealed partial class CollectionsPage : Page
+{
+    public CollectionsPage()
+    {
+        this.InitializeComponent();
+
+        DataContext = Ioc.Default.GetRequiredService<CollectionsPageViewModel>();
+    }
+
+    public CollectionsPageViewModel ViewModel => (CollectionsPageViewModel)DataContext;
+}

samples/NuGet.config

@@ -3,7 +3,8 @@
   <packageSources>
     <clear />
     <add key="nuget.org" value="https://api.nuget.org/v3/index.json" protocolVersion="3" />
-    <add key="CommunityToolkit-CI" value="https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-MainLatest/nuget/v3/index.json" />
+    <add key="CommunityToolkit-CI-Main" value="https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-MainLatest/nuget/v3/index.json" />
+    <add key="CommunityToolkit-CI-PRs" value="https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-PullRequests/nuget/v3/index.json" />
   </packageSources>
   <disabledPackageSources>
     <clear />