Skip to content

Commit 1c8a476

Browse files
agneszitteagneszitte
authored
Merge pull request #765 from unoplatform/dev/agzi/SettingsFlyoutFixes
fix(Settings): Wide layout and content for Narrow to avoid exceptions on Windows
2 parents 257f0d5 + 2d4093a commit 1c8a476

File tree

1 file changed

+148
-177
lines changed

1 file changed

+148
-177
lines changed

‎reference/ToDo/src/ToDo/Views/Dialogs/SettingsFlyout.xaml

Lines changed: 148 additions & 177 deletions
Original file line numberDiff line numberDiff line change
@@ -1,181 +1,152 @@
11
<Flyout x:Class="ToDo.Views.Dialogs.SettingsFlyout"
2-
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3-
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4-
xmlns:local="using:ToDo.Views.Dialogs"
5-
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6-
xmlns:uen="using:Uno.Extensions.Navigation.UI"
7-
xmlns:utu="using:Uno.Toolkit.UI"
8-
xmlns:controls="using:ToDo.Controls"
9-
Placement="Full"
10-
LightDismissOverlayMode="On"
11-
FlyoutPresenterStyle="{StaticResource FlyoutPresenterStyle}">
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:local="using:ToDo.Views.Dialogs"
5+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:uen="using:Uno.Extensions.Navigation.UI"
7+
xmlns:utu="using:Uno.Toolkit.UI"
8+
xmlns:controls="using:ToDo.Controls"
9+
Placement="Full"
10+
LightDismissOverlayMode="On"
11+
FlyoutPresenterStyle="{StaticResource FlyoutPresenterStyle}">
1212

13-
<UserControl x:Name="FlyoutControl">
14-
<Grid x:Name="FlyoutRoot"
15-
Background="{ThemeResource SurfaceBrush}">
16-
<VisualStateManager.VisualStateGroups>
17-
<VisualStateGroup>
18-
<VisualState x:Name="Wide">
19-
<VisualState.StateTriggers>
20-
<AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWindowWidth}" />
21-
</VisualState.StateTriggers>
22-
<VisualState.Setters>
23-
<Setter Target="FlyoutRoot.MinWidth"
24-
Value="500" />
25-
<Setter Target="FlyoutRoot.CornerRadius"
26-
Value="28" />
27-
<Setter Target="FlyoutRoot.HorizontalAlignment"
28-
Value="Center" />
29-
<Setter Target="FlyoutRoot.VerticalAlignment"
30-
Value="Center" />
31-
</VisualState.Setters>
32-
</VisualState>
33-
</VisualStateGroup>
34-
</VisualStateManager.VisualStateGroups>
13+
<UserControl x:Name="FlyoutControl">
14+
<Grid x:Name="FlyoutRoot"
15+
Background="{ThemeResource SurfaceBrush}">
16+
<VisualStateManager.VisualStateGroups>
17+
<VisualStateGroup>
18+
<VisualState x:Name="Wide">
19+
<VisualState.StateTriggers>
20+
<AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWindowWidth}" />
21+
</VisualState.StateTriggers>
22+
<VisualState.Setters>
23+
<Setter Target="FlyoutRoot.MinWidth"
24+
Value="500" />
25+
<Setter Target="FlyoutRoot.CornerRadius"
26+
Value="28" />
27+
<Setter Target="FlyoutRoot.HorizontalAlignment"
28+
Value="Center" />
29+
<Setter Target="FlyoutRoot.VerticalAlignment"
30+
Value="Center" />
31+
</VisualState.Setters>
32+
</VisualState>
33+
</VisualStateGroup>
34+
</VisualStateManager.VisualStateGroups>
3535

36-
<utu:AutoLayout>
37-
<utu:AutoLayout utu:AutoLayout.PrimaryAlignment="Stretch">
38-
<utu:NavigationBar x:Uid="SettingsFlyout_NavigationBar"
39-
Content="Settings"
40-
uen:Navigation.Request="-"
41-
Style="{StaticResource RootModalNavigationBarStyle}" />
42-
<utu:AutoLayout Padding="20,15,20,0">
43-
<utu:AutoLayout Spacing="10"
44-
Padding="0,0,0,10"
45-
Orientation="Horizontal">
46-
<utu:AutoLayout Spacing="10"
47-
Padding="20,15,20,15"
48-
Orientation="Horizontal"
49-
utu:AutoLayout.PrimaryAlignment="Stretch" />
50-
<PersonPicture DisplayName="{Binding CurrentUser.Name}"
51-
ProfilePicture="{Binding ProfilePicture, Converter={StaticResource BitmapSourceConverter}}"
52-
utu:AutoLayout.CounterAlignment="Start" />
53-
<utu:AutoLayout Spacing="10"
54-
Padding="20,15,20,15"
55-
Orientation="Horizontal"
56-
utu:AutoLayout.PrimaryAlignment="Stretch" />
57-
</utu:AutoLayout>
58-
<TextBlock Foreground="{ThemeResource OnSurfaceBrush}"
59-
TextAlignment="Center"
60-
TextWrapping="Wrap"
61-
Text="{Binding CurrentUser.Name}"
62-
Style="{StaticResource TitleLarge}" />
63-
<TextBlock Foreground="{ThemeResource OnSurfaceMediumBrush}"
64-
TextAlignment="Center"
65-
TextWrapping="Wrap"
66-
Text="{Binding CurrentUser.Email}"
67-
Style="{StaticResource BodyMedium}" />
68-
<Button x:Uid="SettingsFlyout_SignOutButton"
69-
Content="sign out"
70-
Command="{Binding SignOut}"
71-
Foreground="{ThemeResource ErrorBrush}"
72-
Style="{StaticResource TextButtonStyle}" />
73-
</utu:AutoLayout>
74-
<utu:AutoLayout Padding="20,0,20,0"
75-
utu:AutoLayout.PrimaryAlignment="Stretch">
76-
<utu:AutoLayout Spacing="5"
77-
utu:AutoLayout.PrimaryAlignment="Stretch">
78-
<utu:AutoLayout Spacing="5"
79-
Padding="0,10,0,10">
80-
<utu:Divider Style="{StaticResource DividerStyle}" />
81-
</utu:AutoLayout>
82-
<TextBlock x:Uid="SettingsFlyout_GeneralSection"
83-
Text="General"
84-
TextWrapping="Wrap"
85-
Foreground="{ThemeResource PrimaryBrush}"
86-
Style="{StaticResource LabelLarge}" />
87-
<utu:AutoLayout Spacing="20">
88-
<!-- Commenting the Color Palette Section for now -->
89-
<!-- Can be added again when it's implemented : https://github.com/unoplatform/uno.todo/issues/147 -->
90-
<!--<utu:AutoLayout Spacing="5">
91-
<TextBlock x:Uid="SettingsFlyout_PaletteSection"
92-
Text="Color palette"
93-
Foreground="{ThemeResource OnSurfaceBrush}"
94-
utu:AutoLayout.CounterAlignment="Start"
95-
Style="{StaticResource BodySmall}" />
96-
<utu:ChipGroup x:Name="ColorPaletteChipGroup"
97-
SelectionMode="Single"
98-
ItemChecked="{x:Bind UpdateAppColorPalette}"
99-
Style="{StaticResource FilterChipGroupStyle}">
100-
<utu:Chip x:Uid="SettingsFlyout_PalettePurple" Content="Purple"
101-
Style="{StaticResource FilterChipStyle}" />
102-
<utu:Chip x:Uid="SettingsFlyout_PaletteBlue" Content="Blue"
103-
Style="{StaticResource FilterChipStyle}" />
104-
<utu:Chip x:Uid="SettingsFlyout_PaletteYellow" Content="Yellow"
105-
Style="{StaticResource FilterChipStyle}" />
106-
</utu:ChipGroup>
107-
</utu:AutoLayout>-->
108-
<utu:AutoLayout Spacing="5">
109-
<TextBlock x:Uid="SettingsFlyout_LanguageLabel"
110-
Foreground="{ThemeResource OnSurfaceBrush}"
111-
Text="Language"
112-
utu:AutoLayout.CounterAlignment="Start"
113-
Style="{StaticResource BodySmall}" />
114-
<utu:ChipGroup x:Name="LanguageChipGroup"
115-
SelectionMode="Single"
116-
ItemsSource="{Binding Cultures}"
117-
SelectedItem="{Binding SelectedCulture, Mode=TwoWay}"
118-
Style="{StaticResource FilterChipGroupStyle}">
119-
<utu:ChipGroup.ItemTemplate>
120-
<DataTemplate>
121-
<TextBlock Text="{Binding Display}" />
122-
</DataTemplate>
123-
</utu:ChipGroup.ItemTemplate>
124-
</utu:ChipGroup>
125-
<TextBlock x:Uid="SettingsFlyout_NoteToRestart"
126-
Foreground="{ThemeResource OnSurfaceMediumBrush}"
127-
Text="Change will be applied at next app restart"
128-
utu:AutoLayout.CounterAlignment="Start"
129-
Style="{StaticResource BodyMedium}" />
130-
</utu:AutoLayout>
131-
<utu:AutoLayout Spacing="5"
132-
utu:AutoLayout.CounterAlignment="Start">
133-
<TextBlock x:Uid="SettingsFlyout_ThemeLabel"
134-
Foreground="{ThemeResource OnSurfaceBrush}"
135-
Text="Mode"
136-
utu:AutoLayout.CounterAlignment="Start"
137-
Style="{StaticResource BodySmall}" />
138-
<utu:ChipGroup x:Name="ThemeChipGroup"
139-
SelectionMode="Single"
140-
ItemsSource="{Binding AppThemes}"
141-
SelectedItem="{Binding SelectedAppTheme, Mode=TwoWay}"
142-
ItemChecked="ThemeChipGroup_ItemChecked"
143-
Style="{StaticResource FilterChipGroupStyle}">
144-
<utu:ChipGroup.ItemTemplate>
145-
<DataTemplate>
146-
<TextBlock Text="{Binding}" />
147-
</DataTemplate>
148-
</utu:ChipGroup.ItemTemplate>
149-
</utu:ChipGroup>
150-
</utu:AutoLayout>
151-
</utu:AutoLayout>
152-
<utu:AutoLayout Spacing="5"
153-
Padding="0,10,0,10">
154-
<utu:Divider Style="{StaticResource DividerStyle}" />
155-
</utu:AutoLayout>
156-
<TextBlock x:Uid="SettingsFlyout_AboutSection"
157-
Foreground="{ThemeResource PrimaryBrush}"
158-
TextWrapping="Wrap"
159-
Text="About"
160-
Style="{StaticResource LabelLarge}" />
161-
<utu:AutoLayout Spacing="5"
162-
Margin="0,0,0,24"
163-
Orientation="Horizontal">
164-
<TextBlock x:Uid="SettingsFlyout_VersionLabel"
165-
Text="Version"
166-
Foreground="{ThemeResource OnSurfaceBrush}"
167-
utu:AutoLayout.PrimaryAlignment="Stretch"
168-
Style="{StaticResource TitleMedium}" />
169-
<TextBlock Foreground="{ThemeResource PrimaryBrush}"
170-
TextAlignment="End"
171-
Text="1.0"
172-
utu:AutoLayout.PrimaryAlignment="Stretch"
173-
Style="{StaticResource TitleMedium}" />
174-
</utu:AutoLayout>
175-
</utu:AutoLayout>
176-
</utu:AutoLayout>
177-
</utu:AutoLayout>
178-
</utu:AutoLayout>
179-
</Grid>
180-
</UserControl>
36+
<utu:AutoLayout>
37+
<utu:NavigationBar x:Uid="SettingsFlyout_NavigationBar"
38+
Content="Settings"
39+
uen:Navigation.Request="-"
40+
Style="{StaticResource RootModalNavigationBarStyle}" />
41+
<utu:AutoLayout Spacing="12"
42+
Margin="20,10,20,0">
43+
<utu:AutoLayout PrimaryAxisAlignment="Center"
44+
CounterAxisAlignment="Center">
45+
<PersonPicture DisplayName="{Binding CurrentUser.Name}"
46+
ProfilePicture="{Binding ProfilePicture, Converter={StaticResource BitmapSourceConverter}}"
47+
Width="60"
48+
Height="60" />
49+
</utu:AutoLayout>
50+
<utu:AutoLayout>
51+
<TextBlock Text="{Binding CurrentUser.Name}"
52+
TextAlignment="Center"
53+
TextWrapping="Wrap"
54+
Foreground="{ThemeResource OnSurfaceBrush}"
55+
Style="{StaticResource TitleLarge}" />
56+
<TextBlock Text="{Binding CurrentUser.Email}"
57+
TextAlignment="Center"
58+
TextWrapping="Wrap"
59+
Foreground="{ThemeResource OnSurfaceMediumBrush}" />
60+
</utu:AutoLayout>
61+
<Button Content="Sign Out"
62+
Command="{Binding SignOut}"
63+
x:Uid="SettingsFlyout_SignOutButton"
64+
HorizontalAlignment="Center"
65+
Foreground="{ThemeResource ErrorBrush}"
66+
Style="{StaticResource TextButtonStyle}" />
67+
<utu:Divider Style="{StaticResource DividerStyle}" />
68+
</utu:AutoLayout>
69+
<utu:AutoLayout Spacing="12"
70+
Margin="20,10,20,0">
71+
<TextBlock Text="General"
72+
x:Uid="SettingsFlyout_GeneralSection"
73+
TextWrapping="Wrap"
74+
utu:AutoLayout.CounterAlignment="Stretch"
75+
Foreground="{ThemeResource PrimaryBrush}"
76+
Style="{StaticResource LabelLarge}" />
77+
<utu:AutoLayout Spacing="20"
78+
CounterAxisAlignment="Start"
79+
utu:AutoLayout.CounterAlignment="Start">
80+
<utu:AutoLayout Spacing="5"
81+
CounterAxisAlignment="Start">
82+
<TextBlock Text="Language"
83+
x:Uid="SettingsFlyout_LanguageLabel"
84+
TextWrapping="Wrap"
85+
Foreground="{ThemeResource OnSurfaceBrush}"
86+
Style="{StaticResource BodySmall}" />
87+
<utu:ChipGroup x:Name="LanguageChipGroup"
88+
SelectionMode="Single"
89+
ItemsSource="{Binding Cultures}"
90+
SelectedItem="{Binding SelectedCulture, Mode=TwoWay}"
91+
Style="{StaticResource FilterChipGroupStyle}">
92+
<utu:ChipGroup.ItemTemplate>
93+
<DataTemplate>
94+
<TextBlock Text="{Binding Display}" />
95+
</DataTemplate>
96+
</utu:ChipGroup.ItemTemplate>
97+
</utu:ChipGroup>
98+
<TextBlock Text="Change will be applied at next app restart"
99+
x:Uid="SettingsFlyout_NoteToRestart"
100+
TextWrapping="Wrap"
101+
Foreground="{ThemeResource OnSurfaceMediumBrush}"
102+
Style="{StaticResource CaptionMedium}" />
103+
</utu:AutoLayout>
104+
<utu:AutoLayout Spacing="5"
105+
CounterAxisAlignment="Start">
106+
<TextBlock Text="Mode"
107+
x:Uid="SettingsFlyout_ThemeLabel"
108+
TextWrapping="Wrap"
109+
Foreground="{ThemeResource OnSurfaceBrush}"
110+
Style="{StaticResource BodySmall}" />
111+
<utu:ChipGroup x:Name="ThemeChipGroup"
112+
SelectionMode="Single"
113+
ItemsSource="{Binding AppThemes}"
114+
SelectedItem="{Binding SelectedAppTheme, Mode=TwoWay}"
115+
ItemChecked="ThemeChipGroup_ItemChecked"
116+
Style="{StaticResource FilterChipGroupStyle}">
117+
<utu:ChipGroup.ItemTemplate>
118+
<DataTemplate>
119+
<TextBlock Text="{Binding}" />
120+
</DataTemplate>
121+
</utu:ChipGroup.ItemTemplate>
122+
</utu:ChipGroup>
123+
</utu:AutoLayout>
124+
</utu:AutoLayout>
125+
<utu:Divider Style="{StaticResource DividerStyle}" />
126+
<TextBlock Text="About"
127+
x:Uid="SettingsFlyout_AboutSection"
128+
TextWrapping="Wrap"
129+
utu:AutoLayout.CounterAlignment="Stretch"
130+
Foreground="{ThemeResource PrimaryBrush}"
131+
Style="{StaticResource LabelLarge}" />
132+
<utu:AutoLayout Spacing="12"
133+
Margin="0,0,0,24"
134+
CounterAxisAlignment="Start"
135+
Orientation="Horizontal"
136+
utu:AutoLayout.CounterAlignment="Stretch"
137+
utu:AutoLayout.PrimaryAlignment="Stretch">
138+
<TextBlock Text="Version"
139+
x:Uid="SettingsFlyout_VersionLabel"
140+
TextWrapping="Wrap"
141+
Foreground="{ThemeResource OnSurfaceBrush}"
142+
Style="{StaticResource TitleMedium}" />
143+
<TextBlock Text="1.0"
144+
Margin="10,0,0,0"
145+
Foreground="{ThemeResource PrimaryBrush}"
146+
Style="{StaticResource TitleMedium}" />
147+
</utu:AutoLayout>
148+
</utu:AutoLayout>
149+
</utu:AutoLayout>
150+
</Grid>
151+
</UserControl>
181152
</Flyout>

0 commit comments

Comments
 (0)