Skip to content

Commit

Permalink
Template out LABS label, display on home page items
Browse files Browse the repository at this point in the history
  • Loading branch information
@Arlodotexe
Arlodotexe committed Nov 14, 2023
1 parent 0abb272 commit a620324
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 84 deletions.
28 changes: 15 additions & 13 deletions CommunityToolkit.App.Shared/Styles/Buttons.xaml
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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>
147 changes: 76 additions & 71 deletions CommunityToolkit.App.Shared/Styles/ItemTemplates.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

0 comments on commit a620324

Please sign in to comment.