Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Settings UX #1194

Merged
merged 5 commits into from
Mar 10, 2023
Merged

New Settings UX #1194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e487ed3
New Settings UX
niels9001 Feb 10, 2023
717ee04
Update SettingsPage.xaml
niels9001 Feb 10, 2023
29b7091
Bump versions
niels9001 Feb 28, 2023
5c08dbb
Update SettingsPage.xaml
niels9001 Feb 28, 2023
44e4004
Negative margin to visually align version number
niels9001 Mar 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions WinUIGallery/NuGet.Config
View file
Open in desktop

This file was deleted.

295 changes: 136 additions & 159 deletions WinUIGallery/SettingsPage.xaml
View file
Open in desktop
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