More WinUI fixes for the DeveloperBalance App

9.0/Apps/DeveloperBalance/AppShell.xaml

@@ -28,13 +28,13 @@
 
     <Shell.FlyoutFooter>
         <Grid Padding="15">
-            <sf:SfSegmentedControl x:Name="ThemeSegmentedControl" 
+            <sf:SfSegmentedControl x:Name="ThemeSegmentedControl" SemanticProperties.Description="Dark/Light Mode"
                 VerticalOptions="Center" HorizontalOptions="Center" SelectionChanged="SfSegmentedControl_SelectionChanged"
                 SegmentWidth="40" SegmentHeight="40">
                 <sf:SfSegmentedControl.ItemsSource>
                     <x:Array Type="{x:Type sf:SfSegmentItem}">
-                        <sf:SfSegmentItem ImageSource="{StaticResource IconLight}"/>
-                        <sf:SfSegmentItem ImageSource="{StaticResource IconDark}"/>
+                        <sf:SfSegmentItem ImageSource="{StaticResource IconLight}" SemanticProperties.Description="Light Mode"/>
+                        <sf:SfSegmentItem ImageSource="{StaticResource IconDark}" SemanticProperties.Description="Dark Mode"/>
                     </x:Array>
                 </sf:SfSegmentedControl.ItemsSource>
             </sf:SfSegmentedControl>

9.0/Apps/DeveloperBalance/DeveloperBalance.csproj

@@ -19,6 +19,7 @@
 		<SingleProject>true</SingleProject>
 		<ImplicitUsings>enable</ImplicitUsings>
 		<Nullable>enable</Nullable>
+		<MauiVersion>9.0.30</MauiVersion>
 		<!-- https://github.com/CommunityToolkit/Maui/issues/2205 -->
 		<NoWarn>XC0103</NoWarn>
 		<MauiEnableXamlCBindingWithSourceCompilation>true</MauiEnableXamlCBindingWithSourceCompilation>

9.0/Apps/DeveloperBalance/MauiProgram.cs

@@ -18,7 +18,13 @@ public static MauiApp CreateMauiApp()
 #if IOS || MACCATALYST
 				handlers.AddHandler<Microsoft.Maui.Controls.CollectionView, Microsoft.Maui.Controls.Handlers.Items2.CollectionViewHandler2>();
 #endif
-			})
+                Microsoft.Maui.Controls.Handlers.Items.CollectionViewHandler.Mapper.AppendToMapping("KeyboardAccessibleCollectionView", (handler, view) =>
+                {
+#if WINDOWS
+                        handler.PlatformView.SingleSelectionFollowsFocus = false;
+#endif
+                });
+            })
 			.ConfigureFonts(fonts =>
 			{
 				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");

9.0/Apps/DeveloperBalance/PageModels/MainPageModel.cs

@@ -35,6 +35,9 @@ public partial class MainPageModel : ObservableObject, IProjectTaskPageModel
 	[ObservableProperty]
 	private string _today = DateTime.Now.ToString("dddd, MMM d");
 
+	[ObservableProperty]
+	private Project? selectedProject;
+
 	public bool HasCompletedTasks
 		=> Tasks?.Any(t => t.IsCompleted) ?? false;
 
@@ -149,8 +152,8 @@ private Task AddTask()
 		=> Shell.Current.GoToAsync($"task");
 
 	[RelayCommand]
-	private Task NavigateToProject(Project project)
-		=> Shell.Current.GoToAsync($"project?id={project.ID}");
+	private Task? NavigateToProject(Project project)
+		=> project is null ? null : Shell.Current.GoToAsync($"project?id={project.ID}");
 
 	[RelayCommand]
 	private Task NavigateToTask(ProjectTask task)

9.0/Apps/DeveloperBalance/PageModels/ProjectListPageModel.cs

@@ -1,4 +1,3 @@
-#nullable disable
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
 using DeveloperBalance.Data;
@@ -14,6 +13,9 @@ public partial class ProjectListPageModel : ObservableObject
 	[ObservableProperty]
 	private List<Project> _projects = [];
 
+	[ObservableProperty]
+	private Project? selectedProject;
+
 	public ProjectListPageModel(ProjectRepository projectRepository)
 	{
 		_projectRepository = projectRepository;
@@ -26,8 +28,8 @@ private async Task Appearing()
 	}
 
 	[RelayCommand]
-	Task NavigateToProject(Project project)
-		=> Shell.Current.GoToAsync($"project?id={project.ID}");
+	Task? NavigateToProject(Project project)
+		=> project is null ? null : Shell.Current.GoToAsync($"project?id={project.ID}");
 
 	[RelayCommand]
 	async Task AddProject()

9.0/Apps/DeveloperBalance/Pages/Controls/CategoryChart.xaml

@@ -21,7 +21,7 @@
             </Grid>
         </shimmer:SfShimmer.CustomView>
         <shimmer:SfShimmer.Content>
-            <chart:SfCircularChart x:Name="Chart">
+            <chart:SfCircularChart x:Name="Chart" SemanticProperties.Description="Task Categories Chart">
                 <chart:DoughnutSeries
                     ItemsSource="{Binding TodoCategoryData}"
                     PaletteBrushes="{Binding TodoCategoryColors}"
@@ -30,7 +30,7 @@
                     ShowDataLabels="True"
                     EnableTooltip="False"
                     x:Name="doughnutSeries"
-                    Radius="{OnIdiom 0.7, Phone=0.5}"
+                    Radius="{OnIdiom 0.6, Phone=0.5}"
                     InnerRadius="0.7" >
                     <chart:DoughnutSeries.LabelTemplate>
                         <DataTemplate >

9.0/Apps/DeveloperBalance/Pages/Controls/CategoryChart.xaml.cs

@@ -6,4 +6,18 @@ public CategoryChart()
 	{
 		InitializeComponent();
 	}
-}
+
+    protected override void OnHandlerChanged()
+    {
+        base.OnHandlerChanged();
+
+        var chart = Chart.Handler?.PlatformView;
+
+#if WINDOWS
+        if (chart is Microsoft.Maui.Platform.ContentPanel contentPanel)
+        {
+            contentPanel.IsTabStop = true;
+        }
+#endif
+    }
+} 

9.0/Apps/DeveloperBalance/Pages/Controls/ProjectCardView.xaml

@@ -8,6 +8,7 @@
         xmlns:shimmer="clr-namespace:Syncfusion.Maui.Toolkit.Shimmer;assembly=Syncfusion.Maui.Toolkit"
         x:Class="DeveloperBalance.Pages.Controls.ProjectCardView"
         Style="{StaticResource CardStyle}"
+        SemanticProperties.Description="{Binding Name, StringFormat='{0} Project'}"
         x:DataType="models:Project">
     <shimmer:SfShimmer
         BackgroundColor="Transparent"

9.0/Apps/DeveloperBalance/Pages/MainPage.xaml

@@ -38,21 +38,23 @@
                         <Label Text="Task Categories" Style="{StaticResource Title2}"/>
                         <controls:CategoryChart />
                         <Label Text="Projects" Style="{StaticResource Title2}"/>
-                        <ScrollView Orientation="Horizontal" Margin="-30,0">
-                            <HorizontalStackLayout 
-                                Spacing="15" Padding="30,0"
-                                BindableLayout.ItemsSource="{Binding Projects}">
-                                <BindableLayout.ItemTemplate>
-                                    <DataTemplate x:DataType="models:Project">
-                                        <controls:ProjectCardView WidthRequest="200">
-                                            <controls:ProjectCardView.GestureRecognizers>
-                                                <TapGestureRecognizer Command="{Binding NavigateToProjectCommand, Source={RelativeSource AncestorType={x:Type pageModels:MainPageModel}}, x:DataType=pageModels:MainPageModel}" CommandParameter="{Binding .}"/>
-                                            </controls:ProjectCardView.GestureRecognizers>
-                                        </controls:ProjectCardView>
-                                    </DataTemplate>
-                                </BindableLayout.ItemTemplate>
-                            </HorizontalStackLayout>
-                        </ScrollView>
+                        <CollectionView ItemsSource="{Binding Projects}"
+                                        HeightRequest="250"
+                                        Margin="-7.5,0"
+                                        x:Name="ProjectsCollectionView"
+                                        SelectionMode="Single"
+                                        SelectedItem="{Binding SelectedProject}"
+                                        SelectionChangedCommand="{Binding NavigateToProjectCommand, Source={RelativeSource AncestorType={x:Type pageModels:MainPageModel}}, x:DataType=pageModels:MainPageModel}"
+                                        SelectionChangedCommandParameter="{Binding SelectedProject}">
+                            <CollectionView.ItemsLayout>
+                                <LinearItemsLayout Orientation="Horizontal" ItemSpacing="7.5"/>
+                            </CollectionView.ItemsLayout>
+                            <CollectionView.ItemTemplate>
+                                <DataTemplate x:DataType="models:Project">
+                                    <controls:ProjectCardView WidthRequest="200" />
+                                </DataTemplate>
+                            </CollectionView.ItemTemplate>
+                        </CollectionView>
                         <Grid HeightRequest="44">
                             <Label Text="Tasks" Style="{StaticResource Title2}" VerticalOptions="Center"/>
                             <ImageButton 

9.0/Apps/DeveloperBalance/Pages/ProjectDetailPage.xaml

@@ -13,39 +13,31 @@
 
     <ContentPage.Resources>
         <DataTemplate x:Key="NormalTagTemplate" x:DataType="models:Tag">
-                <Border StrokeShape="RoundRectangle 22" 
-                        HeightRequest="44" 
-                        StrokeThickness="0"
-                        Background="{AppThemeBinding Light={StaticResource LightSecondaryBackground},Dark={StaticResource DarkSecondaryBackground}}" 
-                        Padding="{OnPlatform '18,0,18,8',Android='18,0,18,0'}"
-                        SemanticProperties.Description="{Binding Title}">
-                        <Border.GestureRecognizers>
-                            <TapGestureRecognizer Command="{Binding ToggleTagCommand, Source={RelativeSource AncestorType={x:Type pageModels:ProjectDetailPageModel}}, x:DataType=pageModels:ProjectDetailPageModel}" CommandParameter="{Binding .}"/>
-                        </Border.GestureRecognizers>
-                        <Label Text="{Binding Title}"
-                            TextColor="{AppThemeBinding Light={StaticResource DarkOnLightBackground},Dark={StaticResource LightOnDarkBackground}}"
-                            FontSize="{OnIdiom 16,Desktop=18}" 
-                            VerticalOptions="Center"
-                            VerticalTextAlignment="Center"/>
-                </Border>
+            <Button HeightRequest="44"
+                Background="{AppThemeBinding Light={StaticResource LightSecondaryBackground},Dark={StaticResource DarkSecondaryBackground}}"
+                Padding="{OnPlatform '18,0,18,8',Android='18,0,18,0'}"
+                Command="{Binding ToggleTagCommand, Source={RelativeSource AncestorType={x:Type pageModels:ProjectDetailPageModel}}, x:DataType=pageModels:ProjectDetailPageModel}"
+                CommandParameter="{Binding .}"
+                SemanticProperties.Description="{Binding Title}"  
+                CornerRadius="22"
+                Text="{Binding Title}"
+                TextColor="{AppThemeBinding Light={StaticResource DarkOnLightBackground},Dark={StaticResource LightOnDarkBackground}}"
+                FontSize="{OnIdiom 16,Desktop=18}"
+                VerticalOptions="Center" />
         </DataTemplate>
 
         <DataTemplate x:Key="SelectedTagTemplate" x:DataType="models:Tag">
-            <Border StrokeShape="RoundRectangle 22" 
-                        HeightRequest="44" 
-                        StrokeThickness="0"
-                        Background="{Binding DisplayColor}" 
-                        Padding="{OnPlatform '18,0,18,8',Android='18,0,18,0'}"
-                        SemanticProperties.Description="{Binding Title}">
-                <Border.GestureRecognizers>
-                    <TapGestureRecognizer Command="{Binding ToggleTagCommand, Source={RelativeSource AncestorType={x:Type pageModels:ProjectDetailPageModel}}, x:DataType=pageModels:ProjectDetailPageModel}" CommandParameter="{Binding .}"/>
-                </Border.GestureRecognizers>
-                <Label Text="{Binding Title}"
-                    TextColor="{AppThemeBinding Light={StaticResource LightBackground},Dark={StaticResource DarkBackground}}" 
-                    FontSize="{OnIdiom 16,Desktop=18}" 
-                    VerticalOptions="Center"
-                    VerticalTextAlignment="Center"/>
-            </Border>
+            <Button HeightRequest="44"
+                Background="{Binding DisplayColor}" 
+                Padding="{OnPlatform '18,0,18,8',Android='18,0,18,0'}"
+                Command="{Binding ToggleTagCommand, Source={RelativeSource AncestorType={x:Type pageModels:ProjectDetailPageModel}}, x:DataType=pageModels:ProjectDetailPageModel}"
+                CommandParameter="{Binding .}"
+                SemanticProperties.Description="{Binding Title}"  
+                CornerRadius="22"
+                Text="{Binding Title}"
+                TextColor="{AppThemeBinding Light={StaticResource LightBackground},Dark={StaticResource DarkBackground}}" 
+                FontSize="{OnIdiom 16,Desktop=18}"
+                VerticalOptions="Center" />
         </DataTemplate>
 
         <controls:ChipDataTemplateSelector 

9.0/Apps/DeveloperBalance/Pages/ProjectListPage.xaml

@@ -16,28 +16,33 @@
                 Command="{Binding AppearingCommand}" />
     </ContentPage.Behaviors>
     <Grid>
-      <ScrollView>
-        <VerticalStackLayout 
-            BindableLayout.ItemsSource="{Binding Projects}" 
-            Margin="{StaticResource LayoutPadding}" 
-            Spacing="{StaticResource LayoutSpacing}">
-            <BindableLayout.ItemTemplate>
-                <DataTemplate x:DataType="models:Project">
-                    <Border>
-                        <VerticalStackLayout Padding="10">
-                            <Label Text="{Binding Name}" FontSize="24" />
-                            <Label Text="{Binding Description}" />
-                        </VerticalStackLayout>
-                        <Border.GestureRecognizers>
-                            <TapGestureRecognizer Command="{Binding NavigateToProjectCommand, Source={RelativeSource AncestorType={x:Type pageModels:ProjectListPageModel}}, x:DataType=pageModels:ProjectListPageModel}" CommandParameter="{Binding .}"/>
-                        </Border.GestureRecognizers>
-                    </Border>
-                </DataTemplate>
-            </BindableLayout.ItemTemplate>
-        </VerticalStackLayout>
-      </ScrollView>
+        <ScrollView>
+            <VerticalStackLayout>
+                <CollectionView ItemsSource="{Binding Projects}" 
+                                Margin="{StaticResource LayoutPadding}"
+                                x:Name="ProjectsCollectionView"
+                                SelectionMode="Single"
+                                SelectedItem="{Binding SelectedProject}"
+                                SelectionChangedCommand="{Binding NavigateToProjectCommand, Source={RelativeSource AncestorType={x:Type pageModels:ProjectListPageModel}}, x:DataType=pageModels:ProjectListPageModel}"
+                                SelectionChangedCommandParameter="{Binding SelectedProject}">
+                    <CollectionView.ItemsLayout>
+                        <LinearItemsLayout Orientation="Vertical" ItemSpacing="7.5"/>
+                    </CollectionView.ItemsLayout>
+                    <CollectionView.ItemTemplate>
+                        <DataTemplate x:DataType="models:Project">
+                            <Border SemanticProperties.Description="{Binding Name, StringFormat='{0} Project'}">
+                                <VerticalStackLayout Padding="10">
+                                    <Label Text="{Binding Name}" FontSize="24" />
+                                    <Label Text="{Binding Description}" />
+                                </VerticalStackLayout>
+                            </Border>
+                        </DataTemplate>
+                    </CollectionView.ItemTemplate>
+                </CollectionView>
 
-        <controls:AddButton 
-            Command="{Binding AddProjectCommand}" />
+                <controls:AddButton 
+                    Command="{Binding AddProjectCommand}" />
+            </VerticalStackLayout>
+        </ScrollView>
     </Grid>
 </ContentPage>