Skip to content

Commit 0c7b6b1

Browse files
niels9001niels9001
committed
Improvements to sample renderer
1 parent b2b9f85 commit 0c7b6b1

File tree

3 files changed

+103
-78
lines changed

3 files changed

+103
-78
lines changed

‎common/CommunityToolkit.Labs.Shared/AppLoadingView.xaml.cs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -85,14 +85,14 @@ protected override void OnNavigatedTo(NavigationEventArgs e)
8585
return;
8686
}
8787

88-
#if LABS_ALL_SAMPLES
89-
ScheduleNavigate(typeof(Shell), sampleDocs);
90-
#else
88+
//#if LABS_ALL_SAMPLES
89+
// ScheduleNavigate(typeof(Shell), sampleDocs);
90+
//#else
9191
var samples = FindReferencedSamples().ToArray();
9292

9393
(IEnumerable<ToolkitSampleMetadata> Samples, IEnumerable<ToolkitFrontMatter> Docs, bool AreDocsFirst) displayInfo = (samples, sampleDocs, false);
9494
ScheduleNavigate(typeof(TabbedPage), displayInfo);
95-
#endif
95+
//#endif
9696
}
9797

9898
// Needed because Frame.Navigate doesn't work inside of the OnNavigatedTo override.

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

Lines changed: 94 additions & 72 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="400" />-->
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,30 @@
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" />
5655
<Setter Target="PageControl.Padding" Value="16,16,16,32" />
56+
<Setter Target="ThemeBtn.(Grid.Row)" Value="0" />
57+
<Setter Target="FlowDirectionBtn.(Grid.Row)" Value="0" />
58+
<Setter Target="CodeBtn.(Grid.Row)" Value="0" />
59+
<Setter Target="ThemeBtn.(Grid.Column)" Value="0" />
60+
<Setter Target="FlowDirectionBtn.(Grid.Column)" Value="1" />
61+
<Setter Target="CodeBtn.(Grid.Column)" Value="2" />
62+
<Setter Target="CodePivot.Margin" Value="6,0,8,0" />
5763
</VisualState.Setters>
5864
</VisualState>
5965
</VisualStateGroup>
@@ -68,6 +74,7 @@
6874
<Grid.RowDefinitions>
6975
<RowDefinition Height="*" />
7076
<RowDefinition Height="Auto" />
77+
<RowDefinition Height="Auto" />
7178
</Grid.RowDefinitions>
7279
<Grid.ColumnDefinitions>
7380
<ColumnDefinition Width="*" />
@@ -77,119 +84,134 @@
7784
<Grid x:Name="OptionsPanel"
7885
Grid.Column="1"
7986
VerticalAlignment="Stretch"
80-
Background="{ThemeResource LayerOnAcrylicFillColorDefaultBrush}"
87+
Background="{ThemeResource LayerFillColorDefaultBrush}"
8188
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
8289
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" -->
90+
<Grid.ColumnDefinitions>
91+
<ColumnDefinition Width="*" />
92+
<ColumnDefinition Width="Auto" />
93+
</Grid.ColumnDefinitions>
94+
95+
<Grid x:Name="FixedOptionsBar"
96+
Grid.Column="1"
97+
HorizontalAlignment="Right"
98+
Background="{ThemeResource LayerFillColorAltBrush}"
99+
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
100+
BorderThickness="1,0,0,0">
101+
<Grid.RowDefinitions>
102+
<RowDefinition Height="Auto" />
103+
<RowDefinition Height="*" />
104+
<RowDefinition Height="Auto" />
105+
</Grid.RowDefinitions>
106+
<Grid.ColumnDefinitions>
107+
<ColumnDefinition Width="Auto" />
108+
<ColumnDefinition Width="Auto" />
109+
<ColumnDefinition Width="Auto" />
110+
</Grid.ColumnDefinitions>
91111
<AppBarButton x:Name="ThemeBtn"
112+
Grid.Row="0"
92113
Click="ThemeBtn_OnClick"
93114
Label="Toggle theme"
115+
LabelPosition="Collapsed"
94116
Style="{StaticResource SmallAppBarButtonStyle}"
95117
ToolTipService.ToolTip="Toggle theme">
96118
<AppBarButton.Icon>
97119
<FontIcon Glyph="&#xE793;" />
98120
</AppBarButton.Icon>
99121
</AppBarButton>
100122

101-
<!-- wasm:Visibility="Collapsed" -->
102123
<AppBarButton x:Name="FlowDirectionBtn"
124+
Grid.Row="1"
125+
wasm:Visibility="Collapsed"
103126
Click="FlowDirectionBtn_OnClick"
104127
Label="Toggle direction"
128+
LabelPosition="Collapsed"
105129
Style="{StaticResource SmallAppBarButtonStyle}"
106130
ToolTipService.ToolTip="Toggle right-to-left">
107131
<AppBarButton.Icon>
108132
<FontIcon Glyph="&#xE1A0;" />
109133
</AppBarButton.Icon>
110134
</AppBarButton>
111-
<AppBarSeparator x:Name="SeperatorLine" />
135+
112136
<AppBarButton x:Name="CodeBtn"
137+
Grid.Row="2"
113138
Click="CodeBtn_OnClick"
114139
Label="View code"
140+
LabelPosition="Collapsed"
115141
Style="{StaticResource SmallAppBarButtonStyle}"
116142
ToolTipService.ToolTip="View code">
117143
<AppBarButton.Icon>
118144
<FontIcon Glyph="&#xE943;" />
119145
</AppBarButton.Icon>
120146
</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>
131-
132-
133-
<Rectangle Height="1"
134-
VerticalAlignment="Bottom"
135-
Fill="{ThemeResource CardStrokeColorDefaultBrush}" />
147+
</Grid>
136148
<ContentControl x:Name="OptionsControl"
137-
Grid.Row="1"
138-
MinWidth="240"
149+
Grid.Row="0"
150+
Grid.Column="0"
151+
MinWidth="256"
139152
Margin="16"
140153
HorizontalAlignment="Left"
141154
Content="{x:Bind SampleOptionsPaneInstance, Mode=OneWay}" />
142155
</Grid>
143156

144-
145-
<Grid x:Name="ContentPageHolder">
157+
<Grid x:Name="ContentPageHolder"
158+
Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}">
146159
<!-- A solidbackground we enable when toggling themes. WinUI uses a lot of translucent brushes and might look weird -->
147160
<Border x:Name="ThemeBG"
148161
Background="{ThemeResource SolidBackgroundFillColorBaseBrush}"
149162
CornerRadius="8,0,0,8"
150163
Visibility="Collapsed" />
151164
<ContentControl x:Name="PageControl"
152-
Grid.Row="1"
153-
Padding="16,16,32,16"
165+
Padding="24,24,32,24"
154166
HorizontalAlignment="Stretch"
155167
VerticalAlignment="Stretch"
156168
HorizontalContentAlignment="Stretch"
157169
Content="{x:Bind SampleControlInstance, Mode=OneWay}" />
158170
</Grid>
159-
</Grid>
160171

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>
172+
<muxc:Expander x:Name="SourcecodeExpander"
173+
Grid.Row="2"
174+
Grid.ColumnSpan="3"
175+
MinHeight="0"
176+
Margin="0,-1,0,0"
177+
Padding="0,0,0,0"
178+
HorizontalAlignment="Stretch"
179+
BorderBrush="Transparent"
180+
BorderThickness="0,1,0,0"
181+
CornerRadius="0,0,8,8">
182+
<muxc:Expander.Resources>
183+
<x:Double x:Key="ExpanderChevronButtonSize">0</x:Double>
184+
<Thickness x:Key="ExpanderHeaderBorderThickness">0,0,0,0</Thickness>
185+
<StaticResource x:Key="ExpanderContentBackground"
186+
ResourceKey="LayerFillColorDefaultBrush" />
187+
</muxc:Expander.Resources>
188+
<Grid BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
189+
BorderThickness="0,1,0,0">
190+
<Pivot x:Name="CodePivot"
191+
MaxHeight="400"
192+
Margin="16,0,16,0"
193+
HorizontalAlignment="Stretch">
194+
<Pivot.Resources>
195+
<x:Double x:Key="PivotHeaderItemFontSize">14</x:Double>
196+
</Pivot.Resources>
177197

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>
198+
<PivotItem Header="XAML">
199+
<ScrollViewer>
200+
<TextBlock wasm:IsTextSelectionEnabled="True"
201+
win:IsTextSelectionEnabled="True"
202+
Text="{x:Bind XamlCode, Mode=OneWay}" />
203+
</ScrollViewer>
204+
</PivotItem>
205+
<PivotItem Header="C#">
206+
<ScrollViewer>
207+
<TextBlock wasm:IsTextSelectionEnabled="True"
208+
win:IsTextSelectionEnabled="True"
209+
Text="{x:Bind CSharpCode, Mode=OneWay}" />
210+
</ScrollViewer>
211+
</PivotItem>
212+
</Pivot>
213+
</Grid>
214+
</muxc:Expander>
215+
</Grid>
194216
</Grid>
195217
</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+
OptionsControl.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.

0 commit comments

Comments
 (0)