From a620324ef784f6dc4073b1bed07ec5388f2d1d67 Mon Sep 17 00:00:00 2001
From: Arlo Godfrey <arlo.godfrey@outlook.com>
Date: Mon, 13 Nov 2023 20:23:33 -0600
Subject: [PATCH] Template out LABS label, display on home page items

---
 .../Styles/Buttons.xaml                       |  28 ++--
 .../Styles/ItemTemplates.xaml                 | 147 +++++++++---------
 2 files changed, 91 insertions(+), 84 deletions(-)

diff --git a/CommunityToolkit.App.Shared/Styles/Buttons.xaml b/CommunityToolkit.App.Shared/Styles/Buttons.xaml
index d591b2d..615ebed 100644
--- a/CommunityToolkit.App.Shared/Styles/Buttons.xaml
+++ b/CommunityToolkit.App.Shared/Styles/Buttons.xaml
@@ -1,4 +1,4 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
                     xmlns:controls="using:Microsoft.UI.Xaml.Controls"
@@ -354,20 +354,22 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="controls:InfoBadge">
-                    <Grid x:Name="RootGrid"
-                          Padding="{TemplateBinding Padding}"
-                          Background="#FFC225"
-                          CornerRadius="4">
-                        <TextBlock x:Name="ValueTextBlock"
-                                   HorizontalAlignment="Center"
-                                   VerticalAlignment="Center"
-                                   FontSize="12"
-                                   FontWeight="SemiBold"
-                                   Foreground="Black"
-                                   Text="LABS" />
-                    </Grid>
+                    <ContentControl ContentTemplate="{StaticResource LabsLabelIconTemplate}" />
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
+
+    <DataTemplate x:Key="LabsLabelIconTemplate">
+        <Grid Padding="4,0,4,0"
+              Background="#FFC225"
+              CornerRadius="4">
+            <TextBlock HorizontalAlignment="Center"
+                       VerticalAlignment="Center"
+                       FontSize="12"
+                       FontWeight="SemiBold"
+                       Foreground="Black"
+                       Text="LABS" />
+        </Grid>
+    </DataTemplate>
 </ResourceDictionary>
diff --git a/CommunityToolkit.App.Shared/Styles/ItemTemplates.xaml b/CommunityToolkit.App.Shared/Styles/ItemTemplates.xaml
index 844044c..6dad159 100644
--- a/CommunityToolkit.App.Shared/Styles/ItemTemplates.xaml
+++ b/CommunityToolkit.App.Shared/Styles/ItemTemplates.xaml
@@ -5,85 +5,90 @@
                     xmlns:meta="using:CommunityToolkit.Tooling.SampleGen.Metadata"
                     xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
 
-    <converters:StringToUriConverter x:Name="stringToUriConverter" />
+	<converters:StringToUriConverter x:Name="stringToUriConverter" />
 
-    <!-- Kind of not supported in Uno (at least directly like this) see https://github.com/unoplatform/uno/issues/7582 (and related root issue)
+	<!-- Kind of not supported in Uno (at least directly like this) see https://github.com/unoplatform/uno/issues/7582 (and related root issue)
     <Style x:Key="IndentedGridViewItemStyle"
            BasedOn="{StaticResource DefaultGridViewItemStyle}"
            TargetType="GridViewItem">
         <Setter Property="Margin" Value="12,0,0,12" />
     </Style>-->
 
-    <DataTemplate x:Key="ControlItemAutoSuggestBoxTemplate"
-                  x:DataType="meta:ToolkitFrontMatter">
-        <Grid>
-            <TextBlock Text="{Binding Title}" />
-        </Grid>
-    </DataTemplate>
+	<DataTemplate x:Key="ControlItemAutoSuggestBoxTemplate"
+	              x:DataType="meta:ToolkitFrontMatter">
+		<Grid>
+			<TextBlock Text="{Binding Title}" />
+		</Grid>
+	</DataTemplate>
 
-    <DataTemplate x:Key="ControlItemGridViewTemplate"
-                  x:DataType="meta:ToolkitFrontMatter">
-        <Grid x:Name="controlRoot"
-              Width="360"
-              Height="90"
-              Margin="0"
-              Padding="8"
-              Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-              BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-              BorderThickness="1"
-              CornerRadius="{StaticResource ControlCornerRadius}">
+	<DataTemplate x:Key="ControlItemGridViewTemplate"
+	              x:DataType="meta:ToolkitFrontMatter">
+		<Grid x:Name="controlRoot"
+		      Width="360"
+		      Height="90"
+		      Margin="0"
+		      Padding="8"
+		      Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+		      BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+		      BorderThickness="1"
+		      CornerRadius="{StaticResource ControlCornerRadius}">
 
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="Auto" />
-                <ColumnDefinition Width="*" />
-                <ColumnDefinition Width="Auto" />
-            </Grid.ColumnDefinitions>
-            <VisualStateManager.VisualStateGroups>
-                <VisualStateGroup x:Name="LayoutVisualStates">
-                    <VisualState x:Name="WideLayout">
-                        <VisualState.StateTriggers>
-                            <AdaptiveTrigger MinWindowWidth="{StaticResource Breakpoint840Plus}" />
-                        </VisualState.StateTriggers>
-                        <VisualState.Setters />
-                    </VisualState>
-                    <VisualState x:Name="NarrowLayout">
-                        <VisualState.StateTriggers>
-                            <AdaptiveTrigger MinWindowWidth="0" />
-                        </VisualState.StateTriggers>
-                        <VisualState.Setters>
-                            <Setter Target="controlRoot.Width" Value="400" />
-                            <Setter Target="controlRoot.Height" Value="100" />
-                        </VisualState.Setters>
-                    </VisualState>
-                </VisualStateGroup>
-            </VisualStateManager.VisualStateGroups>
-            <Grid Width="72"
-                  CornerRadius="{ThemeResource ControlCornerRadius}">
-                <Image x:Name="gridImage"
-                       Width="48"
-                       VerticalAlignment="Center"
-                       Stretch="Uniform">
-                    <Image.Source>
-                        <BitmapImage UriSource="{Binding Icon, Converter={StaticResource stringToUriConverter}}" />
-                    </Image.Source>
-                </Image>
-            </Grid>
+			<Grid.ColumnDefinitions>
+				<ColumnDefinition Width="Auto" />
+				<ColumnDefinition Width="*" />
+				<ColumnDefinition Width="Auto" />
+			</Grid.ColumnDefinitions>
+			<VisualStateManager.VisualStateGroups>
+				<VisualStateGroup x:Name="LayoutVisualStates">
+					<VisualState x:Name="WideLayout">
+						<VisualState.StateTriggers>
+							<AdaptiveTrigger MinWindowWidth="{StaticResource Breakpoint840Plus}" />
+						</VisualState.StateTriggers>
+						<VisualState.Setters />
+					</VisualState>
+					<VisualState x:Name="NarrowLayout">
+						<VisualState.StateTriggers>
+							<AdaptiveTrigger MinWindowWidth="0" />
+						</VisualState.StateTriggers>
+						<VisualState.Setters>
+							<Setter Target="controlRoot.Width" Value="400" />
+							<Setter Target="controlRoot.Height" Value="100" />
+						</VisualState.Setters>
+					</VisualState>
+				</VisualStateGroup>
+			</VisualStateManager.VisualStateGroups>
+			<Grid Width="72"
+			      CornerRadius="{ThemeResource ControlCornerRadius}">
+				<Image x:Name="gridImage"
+				       Width="48"
+				       VerticalAlignment="Center"
+				       Stretch="Uniform">
+					<Image.Source>
+						<BitmapImage UriSource="{Binding Icon, Converter={StaticResource stringToUriConverter}}" />
+					</Image.Source>
+				</Image>
 
-            <RelativePanel Grid.Column="1"
-                           Grid.ColumnSpan="2"
-                           Margin="16,6,0,0">
-                <TextBlock x:Name="titleText"
-                           win:TextLineBounds="TrimToCapHeight"
-                           Style="{StaticResource BodyStrongTextBlockStyle}"
-                           Text="{Binding Title}"
-                           TextWrapping="NoWrap" />
-                <TextBlock Margin="0,2,8,0"
-                           Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                           RelativePanel.Below="titleText"
-                           Style="{StaticResource CaptionTextBlockStyle}"
-                           Text="{Binding Description}"
-                           TextTrimming="CharacterEllipsis" />
-            </RelativePanel>
-        </Grid>
-    </DataTemplate>
+				<ContentControl HorizontalAlignment="Right"
+				                VerticalAlignment="Bottom"
+				                ContentTemplate="{StaticResource LabsLabelIconTemplate}"
+				                Visibility="{Binding IsExperimental}" />
+			</Grid>
+
+			<RelativePanel Grid.Column="1"
+			               Grid.ColumnSpan="2"
+			               Margin="16,6,0,0">
+				<TextBlock x:Name="titleText"
+				           win:TextLineBounds="TrimToCapHeight"
+				           Style="{StaticResource BodyStrongTextBlockStyle}"
+				           Text="{Binding Title}"
+				           TextWrapping="NoWrap" />
+				<TextBlock Margin="0,2,8,0"
+				           Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+				           RelativePanel.Below="titleText"
+				           Style="{StaticResource CaptionTextBlockStyle}"
+				           Text="{Binding Description}"
+				           TextTrimming="CharacterEllipsis" />
+			</RelativePanel>
+		</Grid>
+	</DataTemplate>
 </ResourceDictionary>