WinUI 2 Gallery Visual Revamp (microsoft#934)

* add imageIconPath

* home page update layout

* add uri

* update more icons on home page

* main banner placement update

* add subtitle

* update header tiles

* update icons

* update all controls page

* update info badge

* update narrow width view

* update header tile image

* add newest icons!

* Added template studio link + fixed some bugs

- Added template studio tile
- App title changing to white in dark mode --> now always black
- Changed sized of tiles
- Changed color of tiles to work in light + dark mode
- Updated corner radius

* Updated the title name

* Update XamlControlsGallery/App.xaml

Co-authored-by: Marcel Wagner <marcel.alex.wagner@outlook.com>

* Fixed headers

- removed interactions to be more consistent with WinUI 3 Gallery + interactions were often laggy
- made text black for both light and dark modes

* Additional few tweaks

Co-authored-by: Karen Lai <biilai@microsoft.com>
Co-authored-by: Karen Lai <7976322+karenbtlai@users.noreply.github.com>
Co-authored-by: Marcel Wagner <marcel.alex.wagner@outlook.com>
Co-authored-by: Bob Pulliam <bpulliam@microsoft.com>

XamlControlsGallery/AllControlsPage.xaml

@@ -37,18 +37,18 @@
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
                         <Setter Target="itemGridView.Padding" Value="12,0,12,36" />
-                        <Setter Target="itemGridView.Margin" Value="0,-80,0,0" />
+                        <Setter Target="itemGridView.Margin" Value="0,-44,0,0" />
                         <Setter Target="headerImageView.Margin" Value="-12,0,-12,12" />
                         <Setter Target="itemGridView.ItemContainerStyle" Value="{StaticResource GridViewItemStyleSmall}" />
                         <Setter Target="pageHeader.Visibility" Value="Collapsed" />
-                        <Setter Target="smallHeaderText.Visibility" Value="Visible"/>
+                        <Setter Target="smallHeaderText.Visibility" Value="Collapsed"/>
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
 
         <GridView x:Name="itemGridView"
-            Padding="40,0,0,36"
+            Margin="31,0,0,0"
             AutomationProperties.AutomationId="ItemGridView"
             AutomationProperties.Name="Items In Group"
             ContainerContentChanging="OnItemGridViewContainerContentChanging"
@@ -62,43 +62,47 @@
             Loaded="OnItemGridViewLoaded"
             SizeChanged="OnItemGridViewSizeChanged"
             SelectionMode="None">
-            <interactivity:Interaction.Behaviors>
+            <!--<interactivity:Interaction.Behaviors>
                 <behavior:ImageScrollBehavior TargetControl="{Binding ElementName=pageHeader}" />
-            </interactivity:Interaction.Behaviors>
+            </interactivity:Interaction.Behaviors>-->
 
             <GridView.Header>
-                <Grid Margin="-40,0,0,-60"  Height="230">
+                <Grid Margin="12,39,43,0">
                     <ParallaxView
                         x:Name="headerImageView"
-                        Height="250"
-                        Margin="0,0,0,0"
+                        Margin="0,0,0,28"
+                        Height="200"
                         Source="{x:Bind itemGridView}"
-                        VerticalShift="350">
-                        <Image
-                            x:Name="headerImage"
-                            HorizontalAlignment="Center"
-                            Source="Assets/MainPage_Banner.png"
-                            Stretch="Uniform" />
+                        VerticalShift="0">
+                        <Grid CornerRadius="{StaticResource ControlCornerRadius}">
+                            <Image
+                                x:Name="headerImage"
+                                HorizontalAlignment="Center"
+                                Source="Assets/MainPage_Banner.png"
+                                Stretch="Fill" />
+                        </Grid>
+
                     </ParallaxView>
-                    <Rectangle Height="60" VerticalAlignment="Bottom" Fill="{StaticResource HeroImageGradientBrush}"/>
+
                     <TextBlock x:Name="smallHeaderText"
-                               Foreground="{ThemeResource PageHeaderForegroundBrush}"
-                               Visibility="Collapsed"
+                               Foreground="Black"
+                               Visibility="Visible"
                                Style="{StaticResource TitleTextBlockStyle}"                               
-                               Text="{StaticResource ControlsName}"
-                               Margin="84,24,0,0" />
+                               Text="All controls"
+                               Margin="50,50,0,20" />
                 </Grid>
             </GridView.Header>
         </GridView>
 
-        <local:PageHeader x:Name="pageHeader"
-            Title="{StaticResource ControlsName}"
+        <!--<local:PageHeader x:Name="pageHeader"
+            Title= "All controls"
+            Margin="44,92"
             VerticalAlignment="Top"
-            Foreground="{ThemeResource PageHeaderForegroundBrush}"
+            Foreground="Black"
             Background="{ThemeResource HomePageBackgroundBrush}"              
             FontSize="28"
             Padding="{ThemeResource NavigationViewHeaderMargin}"
             IsHitTestVisible="False"
-            ShadowOpacity="0"/>
+            ShadowOpacity="0"/>-->
     </Grid>
 </local:ItemsPageBase>

XamlControlsGallery/App.xaml

@@ -53,7 +53,7 @@
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
 
-            <CornerRadius x:Key="ControlCornerRadius">4</CornerRadius>
+            <CornerRadius x:Key="ControlCornerRadius">8</CornerRadius>
 
             <LinearGradientBrush x:Key="HeroImageGradientBrush" StartPoint="0.5,0" EndPoint="0.5,1.5">
                 <GradientStop Offset="0" Color="Transparent"/>
@@ -84,8 +84,8 @@
 
             <SolidColorBrush x:Key="GridViewHeaderItemDividerStroke" Color="Transparent"/>
 
-            <x:String x:Key="ControlsName">All controls</x:String>
-            <x:String x:Key="NewControlsName">What's New</x:String>
+            <x:String x:Key="AppTitleName">WinUI 2 Gallery</x:String>
+            <x:String x:Key="WinUIVersion">SDK 2.8</x:String>
 
             <Style x:Key="OutputTextBlockStyle" BasedOn="{StaticResource BodyTextBlockStyle}" TargetType="TextBlock">
                 <Setter Property="Margin" Value="8,8,0,0" />

XamlControlsGallery/Behaviors/ImageScrollBehavior.cs

@@ -15,7 +15,7 @@ public class ImageScrollBehavior : DependencyObject, IBehavior
         private const int _alpha = 255;
         private const int _maxFontSize = 28;
         private const int _minFontSize = 10;
-        private const int scrollViewerThresholdValue = 85;
+        private const int scrollViewerThresholdValue = 100;
 
         private ScrollViewer scrollViewer;
         private ListViewBase listGridView;

XamlControlsGallery/Common/ImageLoader.cs

@@ -1,4 +1,4 @@
-using AppUIBasics.Data;
+using AppUIBasics.Data;
 using System;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
@@ -27,13 +27,13 @@ private async static void OnPropertyChanged(DependencyObject d, DependencyProper
             if (d is Image image)
             {
                 var item = await ControlInfoDataSource.Instance.GetItemAsync(e.NewValue?.ToString());
-                if (item?.ImagePath != null)
+                if (item?.ImageIconPath != null)
                 {
-                    Uri imageUri = new Uri(item.ImagePath, UriKind.Absolute);
+                    Uri imageUri = new Uri(item.ImageIconPath, UriKind.Absolute);
                     BitmapImage imageBitmap = new BitmapImage(imageUri);
                     image.Source = imageBitmap;
                 }
             }
         }
     }
-}
+}

XamlControlsGallery/ControlPages/AutoSuggestBoxPage.xaml.cs

@@ -238,7 +238,7 @@ private void SelectControl(ControlInfoDataItem control)
             {
                 ControlDetails.Visibility = Visibility.Visible;
 
-                BitmapImage image = new BitmapImage(new Uri(control.ImagePath));
+                BitmapImage image = new BitmapImage(new Uri(control.ImageIconPath));
                 ControlImage.Source = image;
 
                 ControlTitle.Text = control.Title;

XamlControlsGallery/ControlPages/ListViewPage.xaml

@@ -19,7 +19,7 @@
     <Page.Resources>
         <DataTemplate x:Key="IconTextTemplate" x:DataType="data:ControlInfoDataItem">
             <RelativePanel>
-                <Image x:Name="image" Height="36" Width="36" Margin="0,8,0,8" Source="{x:Bind ImagePath}" Stretch="UniformToFill" />
+                <Image x:Name="image" Height="36" Width="36" Margin="0,8,0,8" Source="{x:Bind ImageIconPath}" Stretch="UniformToFill" />
                 <StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="8,8,0,0" RelativePanel.RightOf="image">
                     <TextBlock Text="{x:Bind Title}" Style="{StaticResource BaseTextBlockStyle}" />
                     <TextBlock Text="{x:Bind Subtitle}" Margin="0,4,8,0" Style="{StaticResource BodyTextBlockStyle}" />

XamlControlsGallery/ControlPages/SemanticZoomPage.xaml

@@ -1,4 +1,4 @@
-<!--
+<!--
 //*********************************************************
 //
 // Copyright (c) Microsoft. All rights reserved.
@@ -25,7 +25,7 @@
 
         <DataTemplate x:Key="ZoomedInTemplate" x:DataType="data:ControlInfoDataItem">
             <StackPanel Orientation="Horizontal" MinWidth="200" Margin="12,6,12,6">
-                <Image Source="{x:Bind ImagePath}" Width="36"/>
+                <Image Source="{x:Bind ImageIconPath}" Width="36"/>
                 <StackPanel Margin="20,0,0,0">
                     <TextBlock Text="{x:Bind Title}" Style="{StaticResource BaseTextBlockStyle}"/>
                     <TextBlock Text="{x:Bind Subtitle}" TextWrapping="Wrap" HorizontalAlignment="Left" Width="300" Style="{StaticResource BodyTextBlockStyle}"/>
@@ -79,4 +79,4 @@
             </local:ControlExample.Xaml>
         </local:ControlExample>
     </StackPanel>
-</Page>
+</Page>