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

Jump to bottom

Fix scroll regions across Dev Home #2423

Merged
merged 6 commits into from
Mar 19, 2024
Merged

Fix scroll regions across Dev Home #2423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5255fe2
Move scrollviewer in Setttings
krschau Mar 15, 2024
8798b24
Move scrollviewer in Dashboard
krschau Mar 15, 2024
c66c702
Move scrollviewer in ExtensionLibrary
krschau Mar 15, 2024
001adb9
Move scrollviewer in What's new page
krschau Mar 15, 2024
0bde51e
Move scrollviewer in SetupFlow pages
krschau Mar 15, 2024
1d729d7
Move scrollviewer in Environments page, adjust left margin of list
krschau Mar 15, 2024
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
7 changes: 4 additions & 3 deletions common/Environments/Styles/HorizontalCardStyles.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
<Setter Property="Background" Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
<Setter Property="Padding" Value="10 0 10 10" />
<Setter Property="Margin" Value="0 0 0 10" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
</Style>
Expand All @@ -33,7 +34,6 @@
BasedOn="{StaticResource DefaultListViewItemStyle}">
<Setter Property="Background" Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
<Setter Property="Margin" Value="0 0 0 10"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
Expand All @@ -42,15 +42,16 @@
x:Key="HorizontalCardListViewItemContainerForManagementPageStyle"
TargetType="ListViewItem"
BasedOn="{StaticResource DefaultListViewItemStyle}">
<Setter Property="Margin" Value="0 0 0 10"/>
<Setter Property="MaxWidth" Value="{ThemeResource MaxPageContentWidth}"/>
<!-- Default Padding is "16,0,12,0". Override since we want to take up the full width. -->
<Setter Property="Padding" Value="0,0,0,0" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>

<Style
x:Key="EnvironmentScrollViewerStyle"
TargetType="ScrollViewer">
<Setter Property="Margin" Value="0,22,0,0" />
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
</Style>

Expand Down
1 change: 0 additions & 1 deletion common/Environments/Templates/EnvironmentsTemplates.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:labs="using:CommunityToolkit.Labs.WinUI"
xmlns:models="using:DevHome.Common.Environments.Models"
xmlns:converters="using:CommunityToolkit.WinUI.Converters">
<!--
Sample Template for a Dev Environment cards.
Expand Down
11 changes: 4 additions & 7 deletions settings/DevHome.Settings/Views/AboutPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,8 @@
</DataTemplate>
</behaviors:NavigationViewHeaderBehavior.HeaderTemplate>

<Grid
MaxWidth="{ThemeResource MaxPageContentWidth}"
Margin="{ThemeResource ContentPageMargin}">

<ScrollViewer VerticalAlignment="Top">
<ScrollViewer VerticalAlignment="Top" VerticalScrollBarVisibility="Auto">
<Grid MaxWidth="{ThemeResource MaxPageContentWidth}" Margin="{ThemeResource ContentPageMargin}">
<ctControls:SettingsExpander x:Uid="Settings_About_Card" IsExpanded="True">
<ctControls:SettingsExpander.HeaderIcon>
<BitmapIcon ShowAsMonochrome="False" UriSource="/Assets/DevHome.ico" />
Expand All @@ -57,6 +54,6 @@
ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}" />
</ctControls:SettingsExpander.Items>
</ctControls:SettingsExpander>
</ScrollViewer>
</Grid>
</Grid>
</ScrollViewer>
</Page>
10 changes: 4 additions & 6 deletions settings/DevHome.Settings/Views/AccountsPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,8 @@
</DataTemplate>
</behaviors:NavigationViewHeaderBehavior.HeaderTemplate>

<Grid
MaxWidth="{ThemeResource MaxPageContentWidth}"
Margin="{ThemeResource ContentPageMargin}">
<ScrollViewer VerticalAlignment="Top">
<ScrollViewer VerticalAlignment="Top" VerticalScrollBarVisibility="Auto">
<Grid MaxWidth="{ThemeResource MaxPageContentWidth}" Margin="{ThemeResource ContentPageMargin}">
<StackPanel>
<ctControls:SettingsCard x:Uid="Settings_Accounts_AddAccount">
<ctControls:SettingsCard.HeaderIcon>
Expand Down Expand Up @@ -84,6 +82,6 @@
HorizontalAlignment="Stretch" VerticalAlignment="Center">
</ItemsRepeater>
</StackPanel>
</ScrollViewer>
</Grid>
</Grid>
</ScrollViewer>
</Page>
10 changes: 4 additions & 6 deletions settings/DevHome.Settings/Views/ExperimentalFeaturesPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,8 @@
</DataTemplate>
</behaviors:NavigationViewHeaderBehavior.HeaderTemplate>

<Grid
MaxWidth="{ThemeResource MaxPageContentWidth}"
Margin="{ThemeResource ContentPageMargin}">
<ScrollViewer VerticalAlignment="Top">
<ScrollViewer VerticalAlignment="Top" VerticalScrollBarVisibility="Auto">
<Grid MaxWidth="{ThemeResource MaxPageContentWidth}" Margin="{ThemeResource ContentPageMargin}">
<StackPanel>
<ItemsRepeater ItemsSource="{x:Bind ViewModel.ExperimentalFeatures}">
<ItemsRepeater.ItemTemplate>
Expand All @@ -60,6 +58,6 @@
x:Uid="Settings_ExperimentalFeatures_NoExperimentalFeatures"
Visibility="{x:Bind ViewModel.ExperimentalFeatures.Count, Converter={StaticResource CountToVisibilityConverter}, Mode=OneWay}" />
</StackPanel>
</ScrollViewer>
</Grid>
</Grid>
</ScrollViewer>
</Page>
12 changes: 5 additions & 7 deletions settings/DevHome.Settings/Views/FeedbackPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,9 @@
</DataTemplate>
</behaviors:NavigationViewHeaderBehavior.HeaderTemplate>

<Grid
MaxWidth="{ThemeResource MaxPageContentWidth}"
Margin="{ThemeResource ContentPageMargin}">
<ScrollViewer VerticalAlignment="Top">
<StackPanel>
<ScrollViewer VerticalAlignment="Top" VerticalScrollBarVisibility="Auto">
<Grid>
<StackPanel MaxWidth="{ThemeResource MaxPageContentWidth}" Margin="{ThemeResource ContentPageMargin}" BorderBrush="Yellow" BorderThickness="1">
<ContentDialog x:Name="reportBugDialog" x:Uid="Settings_Feedback_ReportBug_Dialog" HorizontalAlignment="Center" DefaultButton="Primary">
<Grid>
<ScrollViewer VerticalScrollBarVisibility="Auto">
Expand Down Expand Up @@ -167,6 +165,6 @@
</ctControls:SettingsCard>
</StackPanel>
</StackPanel>
</ScrollViewer>
</Grid>
</Grid>
</ScrollViewer>
</Page>
18 changes: 8 additions & 10 deletions settings/DevHome.Settings/Views/PreferencesPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
x:Class="DevHome.Settings.Views.PreferencesPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:DevHome.Common.Behaviors"
xmlns:ctControls="using:CommunityToolkit.WinUI.Controls"
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
xmlns:xaml="using:Microsoft.UI.Xaml"
xmlns:viewmodels="using:DevHome.Settings.ViewModels"
xmlns:behaviors="using:DevHome.Common.Behaviors"
behaviors:NavigationViewHeaderBehavior.HeaderContext="{x:Bind ViewModel}"
Loaded="Page_Loaded">

Expand All @@ -27,12 +27,10 @@
</DataTemplate>
</behaviors:NavigationViewHeaderBehavior.HeaderTemplate>

<Grid
MaxWidth="{ThemeResource MaxPageContentWidth}"
Margin="{ThemeResource ContentPageMargin}">

<ScrollViewer VerticalAlignment="Top">
<ctControls:SettingsCard x:Uid="Settings_Theme">
<ScrollViewer VerticalAlignment="Top" VerticalScrollBarVisibility="Auto">
<StackPanel>
<ctControls:SettingsCard x:Uid="Settings_Theme"
MaxWidth="{ThemeResource MaxPageContentWidth}" Margin="{ThemeResource ContentPageMargin}">
<ctControls:SettingsCard.HeaderIcon>
<FontIcon Glyph="&#xE790;" />
</ctControls:SettingsCard.HeaderIcon>
Expand All @@ -48,6 +46,6 @@
</i:Interaction.Behaviors>
</ComboBox>
</ctControls:SettingsCard>
</ScrollViewer>
</Grid>
</StackPanel>
</ScrollViewer>
</Page>
10 changes: 4 additions & 6 deletions settings/DevHome.Settings/Views/SettingsPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,8 @@
</DataTemplate>
</behaviors:NavigationViewHeaderBehavior.HeaderTemplate>

<Grid
MaxWidth="{ThemeResource MaxPageContentWidth}"
Margin="{ThemeResource ContentPageMargin}">
<ScrollViewer Grid.Row="1" VerticalAlignment="Top">
<ScrollViewer VerticalAlignment="Top" VerticalScrollBarVisibility="Auto">
<Grid MaxWidth="{ThemeResource MaxPageContentWidth}" Margin="{ThemeResource ContentPageMargin}">
<ItemsRepeater ItemsSource="{x:Bind ViewModel.SettingsList, Mode=OneWay}">
<ItemsRepeater.ItemTemplate>
<DataTemplate x:DataType="viewmodels:SettingViewModel">
Expand All @@ -44,6 +42,6 @@
</DataTemplate>
</ItemsRepeater.ItemTemplate>
</ItemsRepeater>
</ScrollViewer>
</Grid>
</Grid>
</ScrollViewer>
</Page>
2 changes: 2 additions & 0 deletions src/Styles/Thickness.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@
<Thickness x:Key="NavigationViewHeaderMargin">0,0,0,22</Thickness>

<Thickness x:Key="ContentPageMargin">40,0,40,0</Thickness>
<!-- HeaderMargin combines ContentPageMargin with NavigationViewHeaderMargin-->
<Thickness x:Key="HeaderMargin">40,0,40,22</Thickness>

<Thickness x:Key="MenuBarContentMargin">36,24,36,0</Thickness>

Expand Down
11 changes: 7 additions & 4 deletions src/Views/WhatsNewPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
xmlns:models="using:DevHome.Models"
xmlns:behaviors="using:DevHome.Common.Behaviors"
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
xmlns:converters="using:CommunityToolkit.WinUI.Converters"
behaviors:NavigationViewHeaderBehavior.HeaderMode="Never"
Loaded="OnLoaded"
SizeChanged="OnSizeChanged"
Expand All @@ -34,10 +33,14 @@
</ResourceDictionary>
</Page.Resources>

<ScrollViewer HorizontalScrollMode="Disabled" VerticalScrollMode="Auto" MaxWidth="{ThemeResource MaxPageBackgroundWidth}">
<RelativePanel>
<ScrollViewer HorizontalScrollMode="Disabled" VerticalScrollMode="Auto">
<RelativePanel MaxWidth="{ThemeResource MaxPageBackgroundWidth}">
<Grid>
<Image Source="{ThemeResource Background}" MinWidth="{ThemeResource MaxPageBackgroundWidth}" VerticalAlignment="Top" HorizontalAlignment="Center" Stretch="UniformToFill" />
<Image Source="{ThemeResource Background}"
MinWidth="{ThemeResource MaxPageBackgroundWidth}"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Stretch="UniformToFill" />
</Grid>
<Grid x:Name="ContentArea" Padding="35 0 35 30" HorizontalAlignment="Center">
<Grid.RowDefinitions>
Expand Down
9 changes: 5 additions & 4 deletions tools/Dashboard/DevHome.Dashboard/Views/DashboardView.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,16 +44,17 @@
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>

<Grid MaxWidth="{ThemeResource MaxPageContentWidth}" Margin="{ThemeResource ContentPageMargin}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<!-- Header - Title and Add Widget button -->
<Grid Grid.Row="0" Margin="0,0,0,22">
<Grid Grid.Row="0"
MaxWidth="{ThemeResource MaxPageContentWidth}" Margin="{ThemeResource ContentPageMargin}">
<TextBlock x:Uid="DashboardPage_Title" Style="{ThemeResource SubtitleTextBlockStyle}" HorizontalAlignment="Left"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,0,22">
<Button x:Name="AddWidgetButton"
x:Uid="AddWidget"
HorizontalAlignment="Right"
Expand All @@ -63,7 +64,7 @@
</Grid>

<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1">
<StackPanel>
<StackPanel MaxWidth="{ThemeResource MaxPageContentWidth}" Margin="{ThemeResource ContentPageMargin}">
<!-- Top Banner - Default/First run experience - shown until user dismissed -->
<commonviews:Banner x:Name="DashboardBanner"
TextWidth="450"
Expand Down
56 changes: 28 additions & 28 deletions tools/Environments/DevHome.Environments/Views/LandingPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
x:Class="DevHome.Environments.Views.LandingPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:pg="using:DevHome.Common"
xmlns:behaviors="using:DevHome.Common.Behaviors"
xmlns:vm="using:DevHome.Environments.ViewModels"
Expand All @@ -13,18 +11,16 @@
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
behaviors:NavigationViewHeaderBehavior.HeaderMode="Never"
xmlns:labs="using:CommunityToolkit.Labs.WinUI"
mc:Ignorable="d"
Loaded="OnLoaded">

<pg:ToolPage.Resources>
<ResourceDictionary Source="ms-appx:///DevHome.Common/Environments/Templates/EnvironmentsTemplates.xaml" />
</pg:ToolPage.Resources>

<Grid MaxWidth="{ThemeResource MaxPageContentWidth}" Margin="{ThemeResource ContentPageMargin}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="37" />
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

Expand All @@ -38,10 +34,10 @@
Command="{x:Bind LaunchActionCommand}"
x:Uid="ms-resource:///DevHome.Environments/Resources/LaunchButton"
Style="{StaticResource CardBodySplitButtonStyle}">
<SplitButton.Flyout>
<customControls:CardFlyout ItemsViewModels="{x:Bind LaunchOperations}"/>
</SplitButton.Flyout>
</SplitButton>
<SplitButton.Flyout>
<customControls:CardFlyout ItemsViewModels="{x:Bind LaunchOperations}"/>
</SplitButton.Flyout>
</SplitButton>
</DataTemplate>

<!-- Three Dot Button template -->
Expand Down Expand Up @@ -96,22 +92,23 @@
</Grid>
</DataTemplate>

<!-- Shimmer template from SetupFlow/SetupTargetView.xaml -->
<DataTemplate x:Key="ComputeSystemLoadingTemplate">
<ListView
SelectionMode="None"
ItemTemplate="{StaticResource HorizontalCardRootShimmerTemplate}"
ItemContainerStyle="{StaticResource HorizontalCardListViewItemContainerForManagementPageStyle}">
<x:String>Empty value for list since it doesn't need to use any bindings.</x:String>
<x:String>Empty value for list since it doesn't need to use any bindings.</x:String>
</ListView>
</DataTemplate>
<!-- Shimmer template from SetupFlow/SetupTargetView.xaml -->
<DataTemplate x:Key="ComputeSystemLoadingTemplate">
<ListView
SelectionMode="None"
ItemTemplate="{StaticResource HorizontalCardRootShimmerTemplate}"
ItemContainerStyle="{StaticResource HorizontalCardListViewItemContainerForManagementPageStyle}">
<x:String>Empty value for list since it doesn't need to use any bindings.</x:String>
<x:String>Empty value for list since it doesn't need to use any bindings.</x:String>
</ListView>
</DataTemplate>

</Grid.Resources>
<!-- Templates end here -->


<Grid Grid.Row="0" Margin="0,0,0,22" x:Name="SyncButtonGrid">
<!-- Header -->
<Grid Grid.Row="0" x:Name="SyncButtonGrid"
MaxWidth="{ThemeResource MaxPageContentWidth}" Margin="{ThemeResource HeaderMargin}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
Expand All @@ -121,8 +118,8 @@
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" x:Uid="Titlebar" Style="{ThemeResource SubtitleTextBlockStyle}" HorizontalAlignment="Left" x:Name="Titlebar"/>
<!-- Top right 'Sync' button -->
<!-- ToDo: Revisit after confirming glyphs to be used -->
<Button Grid.Column="4" HorizontalAlignment="Right" Padding="45 5 30 5" Command="{x:Bind ViewModel.SyncButtonCommand}" Margin="0 0 13 0">
<!-- ToDo: Revisit after confirming glyphs to be used -->
<Button Grid.Column="4" HorizontalAlignment="Right" Padding="45 5 30 5" Command="{x:Bind ViewModel.SyncButtonCommand}">
<StackPanel Orientation="Horizontal">
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE72C;" FontSize="11">
<FontIcon.RenderTransform>
Expand All @@ -134,9 +131,11 @@
</Button>
</Grid>

<StackPanel Grid.Row="1" Orientation="Horizontal">
<!-- Search and sort -->
<StackPanel Grid.Row="1" Orientation="Horizontal"
MaxWidth="{ThemeResource MaxPageContentWidth}" Margin="0,0,0,22">
<!-- Search field -->
<AutoSuggestBox x:Uid="SearchTextBox" x:Name="SearchTextBox" MinWidth="350" Height="35" Margin="17 0 0 0" QueryIcon="Find">
<AutoSuggestBox x:Uid="SearchTextBox" x:Name="SearchTextBox" MinWidth="350" MinHeight="35" QueryIcon="Find">
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="TextChanged">
<ic:InvokeCommandAction
Expand All @@ -147,7 +146,7 @@
</AutoSuggestBox>
<!-- Sort field -->
<TextBlock x:Uid="SortByTextBlock" VerticalAlignment="Center" Margin="50 0 10 0"/>
<ComboBox x:Uid="SortSelectionComboBox" x:Name="SortSelectionComboBox" Margin="0 3 0 0" Height="35">
<ComboBox x:Uid="SortSelectionComboBox" x:Name="SortSelectionComboBox" Margin="0 3 0 0" MinHeight="35">
<ComboBoxItem x:Uid="SortByName"/>
<ComboBoxItem x:Uid="SortByAltName"/>
<i:Interaction.Behaviors>
Expand All @@ -163,7 +162,8 @@
<!-- Per VM/Compute System card -->
<ScrollViewer Grid.Row="2" Style="{StaticResource EnvironmentScrollViewerStyle}">
<StackPanel>
<ListView
<ListView
MaxWidth="{ThemeResource MaxPageContentWidth}"
ItemsSource="{x:Bind ViewModel.ComputeSystemsView}" SelectionMode="None"
ItemContainerStyle="{StaticResource HorizontalCardListViewItemContainerForManagementPageStyle}">
<ListView.ItemsPanel>
Expand Down
4 changes: 2 additions & 2 deletions tools/ExtensionLibrary/DevHome.ExtensionLibrary/Views/ExtensionLibraryView.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@
</ResourceDictionary>
</Page.Resources>

<Grid MaxWidth="{ThemeResource MaxPageContentWidth}" Margin="{ThemeResource ContentPageMargin}">
<Grid>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel>
<StackPanel MaxWidth="{ThemeResource MaxPageContentWidth}" Margin="{ThemeResource ContentPageMargin}">
<commonviews:Banner x:Uid="ExtensionsBanner"
TextWidth="350"
Visibility="{x:Bind BannerViewModel.ShowExtensionsBanner,Mode=OneWay}"
Expand Down
Loading
Loading