Skip to content

Commit ff5c60f

Browse files
ArlodotexeArlodotexe
committed
Template out LABS label, display on home page items
1 parent 357b6f5 commit ff5c60f

File tree

2 files changed

+91
-84
lines changed

2 files changed

+91
-84
lines changed

‎CommunityToolkit.App.Shared/Styles/Buttons.xaml

+15-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
1+
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
33
xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
44
xmlns:controls="using:Microsoft.UI.Xaml.Controls"
@@ -354,20 +354,22 @@
354354
<Setter Property="Template">
355355
<Setter.Value>
356356
<ControlTemplate TargetType="controls:InfoBadge">
357-
<Grid x:Name="RootGrid"
358-
Padding="{TemplateBinding Padding}"
359-
Background="#FFC225"
360-
CornerRadius="4">
361-
<TextBlock x:Name="ValueTextBlock"
362-
HorizontalAlignment="Center"
363-
VerticalAlignment="Center"
364-
FontSize="12"
365-
FontWeight="SemiBold"
366-
Foreground="Black"
367-
Text="LABS" />
368-
</Grid>
357+
<ContentControl ContentTemplate="{StaticResource LabsLabelIconTemplate}" />
369358
</ControlTemplate>
370359
</Setter.Value>
371360
</Setter>
372361
</Style>
362+
363+
<DataTemplate x:Key="LabsLabelIconTemplate">
364+
<Grid Padding="4,0,4,0"
365+
Background="#FFC225"
366+
CornerRadius="4">
367+
<TextBlock HorizontalAlignment="Center"
368+
VerticalAlignment="Center"
369+
FontSize="12"
370+
FontWeight="SemiBold"
371+
Foreground="Black"
372+
Text="LABS" />
373+
</Grid>
374+
</DataTemplate>
373375
</ResourceDictionary>

‎CommunityToolkit.App.Shared/Styles/ItemTemplates.xaml

+76-71
Original file line numberDiff line numberDiff line change
@@ -5,85 +5,90 @@
55
xmlns:meta="using:CommunityToolkit.Tooling.SampleGen.Metadata"
66
xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
77

8-
<converters:StringToUriConverter x:Name="stringToUriConverter" />
8+
<converters:StringToUriConverter x:Name="stringToUriConverter" />
99

10-
<!-- Kind of not supported in Uno (at least directly like this) see https://github.com/unoplatform/uno/issues/7582 (and related root issue)
10+
<!-- Kind of not supported in Uno (at least directly like this) see https://github.com/unoplatform/uno/issues/7582 (and related root issue)
1111
<Style x:Key="IndentedGridViewItemStyle"
1212
BasedOn="{StaticResource DefaultGridViewItemStyle}"
1313
TargetType="GridViewItem">
1414
<Setter Property="Margin" Value="12,0,0,12" />
1515
</Style>-->
1616

17-
<DataTemplate x:Key="ControlItemAutoSuggestBoxTemplate"
18-
x:DataType="meta:ToolkitFrontMatter">
19-
<Grid>
20-
<TextBlock Text="{Binding Title}" />
21-
</Grid>
22-
</DataTemplate>
17+
<DataTemplate x:Key="ControlItemAutoSuggestBoxTemplate"
18+
x:DataType="meta:ToolkitFrontMatter">
19+
<Grid>
20+
<TextBlock Text="{Binding Title}" />
21+
</Grid>
22+
</DataTemplate>
2323

24-
<DataTemplate x:Key="ControlItemGridViewTemplate"
25-
x:DataType="meta:ToolkitFrontMatter">
26-
<Grid x:Name="controlRoot"
27-
Width="360"
28-
Height="90"
29-
Margin="0"
30-
Padding="8"
31-
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
32-
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
33-
BorderThickness="1"
34-
CornerRadius="{StaticResource ControlCornerRadius}">
24+
<DataTemplate x:Key="ControlItemGridViewTemplate"
25+
x:DataType="meta:ToolkitFrontMatter">
26+
<Grid x:Name="controlRoot"
27+
Width="360"
28+
Height="90"
29+
Margin="0"
30+
Padding="8"
31+
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
32+
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
33+
BorderThickness="1"
34+
CornerRadius="{StaticResource ControlCornerRadius}">
3535

36-
<Grid.ColumnDefinitions>
37-
<ColumnDefinition Width="Auto" />
38-
<ColumnDefinition Width="*" />
39-
<ColumnDefinition Width="Auto" />
40-
</Grid.ColumnDefinitions>
41-
<VisualStateManager.VisualStateGroups>
42-
<VisualStateGroup x:Name="LayoutVisualStates">
43-
<VisualState x:Name="WideLayout">
44-
<VisualState.StateTriggers>
45-
<AdaptiveTrigger MinWindowWidth="{StaticResource Breakpoint840Plus}" />
46-
</VisualState.StateTriggers>
47-
<VisualState.Setters />
48-
</VisualState>
49-
<VisualState x:Name="NarrowLayout">
50-
<VisualState.StateTriggers>
51-
<AdaptiveTrigger MinWindowWidth="0" />
52-
</VisualState.StateTriggers>
53-
<VisualState.Setters>
54-
<Setter Target="controlRoot.Width" Value="400" />
55-
<Setter Target="controlRoot.Height" Value="100" />
56-
</VisualState.Setters>
57-
</VisualState>
58-
</VisualStateGroup>
59-
</VisualStateManager.VisualStateGroups>
60-
<Grid Width="72"
61-
CornerRadius="{ThemeResource ControlCornerRadius}">
62-
<Image x:Name="gridImage"
63-
Width="48"
64-
VerticalAlignment="Center"
65-
Stretch="Uniform">
66-
<Image.Source>
67-
<BitmapImage UriSource="{Binding Icon, Converter={StaticResource stringToUriConverter}}" />
68-
</Image.Source>
69-
</Image>
70-
</Grid>
36+
<Grid.ColumnDefinitions>
37+
<ColumnDefinition Width="Auto" />
38+
<ColumnDefinition Width="*" />
39+
<ColumnDefinition Width="Auto" />
40+
</Grid.ColumnDefinitions>
41+
<VisualStateManager.VisualStateGroups>
42+
<VisualStateGroup x:Name="LayoutVisualStates">
43+
<VisualState x:Name="WideLayout">
44+
<VisualState.StateTriggers>
45+
<AdaptiveTrigger MinWindowWidth="{StaticResource Breakpoint840Plus}" />
46+
</VisualState.StateTriggers>
47+
<VisualState.Setters />
48+
</VisualState>
49+
<VisualState x:Name="NarrowLayout">
50+
<VisualState.StateTriggers>
51+
<AdaptiveTrigger MinWindowWidth="0" />
52+
</VisualState.StateTriggers>
53+
<VisualState.Setters>
54+
<Setter Target="controlRoot.Width" Value="400" />
55+
<Setter Target="controlRoot.Height" Value="100" />
56+
</VisualState.Setters>
57+
</VisualState>
58+
</VisualStateGroup>
59+
</VisualStateManager.VisualStateGroups>
60+
<Grid Width="72"
61+
CornerRadius="{ThemeResource ControlCornerRadius}">
62+
<Image x:Name="gridImage"
63+
Width="48"
64+
VerticalAlignment="Center"
65+
Stretch="Uniform">
66+
<Image.Source>
67+
<BitmapImage UriSource="{Binding Icon, Converter={StaticResource stringToUriConverter}}" />
68+
</Image.Source>
69+
</Image>
7170

72-
<RelativePanel Grid.Column="1"
73-
Grid.ColumnSpan="2"
74-
Margin="16,6,0,0">
75-
<TextBlock x:Name="titleText"
76-
win:TextLineBounds="TrimToCapHeight"
77-
Style="{StaticResource BodyStrongTextBlockStyle}"
78-
Text="{Binding Title}"
79-
TextWrapping="NoWrap" />
80-
<TextBlock Margin="0,2,8,0"
81-
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
82-
RelativePanel.Below="titleText"
83-
Style="{StaticResource CaptionTextBlockStyle}"
84-
Text="{Binding Description}"
85-
TextTrimming="CharacterEllipsis" />
86-
</RelativePanel>
87-
</Grid>
88-
</DataTemplate>
71+
<ContentControl HorizontalAlignment="Right"
72+
VerticalAlignment="Bottom"
73+
ContentTemplate="{StaticResource LabsLabelIconTemplate}"
74+
Visibility="{Binding IsExperimental}" />
75+
</Grid>
76+
77+
<RelativePanel Grid.Column="1"
78+
Grid.ColumnSpan="2"
79+
Margin="16,6,0,0">
80+
<TextBlock x:Name="titleText"
81+
win:TextLineBounds="TrimToCapHeight"
82+
Style="{StaticResource BodyStrongTextBlockStyle}"
83+
Text="{Binding Title}"
84+
TextWrapping="NoWrap" />
85+
<TextBlock Margin="0,2,8,0"
86+
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
87+
RelativePanel.Below="titleText"
88+
Style="{StaticResource CaptionTextBlockStyle}"
89+
Text="{Binding Description}"
90+
TextTrimming="CharacterEllipsis" />
91+
</RelativePanel>
92+
</Grid>
93+
</DataTemplate>
8994
</ResourceDictionary>

0 commit comments

Comments
 (0)