Skip to content

Commit b2b9f85

Browse files
niels9001niels9001
authored
Merge pull request #347 from CommunityToolkit/niels9001/settingspage-sample
[SettingsControls] Page sample tweak
2 parents 3669d4c + b57d939 commit b2b9f85

File tree

3 files changed

+72
-112
lines changed

3 files changed

+72
-112
lines changed

‎labs/SettingsControls/samples/SettingsControls.Samples/SettingsCardSample.xaml‎

Lines changed: 2 additions & 2 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="SettingsControlsExperiment.Samples.SettingsCardSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -29,7 +29,7 @@
2929
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
3030
<labs:SettingsCard.HeaderIcon>
3131
<BitmapIcon ShowAsMonochrome="False"
32-
UriSource="https://raw.githubusercontent.com/microsoft/PowerToys/main/src/settings-ui/Settings.UI/Assets/FluentIcons/FluentIconsImageResizer.png" />
32+
UriSource="ms-appx:///Assets/AppTitleBar.scale-200.png" />
3333
</labs:SettingsCard.HeaderIcon>
3434
<ToggleSwitch />
3535
</labs:SettingsCard>

‎labs/SettingsControls/samples/SettingsControls.Samples/SettingsExpanderItemsSourceSample.xaml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
</labs:SettingsExpander.ItemTemplate>
2727
<labs:SettingsExpander.ItemsHeader>
2828
<muxc:InfoBar Title="This is the ItemsHeader"
29-
CornerRadius="0,0,4,4"
29+
BorderThickness="0"
30+
CornerRadius="0"
3031
IsIconVisible="False"
3132
IsOpen="True"
3233
Severity="Success">
@@ -37,6 +38,7 @@
3738
</labs:SettingsExpander.ItemsHeader>
3839
<labs:SettingsExpander.ItemsFooter>
3940
<muxc:InfoBar Title="This is the ItemsFooter"
41+
BorderThickness="0"
4042
CornerRadius="0,0,4,4"
4143
IsIconVisible="False"
4244
IsOpen="True"

‎labs/SettingsControls/samples/SettingsControls.Samples/SettingsPageExample.xaml‎

Lines changed: 67 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -5,155 +5,113 @@
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
xmlns:labs="using:CommunityToolkit.Labs.WinUI"
77
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8+
xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
89
mc:Ignorable="d">
910
<Page.Resources>
1011
<!-- These styles can be referenced to create a consistent SettingsPage layout -->
12+
13+
<!-- Spacing between cards -->
1114
<x:Double x:Key="SettingsCardSpacing">3</x:Double>
12-
<Style x:Key="SettingsGroupTextBlockStyle"
15+
16+
<!-- Style (inc. the correct spacing) of a section header -->
17+
<Style x:Key="SettingsSectionHeaderTextBlockStyle"
1318
BasedOn="{StaticResource BodyStrongTextBlockStyle}"
1419
TargetType="TextBlock">
1520
<Style.Setters>
16-
<Setter Property="Margin" Value="1,30,0,4" />
21+
<Setter Property="Margin" Value="1,29,0,5" />
1722
</Style.Setters>
1823
</Style>
1924
</Page.Resources>
2025
<ScrollViewer>
2126
<StackPanel MaxWidth="1000"
2227
HorizontalAlignment="Stretch"
2328
Spacing="{StaticResource SettingsCardSpacing}">
24-
<!-- TODO: @Niels - I just copied everything here, not sure if any values need adjusting. We should probably use this as a place to have more bespoke examples of each type of content like Slider, ComboBox, TextBox, etc... -->
25-
<TextBlock Style="{StaticResource SettingsGroupTextBlockStyle}"
26-
Text="Group of settings" />
27-
<labs:SettingsCard Description="This is a default card, with the Header, HeaderIcon, Description and Content set."
29+
<win:StackPanel.ChildrenTransitions>
30+
<win:EntranceThemeTransition FromVerticalOffset="50" />
31+
<win:RepositionThemeTransition IsStaggeringEnabled="False" />
32+
</win:StackPanel.ChildrenTransitions>
33+
<TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
34+
Text="Section 1" />
35+
<labs:SettingsCard Description="This is a default card, with the Header, HeaderIcon, Description and Content set"
2836
Header="This is the Header">
2937
<labs:SettingsCard.HeaderIcon>
30-
<FontIcon Glyph="&#xE799;" />
38+
<FontIcon Glyph="&#xE125;" />
3139
</labs:SettingsCard.HeaderIcon>
32-
<ComboBox SelectedIndex="0">
33-
<ComboBoxItem>Option 1</ComboBoxItem>
34-
<ComboBoxItem>Option 2</ComboBoxItem>
35-
<ComboBoxItem>Option 3</ComboBoxItem>
36-
</ComboBox>
40+
<ToggleSwitch IsOn="True" />
3741
</labs:SettingsCard>
3842

39-
<labs:SettingsCard Description="You can use a FontIcon, SymbolIcon or BitmapIcon to set the cards HeaderIcon."
40-
Header="Icon options">
41-
<labs:SettingsCard.HeaderIcon>
42-
<BitmapIcon ShowAsMonochrome="False"
43-
UriSource="https://raw.githubusercontent.com/microsoft/PowerToys/main/src/settings-ui/Settings.UI/Assets/FluentIcons/FluentIconsImageResizer.png" />
44-
</labs:SettingsCard.HeaderIcon>
45-
<ToggleSwitch />
46-
</labs:SettingsCard>
47-
48-
<labs:SettingsCard Header="A card with custom objects as its Description">
49-
<labs:SettingsCard.Description>
50-
<HyperlinkButton Content="Learn more about Phone Link" />
51-
</labs:SettingsCard.Description>
52-
<Button Content="Open Phone Link"
43+
<labs:SettingsExpander Description="The SettingsExpander has the same properties as a SettingsCard"
44+
Header="SettingsExpander">
45+
<labs:SettingsExpander.HeaderIcon>
46+
<FontIcon Glyph="&#xE91B;" />
47+
</labs:SettingsExpander.HeaderIcon>
48+
<Button Content="Content"
5349
Style="{StaticResource AccentButtonStyle}" />
54-
</labs:SettingsCard>
5550

56-
<labs:SettingsCard Description="When resizing a SettingsCard, the Content will wrap vertically. You can override this breakpoint by setting the SettingsCardWrapThreshold resource."
57-
Header="Adaptive layouts">
58-
<labs:SettingsCard.HeaderIcon>
59-
<FontIcon Glyph="&#xE745;" />
60-
</labs:SettingsCard.HeaderIcon>
61-
<labs:SettingsCard.Resources>
62-
<x:Double x:Key="SettingsCardWrapThreshold">800</x:Double>
63-
</labs:SettingsCard.Resources>
64-
<Button Content="This control will wrap vertically!"
65-
Style="{StaticResource AccentButtonStyle}" />
66-
</labs:SettingsCard>
51+
<labs:SettingsExpander.Items>
52+
<labs:SettingsCard Header="A basic SettingsCard within an SettingsExpander">
53+
<Button Content="Button" />
54+
</labs:SettingsCard>
55+
<labs:SettingsCard Description="SettingsCard within an Expander can be made clickable too!"
56+
Header="This item can be clicked"
57+
IsClickEnabled="True" />
6758

68-
<TextBlock Style="{StaticResource SettingsGroupTextBlockStyle}"
69-
Text="Next group of settings" />
59+
<labs:SettingsCard ContentAlignment="Left">
60+
<CheckBox Content="Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons" />
61+
</labs:SettingsCard>
62+
</labs:SettingsExpander.Items>
63+
</labs:SettingsExpander>
7064

71-
<labs:SettingsCard Description="A SettingsCard can be made clickable and you can leverage the Command property or Click event."
72-
Header="A clickable SettingsCard"
73-
IsClickEnabled="True">
65+
<TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
66+
Text="Section 2" />
67+
<labs:SettingsCard Description="Another card to show grouping of cards"
68+
Header="Another SettingsCard">
7469
<labs:SettingsCard.HeaderIcon>
7570
<FontIcon Glyph="&#xE799;" />
7671
</labs:SettingsCard.HeaderIcon>
72+
<ComboBox SelectedIndex="0">
73+
<ComboBoxItem>Option 1</ComboBoxItem>
74+
<ComboBoxItem>Option 2</ComboBoxItem>
75+
<ComboBoxItem>Option 3</ComboBoxItem>
76+
</ComboBox>
7777
</labs:SettingsCard>
7878

79-
<labs:SettingsCard ActionIconToolTip="Open in new window"
80-
Description="You can customize the ActionIcon and ActionIconToolTip."
81-
Header="Customizing the ActionIcon"
82-
IsClickEnabled="True">
79+
<labs:SettingsCard Description="Another card to show grouping of cards"
80+
Header="Yet another SettingsCard">
8381
<labs:SettingsCard.HeaderIcon>
84-
<FontIcon Glyph="&#xE12B;" />
82+
<FontIcon Glyph="&#xE29B;" />
8583
</labs:SettingsCard.HeaderIcon>
86-
<labs:SettingsCard.ActionIcon>
87-
<FontIcon FontSize="12"
88-
Glyph="&#xE8A7;" />
89-
</labs:SettingsCard.ActionIcon>
84+
<Button Content="Content" />
9085
</labs:SettingsCard>
9186

92-
<TextBlock Style="{StaticResource SettingsGroupTextBlockStyle}"
93-
Text="Final group of settings" />
87+
<!-- Example 'About' section -->
88+
<TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
89+
Text="About" />
9490

95-
<labs:SettingsExpander Description="The SettingsExpander has the same properties as a Card, and you can set SettingsCard as part of the Items collection."
96-
Header="SettingsExpander">
91+
<labs:SettingsExpander Description="© 2023. All rights reserved."
92+
Header="Community Toolkit Gallery">
9793
<labs:SettingsExpander.HeaderIcon>
98-
<FontIcon Glyph="&#xE91B;" />
94+
<BitmapIcon ShowAsMonochrome="False"
95+
UriSource="ms-appx:///Assets/AppTitleBar.scale-200.png" />
9996
</labs:SettingsExpander.HeaderIcon>
100-
<ComboBox SelectedIndex="0">
101-
<ComboBoxItem>Option 1</ComboBoxItem>
102-
<ComboBoxItem>Option 2</ComboBoxItem>
103-
<ComboBoxItem>Option 3</ComboBoxItem>
104-
</ComboBox>
105-
97+
<TextBlock win:IsTextSelectionEnabled="True"
98+
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
99+
Style="{StaticResource CaptionTextBlockStyle}"
100+
Text="Version 1.0.0.0" />
106101
<labs:SettingsExpander.Items>
107-
<labs:SettingsCard Header="A basic SettingsCard within an SettingsExpander">
108-
<Button Content="Button" />
109-
</labs:SettingsCard>
110-
<labs:SettingsCard Description="SettingsCard within an Expander can be made clickable too!"
111-
Header="This item can be clicked"
112-
IsClickEnabled="True" />
113-
114-
<labs:SettingsCard ContentAlignment="Left">
115-
<CheckBox Content="Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons." />
116-
</labs:SettingsCard>
117-
118102
<labs:SettingsCard HorizontalContentAlignment="Left"
119-
ContentAlignment="Vertical"
120-
Description="You can also align your content vertically. Make sure to set the HorizontalAlignment to Left when you do!"
121-
Header="Vertically aligned">
122-
<GridView SelectedIndex="1">
123-
<GridViewItem>
124-
<Border Width="64"
125-
Height="64"
126-
Background="#0078D4"
127-
CornerRadius="4" />
128-
</GridViewItem>
129-
<GridViewItem>
130-
<Border Width="64"
131-
Height="64"
132-
Background="#005EB7"
133-
CornerRadius="4" />
134-
</GridViewItem>
135-
<GridViewItem>
136-
<Border Width="64"
137-
Height="64"
138-
Background="#003D92"
139-
CornerRadius="4" />
140-
</GridViewItem>
141-
<GridViewItem>
142-
<Border Width="64"
143-
Height="64"
144-
Background="#001968"
145-
CornerRadius="4" />
146-
</GridViewItem>
147-
</GridView>
148-
</labs:SettingsCard>
149-
<labs:SettingsCard Description="You can override the Left indention of a SettingsCard by overriding the SettingsCardLeftIndention"
150-
Header="Customization">
151-
<labs:SettingsCard.Resources>
152-
<x:Double x:Key="SettingsCardLeftIndention">40</x:Double>
153-
</labs:SettingsCard.Resources>
103+
ContentAlignment="Left">
104+
<StackPanel Margin="-12,0,0,0"
105+
Orientation="Vertical">
106+
<HyperlinkButton Content="Link 1" />
107+
<HyperlinkButton Content="Link 2" />
108+
<HyperlinkButton Content="Link 3" />
109+
</StackPanel>
154110
</labs:SettingsCard>
155111
</labs:SettingsExpander.Items>
156112
</labs:SettingsExpander>
113+
<HyperlinkButton Margin="0,8,0,0"
114+
Content="Send feedback" />
157115
</StackPanel>
158116
</ScrollViewer>
159117
</Page>

0 commit comments

Comments
 (0)