Move scrollviewer in Environments page, adjust left margin of list

microsoft · Mar 15, 2024 · f717ebf · f717ebf
1 parent e2e4561
commit f717ebf
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 32 deletions.
diff --git a/common/Environments/Styles/HorizontalCardStyles.xaml b/common/Environments/Styles/HorizontalCardStyles.xaml
@@ -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>
@@ -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>
@@ -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>
 

diff --git a/common/Environments/Templates/EnvironmentsTemplates.xaml b/common/Environments/Templates/EnvironmentsTemplates.xaml
@@ -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. 

diff --git a/src/Styles/Thickness.xaml b/src/Styles/Thickness.xaml
@@ -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>
 

diff --git a/tools/Environments/DevHome.Environments/Views/LandingPage.xaml b/tools/Environments/DevHome.Environments/Views/LandingPage.xaml
@@ -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"
@@ -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>
 
@@ -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 -->
@@ -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" />
@@ -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>
@@ -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
@@ -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>
@@ -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>