fix: Listboard Header Styling fixed by using Parent Binding

chore: add Sample Expander to bottom of ListboardPage

BUG: Not able to fetch Data from CodeSampleService

Author: DevTKSS

src/DevTKSS.Uno.Samples.MvuxGallery/Presentation/ViewModels/DashboardModel.cs

@@ -7,23 +7,17 @@ namespace DevTKSS.Uno.Samples.MvuxGallery.Presentation.ViewModels;
 public partial record DashboardModel
 {
     #region Services
-    private readonly INavigator _navigator;
-    private readonly ILocalizationService _localizationService;
     private readonly IStringLocalizer _stringLocalizer;
     private readonly IGalleryImageService _galleryImageService;
     private readonly IStorage _storage;
     private readonly ILogger _logger;
     #endregion
     public DashboardModel(
-        INavigator navigator,
-        ILocalizationService localizationService,
         IStringLocalizer stringLocalizer,
         IGalleryImageService galleryImageService,
         IStorage storage,
         ILogger<DashboardModel> logger)
     {
-        this._navigator = navigator;
-        this._localizationService = localizationService;
         this._stringLocalizer = stringLocalizer;
         this._galleryImageService = galleryImageService;
         this._storage = storage;

src/DevTKSS.Uno.Samples.MvuxGallery/Presentation/ViewModels/ListboardModel.cs

@@ -27,15 +27,15 @@ public partial record ListboardModel
     /// </summary>
     /// <param name="stringLocalizer">The string localizer service.</param>
     /// <param name="galleryImageService">The gallery image service.</param>
-    /// <param name="codeSampleService">The code sample service.</param>
+    /// <param name="serviceProvider">The serviceProvider, to fetch the code sample service as NamedService from with correct configuration.</param>
     public ListboardModel(
         IStringLocalizer stringLocalizer,
         IGalleryImageService galleryImageService,
-        ICodeSampleService codeSampleService)
+        IServiceProvider serviceProvider)
     {
         this._stringLocalizer = stringLocalizer;
         this._galleryImageService = galleryImageService;
-        this._codeSampleService = codeSampleService;
+        this._codeSampleService = serviceProvider.GetRequiredNamedService<ICodeSampleService>("ListboardSampleService");
     }
 
     /// <summary>

src/DevTKSS.Uno.Samples.MvuxGallery/Presentation/Views/DashboardPage.xaml

@@ -55,7 +55,7 @@
         </mvux:FeedView>
         <Expander Grid.Row="2"
                   ExpandDirection="Down"
-                  MaxHeight="{x:Bind DevideByTwo(DashboardGrid.Height), Mode=OneWay}">
+                  MaxHeight="300">
 
             <Expander.Header>
                 <utu:TabBar VerticalAlignment="Bottom"

src/DevTKSS.Uno.Samples.MvuxGallery/Presentation/Views/ListboardPage.xaml

@@ -18,13 +18,16 @@
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="*"/>
+            <RowDefinition Height="Auto"
+                           MaxHeight="300" />
         </Grid.RowDefinitions>
 
-        <!--<TextBlock  TextAlignment="Center"
+        <TextBlock Grid.Row="0"
+                   TextAlignment="Center"
                     VerticalAlignment="Center"
                     Style="{StaticResource HeadlineMedium}"
                     Text="{Binding ListboardTitle}"
-                    Foreground="{ThemeResource OnSecondaryContainerBrush}"/>-->
+                    Foreground="{ThemeResource OnSecondaryContainerBrush}"/>
 
         <mvux:FeedView x:Name="LeftFeedView"
                            Grid.Row="1"
@@ -37,7 +40,7 @@
                               Footer="{Binding CurrentCodeSample}"
                               FooterTemplate="{StaticResource CodeSampleTemplate}"
                               HeaderTemplate="{StaticResource ViewHeaderTemplate}"
-                              Header="{Binding ViewHeaderContent}"
+                              Header="{Binding Parent.ViewHeaderContent}"
                               AllowDrop="False"
                               CanDrag="False"
                               CanReorderItems="False"
@@ -47,5 +50,33 @@
                 </DataTemplate>
             </mvux:FeedView.ValueTemplate>
         </mvux:FeedView>
+        <Expander Grid.Row="2"
+                  ExpandDirection="Down"
+                  MaxHeight="300">
+
+            <Expander.Header>
+                <utu:TabBar VerticalAlignment="Bottom"
+                            ItemsSource="{Binding CodeSampleOptions}"
+                            SelectedItem="{Binding SelectedOption, Mode=TwoWay}">
+                    <utu:TabBar.ItemTemplate>
+                        <DataTemplate>
+                            <utu:TabBarItem Content="{Binding}"
+                                            Command="{Binding SwitchCodeSampleAsync}"
+                                            CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Content}"
+                                            Style="{StaticResource MaterialTopTabBarItemStyle}"
+                                            Icon="Home" />
+                        </DataTemplate>
+                    </utu:TabBar.ItemTemplate>
+                </utu:TabBar>
+            </Expander.Header>
+            <Expander.Content>
+                <ScrollViewer>
+                    <TextBlock x:Name="CodeSampleBlock"
+                               Text="{Binding CurrentCodeSample}"
+                               TextWrapping="WrapWholeWords" />
+                </ScrollViewer>
+            </Expander.Content>
+
+        </Expander>
     </Grid>
 </Page>

src/DevTKSS.Uno.Samples.MvuxGallery/Styles/Generic.xaml

@@ -71,15 +71,18 @@
                         Style="{ThemeResource TitleMedium}"
                         Margin="16,14,16,0"
                         Foreground="{ThemeResource OnSurfaceInverseBrush}"
-                        VerticalAlignment="Stretch"
+                        VerticalAlignment="Center"
                         HorizontalAlignment="Center"
                         TextAlignment="Center"
                         Grid.Column="1"
                         TextWrapping="WrapWholeWords"/>
-            <AppBarButton Command="{utu:AncestorBinding AncestorType=mvux:FeedView, Path=Refresh}"
+            <AppBarButton Style="{StaticResource FilledButtonStyle}"
+                          Command="{utu:AncestorBinding AncestorType=mvux:FeedView, Path=Refresh}"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Stretch"
-                          Grid.Column="2" Icon="Refresh"/>
+                          Grid.Column="2">
+                <SymbolIcon Symbol="Refresh" />
+            </AppBarButton>
         </Grid>
     </DataTemplate>