Skip to content

Commit

Permalink
New Settings UX (#1194)
Browse files Browse the repository at this point in the history 
* New Settings UX

* Update SettingsPage.xaml

* Bump versions

* Update SettingsPage.xaml

* Negative margin to visually align version number
  • Loading branch information
@niels9001
niels9001 authored Mar 10, 2023
1 parent 5a5c997 commit 7997879
Show file tree
Hide file tree
Showing 6 changed files with 166 additions and 193 deletions.
6 changes: 0 additions & 6 deletions WinUIGallery/NuGet.Config
View file

This file was deleted.

295 changes: 136 additions & 159 deletions WinUIGallery/SettingsPage.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,29 @@
<Page
x:Class="AppUIBasics.SettingsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:labs="using:CommunityToolkit.Labs.WinUI">
<Page.Resources>
<!-- These styles can be referenced to create a consistent SettingsPage layout -->

<Grid>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition />
</TransitionCollection>
</Grid.ChildrenTransitions>
<!-- Spacing between cards -->
<x:Double x:Key="SettingsCardSpacing">3</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,29,0,5" />
</Style.Setters>
</Style>
</Page.Resources>
<Grid x:Name="RootGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="WideLayout">
Expand All @@ -21,173 +36,135 @@
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="contentSV.Padding" Value="14,0" />
<Setter Target="contentSV.Padding" Value="16,0" />
<Setter Target="PageHeader.Margin" Value="16,48,0,0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock
x:Name="PageHeader"
Margin="36,24,36,0"
Style="{StaticResource TitleTextBlockStyle}"
Text="Settings" />
<ScrollViewer
x:Name="contentSV"
Grid.Row="1"
Padding="56,0,0,0"
Padding="36,0,36,0"
IsTabStop="False"
UseSystemFocusVisuals="False"
VerticalScrollBarVisibility="Auto"
VerticalScrollMode="Auto">
<StackPanel HorizontalAlignment="Left">
<TextBlock
Style="{StaticResource SubtitleTextBlockStyle}"
Margin="0,12,0,0"
Text="Theme Mode" />
<RadioButtons x:Name="themeMode" Header="Application theme mode" Margin="0,10,0,0" SelectionChanged="themeMode_SelectionChanged">
<RadioButton Tag="Light" Content="Light" />
<RadioButton Tag="Dark" Content="Dark" />
<RadioButton Tag="Default" Content="Use system setting" />
</RadioButtons>

<TextBlock
Style="{StaticResource SubtitleTextBlockStyle}"
Margin="0,40,0,0"
Text="Sound" />
<StackPanel Margin="0,10,0,0">
<ToggleSwitch x:Name="soundToggle" Header="Controls provide audible feedback" Toggled="soundToggle_Toggled" OffContent="Off" OnContent="On" Margin="0,0,0,4"/>
<CheckBox x:Name="spatialSoundBox" Unchecked="spatialSoundBox_Unchecked" Checked="spatialSoundBox_Checked" IsEnabled="False" Content="Spatial Audio"/>
<TextBlock Style="{ThemeResource CaptionTextBlockStyle}" FontStyle="Italic" Margin="0,8,0,0">
See the <Hyperlink x:Name="soundPageHyperlink" Click="soundPageHyperlink_Click">Sound page</Hyperlink> for how to enable sound in your app!
</TextBlock>
</StackPanel>

<TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Margin="0,40,0,0" Text="Navigation Style" />
<RadioButtons x:Name="navigationLocation" Margin="0,10,0,0"
Header="Navigation position" SelectionChanged="navigationLocation_SelectionChanged">
<RadioButton Content="Left"/>
<RadioButton Content="Top"/>
</RadioButtons>

<StackPanel x:Name="ScreenshotSettingsGrid">
<TextBlock
Style="{StaticResource SubtitleTextBlockStyle}"
Margin="0,40,0,0"
Text="Screenshots" />
<StackPanel Margin="0,10,0,0">
<ToggleSwitch x:Name="screenshotModeToggle" Header="Screenshot mode" Toggled="screenshotModeToggle_Toggled" OffContent="Off" OnContent="On" Margin="0,0,0,4"/>
<Button Content="Set screenshot folder" Click="FolderButton_Click" Margin="0,4,0,0"/>

<HyperlinkButton x:Name="screenshotFolderLink" Margin="0,4,0,0" Click="screenshotFolderLink_Click">
<TextBlock x:Name="screenshotFolderLinkContent" TextWrapping="Wrap"/>
</HyperlinkButton>
</StackPanel>
</StackPanel>
<StackPanel Spacing="{StaticResource SettingsCardSpacing}">
<StackPanel.ChildrenTransitions>
<EntranceThemeTransition FromVerticalOffset="50" />
<RepositionThemeTransition IsStaggeringEnabled="False" />
</StackPanel.ChildrenTransitions>
<TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" Text="Appearance &amp; behavior" />
<labs:SettingsCard Description="Select which app theme to display" Header="App theme">
<labs:SettingsCard.HeaderIcon>
<FontIcon Glyph="&#xE790;" />
</labs:SettingsCard.HeaderIcon>
<ComboBox x:Name="themeMode" SelectionChanged="themeMode_SelectionChanged">
<ComboBoxItem Content="Light" Tag="Light" />
<ComboBoxItem Content="Dark" Tag="Dark" />
<ComboBoxItem Content="Use system setting" Tag="Default" />
</ComboBox>
</labs:SettingsCard>

<TextBlock
Style="{StaticResource SubtitleTextBlockStyle}"
Margin="0,40,0,0"
Text="Teaching Tips" />
<StackPanel Margin="0,10,0,0">
<Button Content="Reset the &quot;Generate Link to Page&quot; Teaching Tip" Click="OnResetTeachingTipsButtonClick" Margin="0,4,0,0"/>
</StackPanel>
<labs:SettingsCard Description="Select which app theme to display" Header="Navigation style">
<labs:SettingsCard.HeaderIcon>
<FontIcon Glyph="&#xF594;" />
</labs:SettingsCard.HeaderIcon>
<ComboBox x:Name="navigationLocation" SelectionChanged="navigationLocation_SelectionChanged">
<ComboBoxItem Content="Left" />
<ComboBoxItem Content="Top" />
</ComboBox>
</labs:SettingsCard>

<TextBlock
Style="{StaticResource SubtitleTextBlockStyle}"
Margin="0,40,0,0"
Text="About" />
<RichTextBlock MaxWidth="840" Margin="0,10,0,0" IsTextSelectionEnabled="True">
<Paragraph>
This app is the interactive companion to the
<Hyperlink NavigateUri="https://developer.microsoft.com/windows/apps/design">Fluent Design System web site</Hyperlink>.
</Paragraph>
<Paragraph Margin="0,10,0,0">
Source code:
<Hyperlink NavigateUri="https://github.com/microsoft/WinUI-Gallery">GitHub</Hyperlink>
</Paragraph>
<Paragraph Margin="0,10,0,0">
<Run>To clone the source repository:</Run>
<Run FontStyle="Italic">git clone https://github.com/microsoft/WinUI-Gallery</Run>
</Paragraph>
</RichTextBlock>
<TextBlock Margin="0,10,0,0" IsTextSelectionEnabled="True">
Version:
<Run Text="{x:Bind Version}" FontWeight="Bold" />
</TextBlock>
<labs:SettingsExpander Description="Controls provide audible feedback" Header="Sound">
<labs:SettingsExpander.HeaderIcon>
<FontIcon Glyph="&#xEC4F;" />
</labs:SettingsExpander.HeaderIcon>
<ToggleSwitch x:Name="soundToggle" Toggled="soundToggle_Toggled" />
<labs:SettingsExpander.Items>
<labs:SettingsCard
x:Name="SpatialAudioCard"
Header="Enable Spatial Audio"
IsEnabled="False">
<labs:SettingsCard.Description>
<HyperlinkButton Click="soundPageHyperlink_Click" Content="Learn more about enabling sounds in your app" />
</labs:SettingsCard.Description>
<ToggleSwitch x:Name="spatialSoundBox" Toggled="spatialSoundBox_Toggled" />
</labs:SettingsCard>
</labs:SettingsExpander.Items>
</labs:SettingsExpander>

<TextBlock
Style="{StaticResource SubtitleTextBlockStyle}"
Margin="0,40,0,0"
Text="Found a bug? Want a new sample?" />
<RichTextBlock MaxWidth="840" Margin="0,10,0,0" IsTextSelectionEnabled="True">
<Paragraph>
If you have found a bug within the WinUI 3 Gallery, please file an issue on GitHub:
</Paragraph>
<Paragraph Margin="0,10,0,10">
<Hyperlink NavigateUri="https://github.com/microsoft/WinUI-Gallery/issues/new?template=bug_report.md">New WinUI 3 Gallery Bug Report</Hyperlink>
</Paragraph>
<Paragraph>
If you would like a new sample, request it on GitHub:
</Paragraph>
<Paragraph Margin="0,10,0,10">
<Hyperlink NavigateUri="https://github.com/microsoft/WinUI-Gallery/issues/new?template=sample_request.md">New Sample Request</Hyperlink>
</Paragraph>
<Paragraph>
If you found a bug in your app (not in the WinUI Gallery) and need help, file an issue on the WinUI GitHub:
</Paragraph>
<Paragraph Margin="0,10,0,10">
<Hyperlink NavigateUri="https://github.com/microsoft/microsoft-ui-xaml/issues/new/choose">New WinUI Bug Report</Hyperlink>
</Paragraph>
<labs:SettingsExpander x:Name="ScreenshotCard" Header="Screenshot mode">
<labs:SettingsExpander.HeaderIcon>
<FontIcon Glyph="&#xEC4F;" />
</labs:SettingsExpander.HeaderIcon>
<ToggleSwitch x:Name="screenshotModeToggle" Toggled="screenshotModeToggle_Toggled" />
<labs:SettingsExpander.Items>
<labs:SettingsCard x:Name="ScreenshotFolderCard" Header="Screenshot folder">
<labs:SettingsCard.Description>
<HyperlinkButton x:Name="screenshotFolderLink" Click="screenshotFolderLink_Click" />
</labs:SettingsCard.Description>
<Button Click="FolderButton_Click" Content="Browse" />
</labs:SettingsCard>
</labs:SettingsExpander.Items>
</labs:SettingsExpander>

</RichTextBlock>

<TextBlock
Style="{StaticResource SubtitleTextBlockStyle}"
Margin="0,40,0,0"
Text="Dependencies and References" />
<RichTextBlock IsTextSelectionEnabled="True" MaxWidth="840" Margin="0,10,0,0">
<Paragraph Margin="0,10,0,10">
<Hyperlink NavigateUri="https://aka.ms/winui">Windows UI Library</Hyperlink>
</Paragraph>
<Paragraph Margin="0,10,0,10">
<Hyperlink NavigateUri="https://github.com/WilliamABradley/ColorCode-Universal">ColorCode-Universal</Hyperlink>
</Paragraph>
<Paragraph Margin="0,10,0,10">
<Hyperlink NavigateUri="https://github.com/Microsoft/Win2D">Win2D</Hyperlink>
</Paragraph>
<Paragraph Margin="0,10,0,10">
<Hyperlink NavigateUri="https://github.com/Microsoft/XamlBehaviors">Xaml Behaviors</Hyperlink>
</Paragraph>
</RichTextBlock>

<TextBlock
Style="{StaticResource SubtitleTextBlockStyle}"
Margin="0,40,0,0"
Text="Companion apps" />
<RichTextBlock MaxWidth="840" Margin="0,10,0,0" IsTextSelectionEnabled="True">
<Paragraph>
Check out these great companion apps:
</Paragraph>
<Paragraph Margin="0,10,0,0">
<Hyperlink NavigateUri="https://www.microsoft.com/store/productId/9NBLGGH4TLCQ">Windows Community Toolkit Sample app</Hyperlink>
</Paragraph>
<Paragraph Margin="0,10,0,0">
<Hyperlink NavigateUri="https://www.microsoft.com/store/productId/9N2XD3Q8X57C">Fluent XAML Theme Editor</Hyperlink>
</Paragraph>
<Paragraph Margin="0,10,0,0">
<Hyperlink NavigateUri="https://www.microsoft.com/store/productId/9N1H8CZHBPXB">Windows Composition Samples</Hyperlink>
</Paragraph>
</RichTextBlock>

<TextBlock
Style="{StaticResource SubtitleTextBlockStyle}"
Margin="0,40,0,0"
Text="Disclaimer" />
<RichTextBlock MaxWidth="840" Margin="0,10,0,50" IsTextSelectionEnabled="True">
<Paragraph>THIS CODE AND INFORMATION IS PROVIDED ‘AS IS’ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A PARTICULAR PURPOSE.</Paragraph>
<Paragraph>
<LineBreak />Copyright (c) Microsoft Corporation. All rights reserved.
</Paragraph>
<Paragraph Margin="0,10,0,10">
<Hyperlink NavigateUri="https://go.microsoft.com/fwlink/?LinkId=822631">Microsoft Services Agreement</Hyperlink> ,
<Hyperlink NavigateUri="https://go.microsoft.com/fwlink/?LinkId=521839">Microsoft Privacy Statement</Hyperlink>
</Paragraph>
</RichTextBlock>
<!-- About -->
<TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" Text="About" />
<labs:SettingsExpander Description="© 2023 Microsoft. All rights reserved." Header="WinUI Gallery">
<labs:SettingsExpander.HeaderIcon>
<BitmapIcon ShowAsMonochrome="False" UriSource="/Assets/Tiles/SmallTile-sdk.png" />
</labs:SettingsExpander.HeaderIcon>
<TextBlock
Margin="0,-2,0,0"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
IsTextSelectionEnabled="True"
Text="{x:Bind Version}" />
<labs:SettingsExpander.Items>
<labs:SettingsCard Header="To clone this repository">
<TextBlock
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
IsTextSelectionEnabled="True"
Text="git clone https://github.com/microsoft/WinUI-Gallery" />
</labs:SettingsCard>
<labs:SettingsCard
x:Name="bugRequestCard"
Click="bugRequestCard_Click"
Header="File a bug or request new sample"
IsClickEnabled="True">
<labs:SettingsCard.ActionIcon>
<FontIcon Glyph="&#xE8A7;" />
</labs:SettingsCard.ActionIcon>
</labs:SettingsCard>
<labs:SettingsCard
HorizontalContentAlignment="Left"
ContentAlignment="Vertical"
Header="Dependencies &amp; references">
<StackPanel Margin="-12,0,0,0" Orientation="Vertical">
<HyperlinkButton Content="Windows UI Library" NavigateUri="https://aka.ms/winui" />
<HyperlinkButton Content="Windows Community Toolkit" NavigateUri="https://github.com/CommunityToolkit/WindowsCommunityToolkit" />
<HyperlinkButton Content="ColorCode-Universal" NavigateUri="https://github.com/WilliamABradley/ColorCode-Universal" />
<HyperlinkButton Content="Win2D" NavigateUri="https://github.com/Microsoft/Win2D" />
<HyperlinkButton Content="Xaml Behaviors" NavigateUri="https://github.com/Microsoft/XamlBehaviors" />
</StackPanel>
</labs:SettingsCard>
<labs:SettingsCard
HorizontalContentAlignment="Left"
ContentAlignment="Vertical"
Header="THIS CODE AND INFORMATION IS PROVIDED ‘AS IS’ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A PARTICULAR PURPOSE.">
<StackPanel Margin="-12,0,0,0" Orientation="Vertical">
<HyperlinkButton Content="Microsoft Services Agreement" NavigateUri="https://go.microsoft.com/fwlink/?LinkId=822631" />
<HyperlinkButton Content="Microsoft Privacy Statement" NavigateUri="https://go.microsoft.com/fwlink/?LinkId=521839" />
</StackPanel>
</labs:SettingsCard>
</labs:SettingsExpander.Items>
</labs:SettingsExpander>
</StackPanel>
</ScrollViewer>
</Grid>
Expand Down
Loading

0 comments on commit 7997879

Please sign in to comment.