Skip to content

Commit dd92122

Browse files
niels9001niels9001
committed
Layout tweaks
1 parent 585a113 commit dd92122

File tree

3 files changed

+78
-57
lines changed

3 files changed

+78
-57
lines changed

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

Lines changed: 76 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
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">
@@ -52,14 +52,17 @@
5252
<Setter Target="OptionsPanel.BorderThickness" Value="0,1,0,0" />
5353
<Setter Target="FixedOptionsBar.BorderThickness" Value="0" />
5454
<Setter Target="ThemeBG.CornerRadius" Value="0" />
55-
<Setter Target="PageControl.Padding" Value="16,16,16,32" />
5655
<Setter Target="ThemeBtn.(Grid.Row)" Value="0" />
5756
<Setter Target="FlowDirectionBtn.(Grid.Row)" Value="0" />
5857
<Setter Target="CodeBtn.(Grid.Row)" Value="0" />
5958
<Setter Target="ThemeBtn.(Grid.Column)" Value="0" />
6059
<Setter Target="FlowDirectionBtn.(Grid.Column)" Value="1" />
6160
<Setter Target="CodeBtn.(Grid.Column)" Value="2" />
6261
<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+
6366
</VisualState.Setters>
6467
</VisualState>
6568
</VisualStateGroup>
@@ -91,13 +94,22 @@
9194
<ColumnDefinition Width="*" />
9295
<ColumnDefinition Width="Auto" />
9396
</Grid.ColumnDefinitions>
94-
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>
95105
<Grid x:Name="FixedOptionsBar"
96106
Grid.Column="1"
107+
Padding="4"
97108
HorizontalAlignment="Right"
98109
Background="{ThemeResource LayerFillColorAltBrush}"
99110
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
100-
BorderThickness="1,0,0,0">
111+
BorderThickness="1,0,0,0"
112+
RowSpacing="8">
101113
<Grid.RowDefinitions>
102114
<RowDefinition Height="Auto" />
103115
<RowDefinition Height="*" />
@@ -108,50 +120,55 @@
108120
<ColumnDefinition Width="Auto" />
109121
<ColumnDefinition Width="Auto" />
110122
</Grid.ColumnDefinitions>
111-
<AppBarButton x:Name="ThemeBtn"
112-
Grid.Row="0"
113-
Click="ThemeBtn_OnClick"
114-
Label="Toggle theme"
115-
LabelPosition="Collapsed"
116-
Style="{StaticResource SmallAppBarButtonStyle}"
117-
ToolTipService.ToolTip="Toggle theme">
118-
<AppBarButton.Icon>
119-
<FontIcon Glyph="&#xE793;" />
120-
</AppBarButton.Icon>
121-
</AppBarButton>
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>
137+
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">
122149

123-
<AppBarButton x:Name="FlowDirectionBtn"
124-
Grid.Row="1"
125-
wasm:Visibility="Collapsed"
126-
Click="FlowDirectionBtn_OnClick"
127-
Label="Toggle direction"
128-
LabelPosition="Collapsed"
129-
Style="{StaticResource SmallAppBarButtonStyle}"
130-
ToolTipService.ToolTip="Toggle right-to-left">
131-
<AppBarButton.Icon>
132-
<FontIcon Glyph="&#xE1A0;" />
133-
</AppBarButton.Icon>
134-
</AppBarButton>
150+
<Button.Content>
151+
<FontIcon FontSize="16"
152+
Glyph="&#xE1A0;" />
153+
</Button.Content>
154+
</Button>
135155

136-
<AppBarButton x:Name="CodeBtn"
137-
Grid.Row="2"
138-
Click="CodeBtn_OnClick"
139-
Label="View code"
140-
LabelPosition="Collapsed"
141-
Style="{StaticResource SmallAppBarButtonStyle}"
142-
ToolTipService.ToolTip="View code">
143-
<AppBarButton.Icon>
144-
<FontIcon Glyph="&#xE943;" />
145-
</AppBarButton.Icon>
146-
</AppBarButton>
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>
147170
</Grid>
148-
<ContentControl x:Name="OptionsControl"
149-
Grid.Row="0"
150-
Grid.Column="0"
151-
MinWidth="256"
152-
Margin="16"
153-
HorizontalAlignment="Left"
154-
Content="{x:Bind SampleOptionsPaneInstance, Mode=OneWay}" />
171+
155172
</Grid>
156173

157174
<Grid x:Name="ContentPageHolder"
@@ -161,12 +178,18 @@
161178
Background="{ThemeResource SolidBackgroundFillColorBaseBrush}"
162179
CornerRadius="8,0,0,8"
163180
Visibility="Collapsed" />
164-
<ContentControl x:Name="PageControl"
165-
Padding="24,24,32,24"
166-
HorizontalAlignment="Stretch"
167-
VerticalAlignment="Stretch"
168-
HorizontalContentAlignment="Stretch"
169-
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>
170193
</Grid>
171194

172195
<muxc:Expander x:Name="SourcecodeExpander"
@@ -199,13 +222,15 @@
199222
<ScrollViewer>
200223
<TextBlock wasm:IsTextSelectionEnabled="True"
201224
win:IsTextSelectionEnabled="True"
225+
Style="{StaticResource CaptionTextBlockStyle}"
202226
Text="{x:Bind XamlCode, Mode=OneWay}" />
203227
</ScrollViewer>
204228
</PivotItem>
205229
<PivotItem Header="C#">
206230
<ScrollViewer>
207231
<TextBlock wasm:IsTextSelectionEnabled="True"
208232
win:IsTextSelectionEnabled="True"
233+
Style="{StaticResource CaptionTextBlockStyle}"
209234
Text="{x:Bind CSharpCode, Mode=OneWay}" />
210235
</ScrollViewer>
211236
</PivotItem>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ private async Task LoadData()
176176
}
177177
else
178178
{
179-
OptionsControl.Visibility = Visibility.Collapsed;
179+
OptionsScrollViewer.Visibility = Visibility.Collapsed;
180180
}
181181

182182
// Generated options must be assigned before attempting to render the control,

‎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)