Skip to content

Commit 6a4c3a0

Browse files
lukeblevinslukeblevins
committed
Revamp Settings for Smaller Screens
1 parent a3f5449 commit 6a4c3a0

File tree

7 files changed

+117
-102
lines changed

7 files changed

+117
-102
lines changed

‎MainPage.xaml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
x:Class="Files.MainPage"
77
xmlns:local="using:Files"
88
xmlns:UILib="using:Microsoft.UI.Xaml.Controls"
9+
xmlns:Windows10InsiderPreview="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 8)"
910
mc:Ignorable="d">
1011

1112
<Page.Resources>
@@ -372,7 +373,7 @@
372373
</Page.Resources>
373374
<Grid>
374375

375-
<Grid Tag="{x:Bind Tag, Mode=OneWay}" Background="Transparent" Name="DragArea" HorizontalAlignment="Stretch" Height="34" VerticalAlignment="Top" Margin="55,0,200,0" Canvas.ZIndex="5"/>
376+
<Grid Tag="{x:Bind Tag, Mode=OneWay}" Background="Transparent" Name="DragArea" HorizontalAlignment="Stretch" Height="34" VerticalAlignment="Top" Margin="0,0,200,0" Canvas.ZIndex="5"/>
376377

377378
<UILib:NavigationView IsBackEnabled="False" PaneDisplayMode="Auto" SelectedItem="{x:Bind local:MainPage.Select.itemSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" AlwaysShowHeader="False" IsPaneOpen="True" Loaded="navView_Loaded" IsBackButtonVisible="Collapsed" IsSettingsVisible="True" x:Name="navView" ItemInvoked="NavView_ItemInvoked" SelectionChanged="navView_ItemSelected" VerticalAlignment="Stretch" >
378379

‎MainPage.xaml.cs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,8 @@ private void NavView_ItemInvoked(Microsoft.UI.Xaml.Controls.NavigationView sende
143143
//var item = Interaction.FindParent<NavigationViewItemBase>(args.InvokedItem as DependencyObject);
144144
if (args.IsSettingsInvoked == true)
145145
{
146-
ContentFrame.Navigate(typeof(Settings));
146+
Frame rootFrame = Window.Current.Content as Frame;
147+
rootFrame.Navigate(typeof(Settings));
147148
}
148149
else
149150
{

‎Settings.xaml‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,27 @@
55
xmlns:local="using:Files"
66
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
77
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8+
xmlns:UILib="using:Microsoft.UI.Xaml.Controls"
89
mc:Ignorable="d"
910
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
1011

1112
<Page.Resources>
12-
<AcrylicBrush TintOpacity="80" x:Key="SecondaryPaneBrush" BackgroundSource="HostBackdrop" />
13+
<AcrylicBrush TintOpacity="80" x:Key="SecondaryPaneBrush" FallbackColor="LightGray" BackgroundSource="HostBackdrop" />
1314

1415
</Page.Resources>
1516

1617
<Grid>
17-
<SplitView IsPaneOpen="True" PaneBackground="{ThemeResource SystemControlAcrylicWindowBrush}" DisplayMode="Inline">
18-
<SplitView.Pane>
19-
<ListView Name="SecondaryPane" IsItemClickEnabled="True" SelectionChanged="ListView_SelectionChanged">
20-
21-
<NavigationViewItemHeader Margin="5, 120, 0, 0" Content="Settings"/>
22-
<ListViewItem Padding="20,0,0,0" Content="Personalization" x:Name="Personalization">
23-
</ListViewItem>
24-
<ListViewItem Padding="20,0,0,0" Content="Preferences" x:Name="Preferences">
25-
</ListViewItem>
26-
<ListViewItem Padding="20,0,0,0" Content="About" x:Name="About">
27-
</ListViewItem>
28-
</ListView>
29-
30-
</SplitView.Pane>
31-
<Frame Name="SettingsContentFrame" HorizontalAlignment="Stretch">
32-
33-
</Frame>
34-
</SplitView>
18+
<Grid Tag="{x:Bind Tag, Mode=OneWay}" Background="Transparent" Name="DragArea" HorizontalAlignment="Stretch" Height="34" VerticalAlignment="Top" Margin="0,0,200,0" Canvas.ZIndex="5"/>
19+
20+
<UILib:NavigationView IsSettingsVisible="False" BackRequested="SettingsPane_BackRequested" Name="SettingsPane" IsBackEnabled="True" ItemInvoked="NavigationView_ItemInvoked" PaneTitle="Settings" PaneDisplayMode="Top">
21+
<UILib:NavigationView.MenuItems>
22+
<UILib:NavigationViewItem Content="Personalization"/>
23+
<UILib:NavigationViewItem Content="Preferences"/>
24+
<UILib:NavigationViewItem Content="About"/>
25+
</UILib:NavigationView.MenuItems>
26+
<Frame Name="SettingsContentFrame"/>
27+
</UILib:NavigationView>
28+
3529

3630

3731

‎Settings.xaml.cs‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
using Files.SettingsPages;
22
using Windows.ApplicationModel.Core;
3+
using Windows.UI.Xaml;
34
using Windows.UI.Xaml.Controls;
45

56

@@ -12,28 +13,35 @@ public sealed partial class Settings : Page
1213
public Settings()
1314
{
1415
this.InitializeComponent();
15-
SecondaryPane.SelectedIndex = 1;
1616
var CoreTitleBar = CoreApplication.GetCurrentView().TitleBar;
1717
CoreTitleBar.ExtendViewIntoTitleBar = true;
18+
Window.Current.SetTitleBar(DragArea);
19+
SettingsContentFrame.Navigate(typeof(Personalization));
1820
}
1921

20-
private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
22+
private void NavigationView_ItemInvoked(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewItemInvokedEventArgs args)
2123
{
22-
foreach(ListViewItem lvi in SecondaryPane.Items)
24+
var item = args.InvokedItem;
25+
if (item.ToString() == "Personalization")
2326
{
24-
if((e.AddedItems[0] as ListViewItem).Name == "Personalization" && lvi.Name == "Personalization")
25-
{
26-
SettingsContentFrame.Navigate(typeof(Personalization));
27-
}
28-
else if((e.AddedItems[0] as ListViewItem).Name == "Preferences" && lvi.Name == "Preferences")
29-
{
30-
SettingsContentFrame.Navigate(typeof(Preferences));
31-
}
32-
else if ((e.AddedItems[0] as ListViewItem).Name == "About" && lvi.Name == "About")
33-
{
34-
SettingsContentFrame.Navigate(typeof(About));
35-
}
27+
SettingsContentFrame.Navigate(typeof(Personalization));
28+
29+
}
30+
else if (item.ToString() == "Preferences")
31+
{
32+
SettingsContentFrame.Navigate(typeof(Preferences));
33+
}
34+
else if (item.ToString() == "About")
35+
{
36+
SettingsContentFrame.Navigate(typeof(About));
3637
}
38+
39+
}
40+
41+
private void SettingsPane_BackRequested(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewBackRequestedEventArgs args)
42+
{
43+
Frame rootFrame = Window.Current.Content as Frame;
44+
rootFrame.Navigate(typeof(MainPage));
3745
}
3846
}
3947
}

‎SettingsPages/About.xaml‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,27 @@
88
mc:Ignorable="d"
99
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
1010

11-
<Grid Padding="50,100,50,0">
12-
<StackPanel Orientation="Vertical">
13-
<TextBlock x:Name="Header" Text="About Files" Margin="0,0,0,25" FontFamily="Segoe UI Black" FontWeight="Bold" FontSize="48" HorizontalAlignment="Left" VerticalAlignment="Top" />
14-
<TextBlock Margin="0,0,0,10" FontFamily="Segoe UI" FontSize="24" Text="Product Information"/>
15-
<TextBlock FontSize="18" Text="Edition: Files Pre-Release"/>
16-
<TextBlock FontSize="18" Text="Version: 0.4.6"/>
17-
<ListView IsItemClickEnabled="True" Margin="0,35,0,0" ItemClick="ListView_ItemClick" HorizontalAlignment="Stretch">
18-
<ListViewItem IsEnabled="True" Name="FeedbackForm">
19-
<StackPanel Orientation="Horizontal">
20-
<FontIcon Margin="0,0,25,0" Glyph="&#xED15;"/>
21-
<StackPanel Orientation="Vertical">
22-
<TextBlock Text="Submit Feedback"/>
23-
<TextBlock Text="Submit an issue report to provide the developers with information" Foreground="Gray"/>
11+
<Grid Padding="24,35,24,0">
12+
13+
<ScrollViewer>
14+
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
15+
<TextBlock x:Name="Header" Text="About Files" Margin="0,0,0,25" FontFamily="Segoe UI Black" FontWeight="Bold" FontSize="48" HorizontalAlignment="Left" VerticalAlignment="Top" />
16+
<TextBlock Margin="0,0,0,10" FontFamily="Segoe UI" FontSize="24" Text="Product Information"/>
17+
<TextBlock FontSize="18" Text="Edition: Files Pre-Release"/>
18+
<TextBlock FontSize="18" Text="Version: 0.4.6"/>
19+
<ListView IsItemClickEnabled="True" Margin="0,35,0,0" ItemClick="ListView_ItemClick" HorizontalAlignment="Left" Width="875">
20+
<ListViewItem IsEnabled="True" Name="FeedbackForm" Height="65" HorizontalAlignment="Stretch">
21+
<StackPanel Orientation="Horizontal">
22+
<FontIcon Margin="0,0,25,0" Glyph="&#xED15;"/>
23+
<StackPanel Orientation="Vertical">
24+
<TextBlock Text="Submit Feedback"/>
25+
<TextBlock Text="Submit an issue report to provide the developers with information" Foreground="Gray"/>
26+
</StackPanel>
2427
</StackPanel>
25-
</StackPanel>
26-
27-
</ListViewItem>
28-
</ListView>
29-
</StackPanel>
28+
29+
</ListViewItem>
30+
</ListView>
31+
</StackPanel>
32+
</ScrollViewer>
3033
</Grid>
3134
</Page>

‎SettingsPages/Personalization.xaml‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,27 @@
99
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
1010

1111

12-
<Grid Padding="50,100,50,0">
13-
<StackPanel>
14-
<TextBlock x:Name="Header" Text="Personalization" Margin="0,0,0,25" FontFamily="Segoe UI Black" FontWeight="Bold" FontSize="48" HorizontalAlignment="Left" VerticalAlignment="Top" />
15-
<Grid Margin="0,0,0,25" HorizontalAlignment="Left" VerticalAlignment="Top">
16-
<Rectangle Name="VisualRect" Fill="{ThemeResource SystemControlAcrylicElementBrush}" Width="384" Height="216" HorizontalAlignment="Center" VerticalAlignment="Center" Canvas.ZIndex="2" />
17-
<Image HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Source="ms-appx:///Assets/abstract_HeroImage.jpg" Stretch="UniformToFill" Width="480" Height="270"/>
18-
</Grid>
19-
<TextBlock Margin="0,0,0,15" HorizontalAlignment="Left" Text="Choose your color scheme" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="18"/>
20-
<ComboBox SelectionChanged="ThemeChooser_SelectionChanged" Name="ThemeChooser" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Center" Width="225">
21-
<ComboBox.Items>
22-
<ComboBoxItem Content="Use System Scheme"/>
23-
<ComboBoxItem Content="Light"/>
24-
<ComboBoxItem Content="Dark"/>
25-
</ComboBox.Items>
26-
</ComboBox>
27-
<TextBlock Name="RestartReminder" Visibility="Collapsed" Foreground="Green" Text="Success! Restart app to apply theme." Margin="0,10,0,0"/>
12+
<Grid Padding="24,35,24,0">
13+
14+
<ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
15+
<StackPanel>
16+
<TextBlock x:Name="Header" Text="Personalization" Margin="0,0,0,25" FontFamily="Segoe UI Black" FontWeight="Bold" FontSize="48" HorizontalAlignment="Left" VerticalAlignment="Top" />
17+
<Grid Margin="0,0,0,25" HorizontalAlignment="Left" VerticalAlignment="Top">
18+
<Rectangle Name="VisualRect" Fill="{ThemeResource SystemControlAcrylicElementBrush}" Width="384" Height="216" HorizontalAlignment="Center" VerticalAlignment="Center" Canvas.ZIndex="2" />
19+
<Image HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Source="ms-appx:///Assets/abstract_HeroImage.jpg" Stretch="UniformToFill" Width="480" Height="270"/>
20+
</Grid>
21+
<TextBlock Margin="0,0,0,15" HorizontalAlignment="Left" Text="Choose your color scheme" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="18"/>
22+
<ComboBox SelectionChanged="ThemeChooser_SelectionChanged" Name="ThemeChooser" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Center" Width="300">
23+
<ComboBox.Items>
24+
<ComboBoxItem Content="Use System Scheme"/>
25+
<ComboBoxItem Content="Light"/>
26+
<ComboBoxItem Content="Dark"/>
27+
</ComboBox.Items>
28+
</ComboBox>
29+
<TextBlock Name="RestartReminder" Visibility="Collapsed" Foreground="Green" Text="Success! Restart app to apply theme." Margin="0,10,0,100"/>
2830

29-
</StackPanel>
31+
</StackPanel>
32+
</ScrollViewer>
3033
</Grid>
3134

3235
</Page>

‎SettingsPages/Preferences.xaml‎

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -8,36 +8,41 @@
88
mc:Ignorable="d"
99
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
1010

11-
<Grid Padding="50,100,50,0">
12-
13-
<StackPanel>
14-
<TextBlock x:Name="Header" Text="Preferences" Margin="0,0,0,25" FontFamily="Segoe UI Black" FontWeight="Bold" FontSize="48" HorizontalAlignment="Left" VerticalAlignment="Top" />
15-
<Grid Name="CustomLibraries">
16-
<StackPanel Orientation="Vertical">
17-
<TextBlock Text="Custom Library Locations - Still In Development"/>
18-
<ToggleSwitch IsEnabled="False" VerticalAlignment="Top"/>
19-
<Grid Margin="0, 0, 0, 12.5">
20-
<TextBlock Text="Downloads" VerticalAlignment="Center" Margin="0,0,25,0"/>
21-
<TextBox BorderThickness="1" PlaceholderText="Custom Downloads Location" HorizontalAlignment="Left" Width="500" Margin="125,0,0,0"/>
22-
</Grid>
23-
<Grid Margin="0, 0, 0, 12.5">
24-
<TextBlock Text="Documents" VerticalAlignment="Center" Margin="0,0,25,0"/>
25-
<TextBox BorderThickness="1" PlaceholderText="Custom Documents Location" HorizontalAlignment="Left" Width="500" Margin="125,0,0,0"/>
26-
</Grid>
27-
<Grid Margin="0, 0, 0, 12.5">
28-
<TextBlock Text="Pictures" VerticalAlignment="Center" Margin="0,0,25,0"/>
29-
<TextBox BorderThickness="1" PlaceholderText="Custom Pictures Location" HorizontalAlignment="Left" Width="500" Margin="125,0,0,0"/>
30-
</Grid>
31-
<Grid Margin="0, 0, 0, 12.5">
32-
<TextBlock Text="Music" VerticalAlignment="Center" Margin="0,0,25,0"/>
33-
<TextBox BorderThickness="1" PlaceholderText="Custom Music Location" HorizontalAlignment="Left" Width="500" Margin="125,0,0,0"/>
34-
</Grid>
35-
<Grid Margin="0, 0, 0, 12.5">
36-
<TextBlock Text="Videos" VerticalAlignment="Center" Margin="0,0,25,0"/>
37-
<TextBox BorderThickness="1" PlaceholderText="Custom Videos Location" HorizontalAlignment="Left" Width="500" Margin="125,0,0,0"/>
38-
</Grid>
39-
</StackPanel>
40-
</Grid>
41-
</StackPanel>
11+
<Grid Padding="24,35,24,0">
12+
<Grid.ColumnDefinitions>
13+
<ColumnDefinition Width="80*"/>
14+
<ColumnDefinition Width="20*"/>
15+
</Grid.ColumnDefinitions>
16+
<ScrollViewer>
17+
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
18+
<TextBlock x:Name="Header" Text="Preferences" Margin="0,0,0,25" FontFamily="Segoe UI Black" FontWeight="Bold" FontSize="48" HorizontalAlignment="Left" VerticalAlignment="Top" />
19+
<Grid Name="CustomLibraries">
20+
<StackPanel Orientation="Vertical">
21+
<TextBlock Text="Custom Locations - Still In Development"/>
22+
<ToggleSwitch IsEnabled="False" VerticalAlignment="Top"/>
23+
<Grid Margin="0, 0, 0, 12.5">
24+
<TextBlock Text="Downloads" VerticalAlignment="Center" Margin="0,0,25,0" HorizontalAlignment="Left"/>
25+
<TextBox BorderThickness="1" PlaceholderText="Custom Downloads Location" HorizontalAlignment="Left" Margin="125,0,0,0" Width="500"/>
26+
</Grid>
27+
<Grid Margin="0, 0, 0, 12.5">
28+
<TextBlock Text="Documents" VerticalAlignment="Center" Margin="0,0,25,0" HorizontalAlignment="Left"/>
29+
<TextBox BorderThickness="1" PlaceholderText="Custom Documents Location" HorizontalAlignment="Left" Margin="125,0,0,0" Width="500"/>
30+
</Grid>
31+
<Grid Margin="0, 0, 0, 12.5">
32+
<TextBlock Text="Pictures" VerticalAlignment="Center" Margin="0,0,25,0" HorizontalAlignment="Left"/>
33+
<TextBox BorderThickness="1" PlaceholderText="Custom Pictures Location" HorizontalAlignment="Left" Margin="125,0,0,0" Width="500"/>
34+
</Grid>
35+
<Grid Margin="0, 0, 0, 12.5">
36+
<TextBlock Text="Music" VerticalAlignment="Center" Margin="0,0,25,0" HorizontalAlignment="Left"/>
37+
<TextBox BorderThickness="1" PlaceholderText="Custom Music Location" HorizontalAlignment="Left" Margin="125,0,0,0" Width="500"/>
38+
</Grid>
39+
<Grid Margin="0, 0, 0, 12.5">
40+
<TextBlock Text="Videos" VerticalAlignment="Center" Margin="0,0,25,0" HorizontalAlignment="Left"/>
41+
<TextBox BorderThickness="1" PlaceholderText="Custom Videos Location" HorizontalAlignment="Left" Margin="125,0,0,0" Width="500"/>
42+
</Grid>
43+
</StackPanel>
44+
</Grid>
45+
</StackPanel>
46+
</ScrollViewer>
4247
</Grid>
4348
</Page>

0 commit comments

Comments
 (0)