Skip to content

Commit bfb745f

Browse files
michael-hawkermichael-hawker
authored
Merge pull request #355 from CommunityToolkit/niels9001/gallery-ux-improvements
[Gallery] UI tweaks
2 parents 8358007 + 680589c commit bfb745f

File tree

4 files changed

+161
-115
lines changed

4 files changed

+161
-115
lines changed

‎common/CommunityToolkit.Labs.Shared/Pages/Shell.xaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
1+
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
22
<Page x:Class="CommunityToolkit.Labs.Shared.Pages.Shell"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

Lines changed: 154 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
1+
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
22
<Page x:Class="CommunityToolkit.Labs.Shared.Renderers.ToolkitSampleRenderer"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -21,14 +21,12 @@
2121
<VisualStateGroup x:Name="CommonStates">
2222
<VisualState x:Name="Normal">
2323
<VisualState.Setters>
24-
<Setter Target="PageControl.MaxHeight" Value="400" />
24+
<Setter Target="PageControl.MaxHeight" Value="600" />
2525
</VisualState.Setters>
2626
</VisualState>
2727
<VisualState x:Name="Tabbed">
2828
<VisualState.Setters>
29-
<Setter Target="ToolBar.DefaultLabelPosition" Value="Right" />
3029
<Setter Target="CodeBtn.Visibility" Value="Collapsed" />
31-
<Setter Target="SeperatorLine.Visibility" Value="Collapsed" />
3230
<Setter Target="SourcecodeExpander.Visibility" Value="Collapsed" />
3331
<Setter Target="SampleCard.BorderThickness" Value="0" />
3432
<Setter Target="SampleCard.CornerRadius" Value="0" />
@@ -38,22 +36,33 @@
3836
</VisualStateGroup>
3937

4038
<VisualStateGroup x:Name="OrientationStates">
41-
<VisualState x:Name="HorizontalSampleLayout">
39+
<VisualState x:Name="DefaultLayout">
4240
<VisualState.StateTriggers>
4341
<AdaptiveTrigger MinWindowWidth="{StaticResource Breakpoint1008Plus}" />
4442
</VisualState.StateTriggers>
4543
</VisualState>
46-
<VisualState x:Name="VerticalSampleLayout">
44+
<VisualState x:Name="VerticalLayout">
4745
<VisualState.StateTriggers>
4846
<AdaptiveTrigger MinWindowWidth="{StaticResource Breakpoint641Plus}" />
4947
<AdaptiveTrigger MinWindowWidth="0" />
5048
</VisualState.StateTriggers>
5149
<VisualState.Setters>
5250
<Setter Target="OptionsPanel.(Grid.Row)" Value="1" />
5351
<Setter Target="OptionsPanel.(Grid.Column)" Value="0" />
54-
<Setter Target="ToolBar.(Grid.Row)" Value="1" />
52+
<Setter Target="OptionsPanel.BorderThickness" Value="0,1,0,0" />
53+
<Setter Target="FixedOptionsBar.BorderThickness" Value="0" />
5554
<Setter Target="ThemeBG.CornerRadius" Value="0" />
56-
<Setter Target="PageControl.Padding" Value="16,16,16,32" />
55+
<Setter Target="ThemeBtn.(Grid.Row)" Value="0" />
56+
<Setter Target="FlowDirectionBtn.(Grid.Row)" Value="0" />
57+
<Setter Target="CodeBtn.(Grid.Row)" Value="0" />
58+
<Setter Target="ThemeBtn.(Grid.Column)" Value="0" />
59+
<Setter Target="FlowDirectionBtn.(Grid.Column)" Value="1" />
60+
<Setter Target="CodeBtn.(Grid.Column)" Value="2" />
61+
<Setter Target="CodePivot.Margin" Value="6,0,8,0" />
62+
<Setter Target="FixedOptionsBar.ColumnSpacing" Value="8" />
63+
<Setter Target="FixedOptionsBar.RowSpacing" Value="0" />
64+
<Setter Target="FixedOptionsBar.Margin" Value="12" />
65+
5766
</VisualState.Setters>
5867
</VisualState>
5968
</VisualStateGroup>
@@ -68,6 +77,7 @@
6877
<Grid.RowDefinitions>
6978
<RowDefinition Height="*" />
7079
<RowDefinition Height="Auto" />
80+
<RowDefinition Height="Auto" />
7181
</Grid.RowDefinitions>
7282
<Grid.ColumnDefinitions>
7383
<ColumnDefinition Width="*" />
@@ -77,119 +87,156 @@
7787
<Grid x:Name="OptionsPanel"
7888
Grid.Column="1"
7989
VerticalAlignment="Stretch"
80-
Background="{ThemeResource LayerOnAcrylicFillColorDefaultBrush}"
90+
Background="{ThemeResource LayerFillColorDefaultBrush}"
8191
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
8292
BorderThickness="1,0,0,0">
83-
<Grid.RowDefinitions>
84-
<RowDefinition Height="Auto" />
85-
<RowDefinition Height="*" />
86-
</Grid.RowDefinitions>
87-
<CommandBar x:Name="ToolBar"
88-
DefaultLabelPosition="Collapsed"
89-
OverflowButtonVisibility="Collapsed">
90-
<!-- wasm:Visibility="Collapsed" -->
91-
<AppBarButton x:Name="ThemeBtn"
92-
Click="ThemeBtn_OnClick"
93-
Label="Toggle theme"
94-
Style="{StaticResource SmallAppBarButtonStyle}"
95-
ToolTipService.ToolTip="Toggle theme">
96-
<AppBarButton.Icon>
97-
<FontIcon Glyph="&#xE793;" />
98-
</AppBarButton.Icon>
99-
</AppBarButton>
93+
<Grid.ColumnDefinitions>
94+
<ColumnDefinition Width="*" />
95+
<ColumnDefinition Width="Auto" />
96+
</Grid.ColumnDefinitions>
97+
<ScrollViewer x:Name="OptionsScrollViewer"
98+
Grid.Row="0"
99+
Grid.Column="0"
100+
MinWidth="256"
101+
Padding="16">
102+
<ContentControl x:Name="OptionsControl"
103+
Content="{x:Bind SampleOptionsPaneInstance, Mode=OneWay}" />
104+
</ScrollViewer>
105+
<Grid x:Name="FixedOptionsBar"
106+
Grid.Column="1"
107+
Padding="4"
108+
HorizontalAlignment="Right"
109+
Background="{ThemeResource LayerFillColorAltBrush}"
110+
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
111+
BorderThickness="1,0,0,0"
112+
RowSpacing="8">
113+
<Grid.RowDefinitions>
114+
<RowDefinition Height="Auto" />
115+
<RowDefinition Height="*" />
116+
<RowDefinition Height="Auto" />
117+
</Grid.RowDefinitions>
118+
<Grid.ColumnDefinitions>
119+
<ColumnDefinition Width="Auto" />
120+
<ColumnDefinition Width="Auto" />
121+
<ColumnDefinition Width="Auto" />
122+
</Grid.ColumnDefinitions>
123+
<Button x:Name="ThemeBtn"
124+
Grid.Row="0"
125+
Width="32"
126+
Height="32"
127+
Padding="4"
128+
HorizontalAlignment="Center"
129+
Click="ThemeBtn_OnClick"
130+
Style="{StaticResource SubtleButtonStyle}"
131+
ToolTipService.ToolTip="Toggle theme">
132+
<Button.Content>
133+
<FontIcon FontSize="16"
134+
Glyph="&#xE793;" />
135+
</Button.Content>
136+
</Button>
100137

101-
<!-- wasm:Visibility="Collapsed" -->
102-
<AppBarButton x:Name="FlowDirectionBtn"
103-
Click="FlowDirectionBtn_OnClick"
104-
Label="Toggle direction"
105-
Style="{StaticResource SmallAppBarButtonStyle}"
106-
ToolTipService.ToolTip="Toggle right-to-left">
107-
<AppBarButton.Icon>
108-
<FontIcon Glyph="&#xE1A0;" />
109-
</AppBarButton.Icon>
110-
</AppBarButton>
111-
<AppBarSeparator x:Name="SeperatorLine" />
112-
<AppBarButton x:Name="CodeBtn"
113-
Click="CodeBtn_OnClick"
114-
Label="View code"
115-
Style="{StaticResource SmallAppBarButtonStyle}"
116-
ToolTipService.ToolTip="View code">
117-
<AppBarButton.Icon>
118-
<FontIcon Glyph="&#xE943;" />
119-
</AppBarButton.Icon>
120-
</AppBarButton>
121-
<!-- TO DO: What URL to link to? -->
122-
<!--<AppBarButton x:Name="GitHubBtn"
123-
ToolTipService.ToolTip="View sample on GitHub"
124-
Visibility="Collapsed"
125-
Style="{StaticResource SmallAppBarButtonStyle}">
126-
<AppBarButton.Icon>
127-
<PathIcon Data="{StaticResource GithubIcon}" />
128-
</AppBarButton.Icon>
129-
</AppBarButton>-->
130-
</CommandBar>
138+
<Button x:Name="FlowDirectionBtn"
139+
Grid.Row="1"
140+
Width="32"
141+
Height="32"
142+
Padding="4"
143+
HorizontalAlignment="Center"
144+
VerticalAlignment="Top"
145+
wasm:Visibility="Collapsed"
146+
Click="FlowDirectionBtn_OnClick"
147+
Style="{StaticResource SubtleButtonStyle}"
148+
ToolTipService.ToolTip="Toggle right-to-left">
131149

150+
<Button.Content>
151+
<FontIcon FontSize="16"
152+
Glyph="&#xE1A0;" />
153+
</Button.Content>
154+
</Button>
132155

133-
<Rectangle Height="1"
134-
VerticalAlignment="Bottom"
135-
Fill="{ThemeResource CardStrokeColorDefaultBrush}" />
136-
<ContentControl x:Name="OptionsControl"
137-
Grid.Row="1"
138-
MinWidth="240"
139-
Margin="16"
140-
HorizontalAlignment="Left"
141-
Content="{x:Bind SampleOptionsPaneInstance, Mode=OneWay}" />
142-
</Grid>
156+
<Button x:Name="CodeBtn"
157+
Grid.Row="2"
158+
Width="32"
159+
Height="32"
160+
Padding="4"
161+
HorizontalAlignment="Center"
162+
Click="CodeBtn_OnClick"
163+
Style="{StaticResource AccentButtonStyle}"
164+
ToolTipService.ToolTip="View code">
165+
<Button.Content>
166+
<FontIcon FontSize="14"
167+
Glyph="&#xE943;" />
168+
</Button.Content>
169+
</Button>
170+
</Grid>
143171

172+
</Grid>
144173

145-
<Grid x:Name="ContentPageHolder">
174+
<Grid x:Name="ContentPageHolder"
175+
Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}">
146176
<!-- A solidbackground we enable when toggling themes. WinUI uses a lot of translucent brushes and might look weird -->
147177
<Border x:Name="ThemeBG"
148178
Background="{ThemeResource SolidBackgroundFillColorBaseBrush}"
149179
CornerRadius="8,0,0,8"
150180
Visibility="Collapsed" />
151-
<ContentControl x:Name="PageControl"
152-
Grid.Row="1"
153-
Padding="16,16,32,16"
154-
HorizontalAlignment="Stretch"
155-
VerticalAlignment="Stretch"
156-
HorizontalContentAlignment="Stretch"
157-
Content="{x:Bind SampleControlInstance, Mode=OneWay}" />
181+
<ScrollViewer HorizontalAlignment="Stretch"
182+
VerticalAlignment="Stretch"
183+
HorizontalContentAlignment="Stretch">
184+
185+
<ContentControl x:Name="PageControl"
186+
Margin="16"
187+
HorizontalAlignment="Stretch"
188+
VerticalAlignment="Stretch"
189+
HorizontalContentAlignment="Stretch"
190+
Background="Yellow"
191+
Content="{x:Bind SampleControlInstance, Mode=OneWay}" />
192+
</ScrollViewer>
158193
</Grid>
159-
</Grid>
160194

161-
<muxc:Expander x:Name="SourcecodeExpander"
162-
Grid.Row="2"
163-
MinHeight="0"
164-
Margin="0,-1,0,0"
165-
Padding="16,0,16,0"
166-
HorizontalAlignment="Stretch"
167-
BorderThickness="0">
168-
<muxc:Expander.Resources>
169-
<x:Double x:Key="ExpanderChevronButtonSize">0</x:Double>
170-
<Thickness x:Key="ExpanderHeaderBorderThickness">0</Thickness>
171-
</muxc:Expander.Resources>
172-
<Pivot MaxHeight="400"
173-
HorizontalAlignment="Stretch">
174-
<Pivot.Resources>
175-
<x:Double x:Key="PivotHeaderItemFontSize">14</x:Double>
176-
</Pivot.Resources>
195+
<muxc:Expander x:Name="SourcecodeExpander"
196+
Grid.Row="2"
197+
Grid.ColumnSpan="3"
198+
MinHeight="0"
199+
Margin="0,-1,0,0"
200+
Padding="0,0,0,0"
201+
HorizontalAlignment="Stretch"
202+
BorderBrush="Transparent"
203+
BorderThickness="0,1,0,0"
204+
CornerRadius="0,0,8,8">
205+
<muxc:Expander.Resources>
206+
<x:Double x:Key="ExpanderChevronButtonSize">0</x:Double>
207+
<Thickness x:Key="ExpanderHeaderBorderThickness">0,0,0,0</Thickness>
208+
<StaticResource x:Key="ExpanderContentBackground"
209+
ResourceKey="LayerFillColorDefaultBrush" />
210+
</muxc:Expander.Resources>
211+
<Grid BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
212+
BorderThickness="0,1,0,0">
213+
<Pivot x:Name="CodePivot"
214+
MaxHeight="400"
215+
Margin="16,0,16,0"
216+
HorizontalAlignment="Stretch">
217+
<Pivot.Resources>
218+
<x:Double x:Key="PivotHeaderItemFontSize">14</x:Double>
219+
</Pivot.Resources>
177220

178-
<PivotItem Header="XAML">
179-
<ScrollViewer>
180-
<TextBlock wasm:IsTextSelectionEnabled="True"
181-
win:IsTextSelectionEnabled="True"
182-
Text="{x:Bind XamlCode, Mode=OneWay}" />
183-
</ScrollViewer>
184-
</PivotItem>
185-
<PivotItem Header="C#">
186-
<ScrollViewer>
187-
<TextBlock wasm:IsTextSelectionEnabled="True"
188-
win:IsTextSelectionEnabled="True"
189-
Text="{x:Bind CSharpCode, Mode=OneWay}" />
190-
</ScrollViewer>
191-
</PivotItem>
192-
</Pivot>
193-
</muxc:Expander>
221+
<PivotItem Header="XAML">
222+
<ScrollViewer>
223+
<TextBlock wasm:IsTextSelectionEnabled="True"
224+
win:IsTextSelectionEnabled="True"
225+
Style="{StaticResource CaptionTextBlockStyle}"
226+
Text="{x:Bind XamlCode, Mode=OneWay}" />
227+
</ScrollViewer>
228+
</PivotItem>
229+
<PivotItem Header="C#">
230+
<ScrollViewer>
231+
<TextBlock wasm:IsTextSelectionEnabled="True"
232+
win:IsTextSelectionEnabled="True"
233+
Style="{StaticResource CaptionTextBlockStyle}"
234+
Text="{x:Bind CSharpCode, Mode=OneWay}" />
235+
</ScrollViewer>
236+
</PivotItem>
237+
</Pivot>
238+
</Grid>
239+
</muxc:Expander>
240+
</Grid>
194241
</Grid>
195242
</Page>

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,13 +156,12 @@ private async Task LoadData()
156156
CSharpCode = await GetMetadataFileContents(Metadata, "xaml.cs");
157157

158158
var sampleControlInstance = (UIElement)Metadata.SampleControlFactory();
159-
159+
160160
// Custom control-based sample options.
161161
if (Metadata.SampleOptionsPaneType is not null && Metadata.SampleOptionsPaneFactory is not null)
162162
{
163163
SampleOptionsPaneInstance = (UIElement)Metadata.SampleOptionsPaneFactory(sampleControlInstance);
164164
}
165-
166165
// Source generater-based sample options
167166
else if (sampleControlInstance is IToolkitSampleGeneratedOptionPropertyContainer propertyContainer)
168167
{
@@ -175,6 +174,10 @@ private async Task LoadData()
175174
SampleOptions = propertyContainer.GeneratedPropertyMetadata
176175
};
177176
}
177+
else
178+
{
179+
OptionsScrollViewer.Visibility = Visibility.Collapsed;
180+
}
178181

179182
// Generated options must be assigned before attempting to render the control,
180183
// else some platforms will nullref from XAML but not properly ignore the exception when binding to generated properties.

‎common/CommunityToolkit.Labs.Shared/Styles/Buttons.xaml‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -348,9 +348,5 @@
348348
<!--<Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />-->
349349
</Style>
350350

351-
<Style x:Key="SmallAppBarButtonStyle"
352-
BasedOn="{StaticResource DefaultAppBarButtonStyle}"
353-
TargetType="AppBarButton">
354-
<Setter Property="Width" Value="36" />
355-
</Style>
351+
356352
</ResourceDictionary>

0 commit comments

Comments
 (0)