Windows/components/SettingsControls/samples/SettingsPageExample.xaml at f36b01cc9487389407b9ace4742f853b5308ea83 · CommunityToolkit/Windows · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!--  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.  -->
<Page x:Class="SettingsControlsExperiment.Samples.SettingsPageExample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:ui="using:CommunityToolkit.WinUI"
      xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      mc:Ignorable="d">
    <Page.Resources>
        <!--  These styles can be referenced to create a consistent SettingsPage layout  -->

        <!--  Spacing between cards  -->
        <x:Double x:Key="SettingsCardSpacing">4</x:Double>

        <!--  Style (inc. the correct spacing) of a section header  -->
        <Style x:Key="SettingsSectionHeaderTextBlockStyle"
               BasedOn="{StaticResource BodyStrongTextBlockStyle}"
               TargetType="TextBlock">
            <Style.Setters>
                <Setter Property="Margin" Value="1,30,0,6" />
            </Style.Setters>
        </Style>
    </Page.Resources>
    <ScrollViewer>
        <Grid>
            <StackPanel MaxWidth="1000"
                        HorizontalAlignment="Stretch"
                        Spacing="{StaticResource SettingsCardSpacing}">
                <win:StackPanel.ChildrenTransitions>
                    <win:EntranceThemeTransition FromVerticalOffset="50" />
                    <win:RepositionThemeTransition IsStaggeringEnabled="False" />
                </win:StackPanel.ChildrenTransitions>
                <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
                           Text="Section 1" />
                <controls:SettingsCard Description="A typical SettingsCard with a toggle for enabling a feature."
                                       Header="Notifications"
                                       HeaderIcon="{ui:FontIcon Glyph=&#xE716;}">
                    <ToggleSwitch IsOn="True" />
                </controls:SettingsCard>

                <controls:SettingsExpander Description="The SettingsExpander has the same properties as a SettingsCard"
                                           Header="SettingsExpander"
                                           HeaderIcon="{ui:FontIcon Glyph=&#xE91B;}">
                    <Button Content="Content"
                            Style="{StaticResource AccentButtonStyle}" />

                    <controls:SettingsExpander.Items>
                        <controls:SettingsCard Header="A basic SettingsCard within an SettingsExpander">
                            <Button Content="Button" />
                        </controls:SettingsCard>
                        <controls:SettingsCard Description="SettingsCard within an Expander can be made clickable too!"
                                               Header="This item can be clicked"
                                               IsClickEnabled="True" />

                        <controls:SettingsCard ContentAlignment="Left">
                            <CheckBox Content="Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons" />
                        </controls:SettingsCard>
                    </controls:SettingsExpander.Items>
                </controls:SettingsExpander>

                <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
                           Text="Section 2" />
                <controls:SettingsCard Description="Another card to show grouping of cards"
                                       Header="Another SettingsCard"
                                       HeaderIcon="{ui:FontIcon Glyph=&#xE799;}">
                    <ComboBox SelectedIndex="0">
                        <ComboBoxItem>Option 1</ComboBoxItem>
                        <ComboBoxItem>Option 2</ComboBoxItem>
                        <ComboBoxItem>Option 3</ComboBoxItem>
                    </ComboBox>
                </controls:SettingsCard>

                <controls:SettingsCard Description="Another card to show grouping of cards"
                                       Header="Yet another SettingsCard"
                                       HeaderIcon="{ui:FontIcon Glyph=&#xE768;}">
                    <Button Content="Content" />
                </controls:SettingsCard>

                <!--  Example 'About' section  -->
                <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
                           Text="About" />

                <controls:SettingsExpander Description="© 2023. All rights reserved."
                                           Header="Community Toolkit Gallery"
                                           HeaderIcon="{ui:BitmapIcon Source=ms-appx:///Assets/AppTitleBar.scale-200.png}">
                    <TextBlock win:IsTextSelectionEnabled="True"
                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                               Text="Version 8.0.0" />
                    <controls:SettingsExpander.Items>
                        <controls:SettingsCard HorizontalContentAlignment="Left"
                                               ContentAlignment="Left">
                            <StackPanel Margin="-12,0,0,0"
                                        Orientation="Vertical">
                                <HyperlinkButton Content="Link 1" />
                                <HyperlinkButton Content="Link 2" />
                                <HyperlinkButton Content="Link 3" />
                            </StackPanel>
                        </controls:SettingsCard>
                    </controls:SettingsExpander.Items>
                </controls:SettingsExpander>
                <HyperlinkButton Margin="0,8,0,0"
                                 Content="Send feedback" />
            </StackPanel>
        </Grid>
    </ScrollViewer>
</Page>