Skip to content

Commit 107cc4b

Browse files
niels9001niels9001
authored
Niels9001/DocumentRender UX update pt1 (#162)
* Overall layout, adding styles * Add resizing logic and sample combobox * Layout changes to documentrenderer * Item rename * Fix responsiveness * Margin fix * XAML formatting * XAML formatting * Catch Uno exception * Updated Heading * XAML formatting * Fix * Removed mica * XAML formatting * XAML formatting * XAML formatting * XAML formatting * Feedback * Responsize SampleOptions layout * UI fixes for Uno * Add margin to TabbedPage * Remove redundant code * Add SubtleButtonStyle * XAML formatting * Added visual state and left aligned samples * Added ScrollViewer for samples on tabbed pages * Removed brushtransition * Uno fix
1 parent 37611e3 commit 107cc4b

File tree

11 files changed

+396
-45
lines changed

11 files changed

+396
-45
lines changed

‎common/CommunityToolkit.Labs.Shared/App.xaml‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,29 @@
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
55
<Application.Resources>
6-
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
6+
<ResourceDictionary>
7+
<ResourceDictionary.MergedDictionaries>
8+
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
9+
<ResourceDictionary Source="/Styles/Buttons.xaml" />
10+
</ResourceDictionary.MergedDictionaries>
11+
12+
<!-- Cardstyle for various cards -->
13+
<Style x:Key="CardStyle"
14+
TargetType="Grid">
15+
<Setter Property="BorderThickness" Value="1" />
16+
<Setter Property="Background" Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
17+
<Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
18+
<Setter Property="CornerRadius" Value="8" />
19+
</Style>
20+
21+
22+
23+
<!-- PathData for the GitHub icon -->
24+
<x:String x:Key="GithubIcon">M21.7999992370605,0L19.220495223999,0.26007080078125 16.81787109375,1.00595712661743 14.6436157226563,2.18616962432861 12.7492189407349,3.74921894073486 11.1861696243286,5.64361572265625 10.0059566497803,7.81787109375 9.26007080078125,10.2204961776733 9,12.8000001907349 9.65248012542725,16.8459720611572 11.4694375991821,20.3591785430908 14.2401514053345,23.1291217803955 17.7539005279541,24.9453010559082 18.4305686950684,24.8080005645752 18.6273498535156,24.3296756744385 18.6207065582275,23.4247951507568 18.609375,21.9468746185303 16.4340572357178,22.0373229980469 15.1187467575073,21.4822216033936 14.4708204269409,20.7821025848389 14.2976503372192,20.4375 13.8297338485718,19.5214366912842 13.3685493469238,18.947265625 12.8765497207642,18.5656261444092 12.3995819091797,18.1091804504395 12.4844465255737,17.87890625 12.7874250411987,17.7974605560303 12.9647998809814,17.7875003814697 13.8134965896606,18.0311241149902 14.4276065826416,18.4802703857422 14.8007507324219,18.9127178192139 14.926549911499,19.1062507629395 15.8880548477173,20.1437015533447 16.9443283081055,20.494140625 17.9229640960693,20.416259765625 18.6515502929688,20.1687507629395 18.9645938873291,19.1242198944092 19.4640502929688,18.4593753814697 17.3543262481689,18.0241260528564 15.4833002090454,17.014066696167 14.1450357437134,15.1450166702271 13.6336002349854,12.1328001022339 13.9853601455688,10.2268438339233 14.9500007629395,8.69764995574951 14.7027282714844,7.54188776016235 14.7441072463989,6.53565359115601 15.0765495300293,5.30859994888306 15.2825078964233,5.28076791763306 15.9191312789917,5.34375619888306 17.0145378112793,5.71729135513306 18.596851348877,6.62109994888306 21.799976348877,6.19062519073486 25.004674911499,6.62265014648438 26.5845413208008,5.71818733215332 27.6791000366211,5.34472513198853 28.315746307373,5.28210020065308 28.5218753814697,5.31015014648438 28.8556652069092,6.53784370422363 28.8976573944092,7.5438346862793 28.6499996185303,8.69764995574951 29.6154251098633,10.2268533706665 29.9656257629395,12.1328001022339 29.453296661377,15.1497011184692 28.1123065948486,17.0164012908936 26.2366523742676,18.020601272583 24.120325088501,18.4500007629395 24.7275562286377,19.3355484008789 24.9890747070313,20.8187503814697 24.9804744720459,23.0584030151367 24.9718742370605,24.3312511444092 25.1693305969238,24.8128852844238 25.8531246185303,24.9453010559082 29.3641395568848,23.1273632049561 32.1326217651367,20.3568344116211 33.948070526123,16.8442134857178 34.5999984741211,12.8000001907349 34.3399276733398,10.2204961776733 33.5940399169922,7.81787109375 32.4138298034668,5.64361572265625 30.8507804870605,3.74921894073486 28.9563827514648,2.18616962432861 26.7821273803711,1.00595712661743 24.3795032501221,0.26007080078125 21.7999992370605,0z</x:String>
25+
26+
<!-- Breakpoints -->
27+
<x:Double x:Key="Breakpoint840Plus">841</x:Double>
28+
</ResourceDictionary>
729
</Application.Resources>
30+
831
</Application>

‎common/CommunityToolkit.Labs.Shared/CommunityToolkit.Labs.Shared.projitems‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,10 @@
6161
<SubType>Designer</SubType>
6262
<Generator>MSBuild:Compile</Generator>
6363
</Page>
64+
<Page Include="$(MSBuildThisFileDirectory)Styles\Buttons.xaml">
65+
<SubType>Designer</SubType>
66+
<Generator>MSBuild:Compile</Generator>
67+
</Page>
6468
<Page Include="$(MSBuildThisFileDirectory)TabbedPage.xaml">
6569
<SubType>Designer</SubType>
6670
<Generator>MSBuild:Compile</Generator>

‎common/CommunityToolkit.Labs.Shared/NavigationPage.xaml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
77
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
8-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
98
mc:Ignorable="d">
109

1110
<Grid>
1211
<muxc:NavigationView MenuItemsSource="{x:Bind NavigationViewItems}"
1312
SelectionChanged="OnSelectionChanged">
13+
1414
<Frame x:Name="NavFrame" />
15+
1516
</muxc:NavigationView>
1617
</Grid>
1718
</Page>

‎common/CommunityToolkit.Labs.Shared/Renderers/GeneratedSampleOptionsRenderer.xaml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,5 +46,4 @@
4646
</Style>
4747
</ItemsControl.ItemContainerStyle>
4848
</ItemsControl>
49-
50-
</UserControl>
49+
</UserControl>

‎common/CommunityToolkit.Labs.Shared/Renderers/ToolkitDocumentationRenderer.xaml‎

Lines changed: 124 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,20 @@
88
xmlns:metadata="using:CommunityToolkit.Labs.Core.SourceGenerators.Metadata"
99
xmlns:renderer="using:CommunityToolkit.Labs.Shared.Renderers"
1010
xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
11-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
1211
mc:Ignorable="d">
1312

1413
<Page.Resources>
1514
<DataTemplate x:Key="DocumentTemplate"
1615
x:DataType="x:String">
1716
<TextBlock win:IsTextSelectionEnabled="True"
18-
Text="{Binding}" />
17+
Text="{Binding}"
18+
TextWrapping="WrapWholeWords" />
1919
</DataTemplate>
2020

2121
<DataTemplate x:Key="SampleTemplate"
2222
x:DataType="metadata:ToolkitSampleMetadata">
23-
<!-- TODO: Display Header for name of sample? -->
24-
<renderer:ToolkitSampleRenderer Metadata="{Binding}" />
23+
<renderer:ToolkitSampleRenderer Margin="0,0,0,24"
24+
Metadata="{Binding}" />
2525
</DataTemplate>
2626

2727
<local:DocOrSampleTemplateSelector x:Key="DocOrSampleTemplateSelector"
@@ -30,23 +30,129 @@
3030
</Page.Resources>
3131

3232
<Grid>
33-
<Grid.ColumnDefinitions>
34-
<ColumnDefinition Width="*" />
35-
<ColumnDefinition Width="Auto" />
36-
</Grid.ColumnDefinitions>
37-
<ScrollViewer>
33+
<Grid.RowDefinitions>
34+
<RowDefinition Height="Auto" />
35+
<RowDefinition Height="*" />
36+
</Grid.RowDefinitions>
37+
<VisualStateManager.VisualStateGroups>
38+
<VisualStateGroup x:Name="LayoutVisualStates">
39+
<VisualState x:Name="WideLayout">
40+
<VisualState.StateTriggers>
41+
<AdaptiveTrigger MinWindowWidth="{StaticResource Breakpoint840Plus}" />
42+
</VisualState.StateTriggers>
43+
<VisualState.Setters />
44+
</VisualState>
45+
<VisualState x:Name="NarrowLayout">
46+
<VisualState.StateTriggers>
47+
<AdaptiveTrigger MinWindowWidth="0" />
48+
</VisualState.StateTriggers>
49+
<VisualState.Setters>
50+
<Setter Target="DocItemsControl.Margin" Value="16,0,16,0" />
51+
<Setter Target="HeaderGrid.Margin" Value="16,16,16,0" />
52+
</VisualState.Setters>
53+
</VisualState>
54+
</VisualStateGroup>
55+
56+
<VisualStateGroup x:Name="HeaderStates">
57+
<VisualState x:Name="Normal" />
58+
<VisualState x:Name="Collapsed">
59+
<VisualState.Setters>
60+
<Setter Target="HeaderGrid.Visibility" Value="Collapsed" />
61+
</VisualState.Setters>
62+
</VisualState>
63+
</VisualStateGroup>
64+
</VisualStateManager.VisualStateGroups>
65+
66+
<ScrollViewer Grid.Row="1">
3867
<ItemsControl x:Name="DocItemsControl"
68+
Margin="40,0,40,0"
3969
ItemTemplateSelector="{StaticResource DocOrSampleTemplateSelector}"
4070
ItemsSource="{x:Bind DocsAndSamples, Mode=OneWay}" />
4171
</ScrollViewer>
42-
<ItemsControl Grid.Column="1"
43-
ItemsSource="{x:Bind Samples, Mode=OneWay}">
44-
<ItemsControl.ItemTemplate>
45-
<DataTemplate x:DataType="metadata:ToolkitSampleMetadata">
46-
<HyperlinkButton Click="SampleListHyperlink_Click"
47-
Content="{Binding DisplayName}" />
48-
</DataTemplate>
49-
</ItemsControl.ItemTemplate>
50-
</ItemsControl>
72+
73+
<!-- Header grid -->
74+
<Grid x:Name="HeaderGrid"
75+
Margin="40,16,40,16"
76+
VerticalAlignment="Top">
77+
<Grid.RowDefinitions>
78+
<RowDefinition Height="Auto" />
79+
<RowDefinition Height="Auto" />
80+
<RowDefinition Height="Auto" />
81+
</Grid.RowDefinitions>
82+
<TextBlock x:Name="HeaderText"
83+
VerticalAlignment="Stretch"
84+
win:AutomationProperties.HeadingLevel="Level1"
85+
Style="{StaticResource TitleTextBlockStyle}"
86+
Text="{x:Bind Metadata.Title, Mode=OneWay}" />
87+
88+
<TextBlock Grid.Row="1"
89+
Margin="0,8,0,0"
90+
HorizontalAlignment="Left"
91+
Text="{x:Bind Metadata.Description, Mode=OneWay}"
92+
TextWrapping="WrapWholeWords" />
93+
94+
<Grid Grid.Row="2"
95+
Margin="0,16,0,0"
96+
ColumnSpacing="8">
97+
98+
<StackPanel Orientation="Horizontal"
99+
Spacing="8">
100+
<Button Grid.Column="0"
101+
Style="{StaticResource AccentButtonStyle}">
102+
<StackPanel Orientation="Horizontal">
103+
<FontIcon FontSize="14"
104+
Glyph="&#xE130;" />
105+
<TextBlock Margin="8,0,0,0"
106+
Text="See the docs" />
107+
</StackPanel>
108+
</Button>
109+
<Button Grid.Column="1"
110+
Style="{StaticResource AccentButtonStyle}">
111+
<StackPanel Orientation="Horizontal">
112+
<PathIcon Margin="-3"
113+
VerticalAlignment="Center"
114+
Data="{StaticResource GithubIcon}">
115+
<PathIcon.RenderTransform>
116+
<CompositeTransform ScaleX="0.65"
117+
ScaleY="0.65"
118+
TranslateX="-5"
119+
TranslateY="5" />
120+
</PathIcon.RenderTransform>
121+
</PathIcon>
122+
<TextBlock Margin="-4,0,0,0"
123+
Text="View in GitHub" />
124+
</StackPanel>
125+
</Button>
126+
</StackPanel>
127+
128+
<StackPanel HorizontalAlignment="Right"
129+
VerticalAlignment="Center"
130+
Orientation="Horizontal"
131+
Spacing="8">
132+
<TextBlock VerticalAlignment="Center"
133+
Style="{StaticResource CaptionTextBlockStyle}"
134+
Text="Jump to:" />
135+
<ComboBox x:Name="SampleSelectionBox"
136+
ItemsSource="{x:Bind Samples, Mode=OneWay}"
137+
SelectedIndex="0"
138+
SelectionChanged="SampleSelectionBox_SelectionChanged">
139+
<ComboBox.ItemTemplate>
140+
<DataTemplate x:DataType="metadata:ToolkitSampleMetadata">
141+
<TextBlock Text="{Binding DisplayName, Mode=OneWay}" />
142+
</DataTemplate>
143+
</ComboBox.ItemTemplate>
144+
</ComboBox>
145+
<Button Height="32">
146+
<FontIcon FontSize="14"
147+
Glyph="&#xE1A0;" />
148+
</Button>
149+
150+
<Button Height="32">
151+
<FontIcon FontSize="14"
152+
Glyph="&#xE793;" />
153+
</Button>
154+
</StackPanel>
155+
</Grid>
156+
</Grid>
51157
</Grid>
52158
</Page>

‎common/CommunityToolkit.Labs.Shared/Renderers/ToolkitDocumentationRenderer.xaml.cs‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,15 +136,14 @@ private async Task LoadData()
136136
}
137137
}
138138

139-
private void SampleListHyperlink_Click(object sender, RoutedEventArgs e)
139+
private void SampleSelectionBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
140140
{
141-
if (sender is HyperlinkButton btn && btn.DataContext is ToolkitSampleMetadata metadata)
141+
if (sender is ComboBox comboBox && comboBox.SelectedItem is ToolkitSampleMetadata metadata)
142142
{
143143
var container = DocItemsControl.ContainerFromItem(metadata) as UIElement;
144144
container?.StartBringIntoView();
145145
}
146146
}
147-
148147
private static async Task<string> GetDocumentationFileContents(ToolkitFrontMatter metadata)
149148
{
150149
// TODO: https://github.com/CommunityToolkit/Labs-Windows/issues/142

‎common/CommunityToolkit.Labs.Shared/Renderers/ToolkitSampleRenderer.xaml‎

Lines changed: 97 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,111 @@
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
xmlns:local="using:CommunityToolkit.Labs.Shared"
77
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8+
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
89
xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
9-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
1010
mc:Ignorable="d">
1111

1212
<Grid>
13+
1314
<Grid.RowDefinitions>
14-
<RowDefinition />
15-
<RowDefinition Height="1.5*" />
15+
<RowDefinition Height="Auto" />
16+
<RowDefinition Height="Auto" />
17+
<RowDefinition Height="Auto" />
1618
</Grid.RowDefinitions>
17-
<Grid.ColumnDefinitions>
18-
<ColumnDefinition />
19-
<ColumnDefinition Width="Auto" />
20-
</Grid.ColumnDefinitions>
19+
<VisualStateManager.VisualStateGroups>
20+
<VisualStateGroup>
21+
<VisualState x:Name="HorizontalSampleLayout">
22+
<VisualState.StateTriggers>
23+
<AdaptiveTrigger MinWindowWidth="{StaticResource Breakpoint840Plus}" />
24+
</VisualState.StateTriggers>
25+
</VisualState>
26+
<VisualState x:Name="VerticalSampleLayout">
27+
<VisualState.StateTriggers>
28+
<AdaptiveTrigger MinWindowWidth="0" />
29+
</VisualState.StateTriggers>
30+
<VisualState.Setters>
31+
<Setter Target="OptionsControl.HorizontalContentAlignment" Value="Left" />
32+
<Setter Target="OptionsControl.Margin" Value="0,24,0,0" />
33+
<Setter Target="OptionsControl.(Grid.Row)" Value="1" />
34+
<Setter Target="OptionsControl.(Grid.Column)" Value="0" />
35+
<Setter Target="OptionsControl.(Grid.ColumnSpan)" Value="2" />
36+
</VisualState.Setters>
37+
</VisualState>
38+
</VisualStateGroup>
39+
</VisualStateManager.VisualStateGroups>
40+
41+
<Grid>
42+
<TextBlock Grid.ColumnSpan="2"
43+
Margin="0,0,0,8"
44+
VerticalAlignment="Center"
45+
Style="{StaticResource BodyStrongTextBlockStyle}"
46+
Text="{x:Bind Metadata.DisplayName}" />
47+
48+
<Button Grid.Column="1"
49+
Margin="0,-2,-6,0"
50+
Padding="4,4,-2,4"
51+
HorizontalAlignment="Right"
52+
Style="{StaticResource SubtleButtonStyle}"
53+
ToolTipService.ToolTip="View sample on GitHub">
54+
<PathIcon Margin="-3"
55+
VerticalAlignment="Center"
56+
Data="{StaticResource GithubIcon}"
57+
Foreground="{ThemeResource TextFillColorSecondaryBrush}">
58+
<PathIcon.RenderTransform>
59+
<CompositeTransform ScaleX="0.65"
60+
ScaleY="0.65"
61+
TranslateY="5" />
62+
</PathIcon.RenderTransform>
63+
</PathIcon>
64+
</Button>
65+
</Grid>
66+
67+
<Grid Grid.Row="1"
68+
CornerRadius="8,8,0,0"
69+
Style="{StaticResource CardStyle}">
70+
<Grid.RowDefinitions>
71+
<RowDefinition Height="Auto" />
72+
<RowDefinition Height="Auto" />
73+
</Grid.RowDefinitions>
74+
<Grid.ColumnDefinitions>
75+
<ColumnDefinition Width="*" />
76+
<ColumnDefinition Width="Auto" />
77+
</Grid.ColumnDefinitions>
2178

22-
<ContentControl Content="{x:Bind SampleControlInstance, Mode=OneWay}" />
79+
<Grid x:Name="PageControlHolder"
80+
Grid.Column="0"
81+
Padding="0"
82+
Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
83+
CornerRadius="8,0,0,0">
84+
<ContentControl x:Name="PageControl"
85+
Margin="24"
86+
HorizontalAlignment="Left"
87+
VerticalAlignment="Center"
88+
HorizontalContentAlignment="Stretch"
89+
Content="{x:Bind SampleControlInstance, Mode=OneWay}" />
90+
</Grid>
2391

24-
<Border Grid.RowSpan="2"
25-
Grid.Column="1"
26-
Padding="20">
27-
<ContentControl Content="{x:Bind SampleOptionsPaneInstance, Mode=OneWay}" />
28-
</Border>
92+
<!-- TO DO: HIDE CONTROL WHEN EMPTY (TO REMOVE GAP)? -->
93+
<ContentControl x:Name="OptionsControl"
94+
Grid.Column="1"
95+
Margin="24"
96+
HorizontalAlignment="Center"
97+
Content="{x:Bind SampleOptionsPaneInstance, Mode=OneWay}" />
98+
</Grid>
2999

30-
<Border Grid.Row="1">
31-
<Pivot>
100+
<muxc:Expander Grid.Row="2"
101+
Margin="0,-1,0,0"
102+
HorizontalAlignment="Stretch"
103+
CornerRadius="0,0,8,8">
104+
<muxc:Expander.Header>
105+
<StackPanel Orientation="Horizontal">
106+
<TextBlock Margin="8,0,0,0"
107+
VerticalAlignment="Center"
108+
FontWeight="SemiBold"
109+
Text="Source code" />
110+
</StackPanel>
111+
</muxc:Expander.Header>
112+
<Pivot HorizontalAlignment="Stretch">
32113
<Pivot.Resources>
33114
<x:Double x:Key="PivotHeaderItemFontSize">14</x:Double>
34115
</Pivot.Resources>
@@ -46,6 +127,6 @@
46127
</ScrollViewer>
47128
</PivotItem>
48129
</Pivot>
49-
</Border>
130+
</muxc:Expander>
50131
</Grid>
51132
</Page>

0 commit comments

Comments
 (0)