Winui2

.github/ISSUE_TEMPLATE/bug_report.md

@@ -23,13 +23,21 @@ Steps to reproduce the behavior:
 <!-- If applicable, add screenshots here to help explain your problem -->
 
 **Version Info**
-<!-- Please enter the Gallery version, OS version(s), and form factor(s) -->
+- [ ] Xaml Controls Gallery - Downloaded from Store
+    - If so, which version? (1.2.x -- Found on the Settings page of the app.)
+- [ ] WinUI 3 Controls Gallery - Downloaded from Store 
+    - If so, which version? (1.3.x -- Found on the Settings page of the app.)
+- [ ] App built locally from source 
+  - If so, which branch? (WinUI 3 versions are built off the winui3 branch)
 
-Gallery version (found on Settings page): 
-<!-- [e.g. 1.2.3.0] -->
+**Additional context**
+<!-- Enter any other applicable info here -->
 
-Windows 10 version:
+Windows version:
 - [ ] Insider Build (xxxxx)
+- [ ] May 2021 Update (19043)
+- [ ] October 2020 Update (19042)
+- [ ] May 2020 Update (19041)
 - [ ] November 2019 Update (18363)
 - [ ] May 2019 Update (18362)
 - [ ] October 2018 Update (17763)
@@ -45,5 +53,3 @@ Device form factor:
 - [ ] Surface Hub
 - [ ] IoT
 
-**Additional context**
-<!-- Enter any other applicable info here -->

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "dotnet.defaultSolution": "WinUIGallery/WinUIGallery.sln",
+    "dotnet.preferCSharpExtension": true
+}

README.md

@@ -17,26 +17,31 @@ description: Demonstrates the usage of all XAML/WinUI controls in an interactive
 
 [![Build Status](https://dev.azure.com/stmoy/Xaml%20Controls%20Gallery/_apis/build/status/XAML%20Controls%20%20Gallery%20-%20CI%20Tests?branchName=master)](https://dev.azure.com/stmoy/Xaml%20Controls%20Gallery/_build/latest?definitionId=2&branchName=master)
 
-Shows all of the XAML controls in an interactive format. This app is the interactive companion to the [Fluent Design Guidelines](https://docs.microsoft.com/windows/uwp/design/basics/) and shows the usage of both UWP Xaml APIs and [Windows UI Toolkit](https://docs.microsoft.com/uwp/toolkits/winui/) APIs.
+Shows all of the XAML controls in an interactive format. This app is the interactive companion to the [Fluent Design Guidelines](https://docs.microsoft.com/windows/uwp/design/basics/) and shows the usage of both UWP Xaml APIs and [Windows UI Library](https://docs.microsoft.com/windows/apps/winui/) APIs.
+
 
 ## The XAML Controls Gallery shows how to:
 
 - **Specify XAML controls in markup:** Each control page shows the markup used to create each example.
-- **Use the Microsoft.UI.Xaml (WinUI) Library:** The app includes the latest WinUI NuGet package and shows how to use the [Windows UI Toolkit](https://docs.microsoft.com/uwp/toolkits/winui/) controls like NavigationView, SwipeControl, and more.
+- **Use the Microsoft.UI.Xaml (WinUI) Library:** The app includes the latest WinUI NuGet package and shows how to use the [Windows UI Library](https://docs.microsoft.com/windows/apps/winui/) controls like NavigationView, SwipeControl, and more.
+
 - **Basic layout:** This sample will show all of the possible layout options for your app and allow you to interact with the panels to show how to achieve any layout you are looking for.
 - **Adaptive UI:** In addition to showing how each control responds to different form factors, the app itself is responsive and shows various methods for achieving adaptive UI.
-- **Version adaptive code:** This sample shows how to write version adaptive code so that the app can run on previous versions of Windows while also using the latest capabilities on the most recent verison of Windows.
+- **Version adaptive code:** This sample shows how to write version adaptive code so that the app can run on previous versions of Windows while also using the latest capabilities on the most recent version of Windows.
 
 ## Further information
 
 >**Note**: The Xaml Controls Gallery requires Visual Studio [2017](http://go.microsoft.com/fwlink/?LinkID=532422) or [2019](https://visualstudio.microsoft.com/vs/) to build and Windows 10 to execute.
 
-To obtain information about Windows 10 development, go to the [Windows Dev Center](https://developer.microsoft.com/windows)
+To obtain information about Windows 10 & 11 development, go to the [Windows Dev Center](https://developer.microsoft.com/windows)
 
 To obtain information about Microsoft Visual Studio and the tools for developing Windows apps, go to [Visual Studio](http://go.microsoft.com/fwlink/?LinkID=532422)
 
-To contact the authors, please reach out to ControlsGallery@microsoft.com
+## 🐞 Found a bug? Want a new sample?
+
+If you find a bug **within the Xaml Controls Gallery** or want to request a new sample, please [file an issue](https://github.com/microsoft/Xaml-Controls-Gallery/issues/new/choose).
 
+If you find a bug **within your app (not in the Xaml Controls Gallery)** and need help, please [file an issue on the WinUI repo](https://github.com/microsoft/microsoft-ui-xaml/issues/new/choose).
 
 
 ## Related topics

XamlControlsGallery/AllControlsPage.xaml → WinUIGallery/AllControlsPage.xaml

@@ -17,7 +17,8 @@
     xmlns:behavior="using:AppUIBasics.Behaviors"
     xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
     xmlns:controls="using:Windows.UI.Xaml.Controls"
-    NavigationCacheMode="Enabled">
+    NavigationCacheMode="Enabled"
+    HighContrastAdjustment="None">
 
     <!--  This grid acts as a root panel for the page.  -->
     <Grid Background="{ThemeResource HomePageBackgroundBrush}">
@@ -36,65 +37,72 @@
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
                         <Setter Target="itemGridView.Padding" Value="12,0,12,36" />
+                        <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="24,0,0,36"
+            Margin="31,0,0,0"
             AutomationProperties.AutomationId="ItemGridView"
             AutomationProperties.Name="Items In Group"
             ContainerContentChanging="OnItemGridViewContainerContentChanging"
             IsItemClickEnabled="True"
             IsSwipeEnabled="False"
             ItemClick="OnItemGridViewItemClick"
-            ItemContainerStyle="{StaticResource GridViewItemStyle}"
+            ItemContainerStyle="{StaticResource IndentedGridViewItemStyle}"
             ItemTemplate="{StaticResource ControlItemTemplate}"
             ItemsSource="{x:Bind Items, Mode=OneWay}"
             KeyDown="OnItemGridViewKeyDown"
             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="-24,0,0,24">
+                <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.jpg"
-                            Stretch="UniformToFill" />
+                        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="Top" Fill="{StaticResource HeroImageGradientBrush}"/>
+
                     <TextBlock x:Name="smallHeaderText"
-                               Visibility="Collapsed"
-                               Style="{StaticResource NarrowHeaderTextBlockStyle}"                               
-                               Text="{StaticResource ControlsName}"/>
+                               Foreground="Black"
+                               Visibility="Visible"
+                               Style="{StaticResource TitleTextBlockStyle}"                               
+                               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"
-            Background="{ThemeResource HomePageBackgroundBrush}"
-            FontSize="42"
-            Padding="24,34,12,12"
-            Foreground="{StaticResource SystemControlForegroundChromeWhiteBrush}" 
+            Foreground="Black"
+            Background="{ThemeResource HomePageBackgroundBrush}"              
+            FontSize="28"
+            Padding="{ThemeResource NavigationViewHeaderMargin}"
             IsHitTestVisible="False"
-            ShadowOpacity="1"/>
+            ShadowOpacity="0"/>-->
     </Grid>
-</local:ItemsPageBase>
+</local:ItemsPageBase>

XamlControlsGallery/App.xaml → WinUIGallery/App.xaml

@@ -1,4 +1,4 @@
-<!--
+<!--
     //*********************************************************
     //
     // Copyright (c) Microsoft. All rights reserved.
@@ -13,38 +13,35 @@
     x:Class="AppUIBasics.App"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:winui="using:Microsoft.UI.Xaml.Controls" 
     xmlns:local="using:AppUIBasics"
     xmlns:common="using:AppUIBasics.Common">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <local:ItemTemplates />
-                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
+                <winui:XamlControlsResources ControlsResourcesVersion="Version2"/>
             </ResourceDictionary.MergedDictionaries>
 
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceDictionary x:Key="Light">
-                    <StaticResource x:Key="HomePageBackgroundBrush" ResourceKey="ApplicationPageBackgroundThemeBrush" />
-                    <SolidColorBrush x:Key="SearchBoxBorderBrush" Color="Transparent" />
-                    <Thickness x:Key="SearchBoxBorderThickness">0</Thickness>
+                    <SolidColorBrush x:Key="HomePageBackgroundBrush" Color="Transparent"/>
+                    <StaticResource x:Key="ControlExampleDisplayBrush" ResourceKey="SolidBackgroundFillColorBaseBrush" />
+                    <Thickness x:Key="ControlExampleDisplayBorderThickness">0</Thickness>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Dark">
-                    <StaticResource x:Key="HomePageBackgroundBrush" ResourceKey="ApplicationPageBackgroundThemeBrush" />
-                    <SolidColorBrush x:Key="SearchBoxBorderBrush" Color="Transparent" />
-                    <Thickness x:Key="SearchBoxBorderThickness">0</Thickness>
+                    <SolidColorBrush x:Key="HomePageBackgroundBrush" Color="Transparent"/>
+                    <StaticResource x:Key="ControlExampleDisplayBrush" ResourceKey="SolidBackgroundFillColorBaseBrush" />
+                    <Thickness x:Key="ControlExampleDisplayBorderThickness">0</Thickness>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
                     <SolidColorBrush x:Key="HomePageBackgroundBrush" Color="{ThemeResource SystemColorWindowColor}" />
-                    <SolidColorBrush x:Key="SearchBoxBorderBrush" Color="{ThemeResource SystemColorWindowTextColor}" />
-                    <Thickness x:Key="SearchBoxBorderThickness">2</Thickness>
+                    <SolidColorBrush x:Key="ControlExampleDisplayBrush" Color="{ThemeResource SystemColorWindowColor}" />
+                    <Thickness x:Key="ControlExampleDisplayBorderThickness">1</Thickness>
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
 
-            <LinearGradientBrush x:Key="HeroImageGradientBrush" StartPoint="0.5,0" EndPoint="0.5,1">
-                <GradientStop Offset="0" Color="{ThemeResource SystemAltMediumColor}"/>
-                <GradientStop Offset="0.5" Color="{ThemeResource SystemAltMediumColor}"/>
-                <GradientStop Offset="1" Color="Transparent"/>
-            </LinearGradientBrush>
+            <x:Double x:Key="TeachingTipMinWidth">50</x:Double>
 
             <!--  Application-specific resources  -->
             <common:NullableBooleanToBooleanConverter x:Key="nullableBooleanToBooleanConverter" />
@@ -56,11 +53,21 @@
             <!--  Breakpoints  -->
             <x:Double x:Key="Breakpoint640Plus">641</x:Double>
 
-            <Thickness x:Key="PageHeaderDefaultPadding">12,28,12,0</Thickness>
+            <Thickness x:Key="PageHeaderDefaultPadding">0</Thickness>
             <Thickness x:Key="PageHeaderMinimalPadding">-4,0,12,0</Thickness>
 
-            <x:String x:Key="ControlsName">All controls</x:String>
-            <x:String x:Key="NewControlsName">What's New</x:String>
+            <Thickness x:Key="ControlElementScreenshotModePadding">67</Thickness>
+
+            <!-- L-Pattern Overwriting resources -->
+            <Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
+            <Thickness x:Key="NavigationViewContentGridBorderThickness">1,1,0,0</Thickness>
+            <CornerRadius x:Key="NavigationViewContentGridCornerRadius">8,0,0,0</CornerRadius>
+            <Thickness x:Key="NavigationViewHeaderMargin">56,34,0,0</Thickness>
+
+            <SolidColorBrush x:Key="GridViewHeaderItemDividerStroke" Color="Transparent"/>
+
+            <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" />
@@ -79,24 +86,23 @@
                 <Setter Property="ZoomMode" Value="Disabled" />
             </Style>
 
-            <Style x:Key="GridViewItemStyle" TargetType="GridViewItem">
+            <Style x:Key="GridViewItemStyle" TargetType="GridViewItem" BasedOn="{StaticResource DefaultGridViewItemStyle}">
                 <Setter Property="Margin" Value="0,0,12,12" />
             </Style>
 
-            <Style x:Key="IndentedGridViewItemStyle" TargetType="GridViewItem">
+            <Style x:Key="IndentedGridViewItemStyle" TargetType="GridViewItem" BasedOn="{StaticResource DefaultGridViewItemStyle}">
                 <Setter Property="Margin" Value="12,0,0,12" />
             </Style>
 
-            <Style x:Key="GridViewItemStyleSmall" TargetType="GridViewItem">
+            <Style x:Key="GridViewItemStyleSmall" TargetType="GridViewItem" BasedOn="{StaticResource DefaultGridViewItemStyle}">
                 <Setter Property="Margin" Value="0,0,0,12" />
                 <Setter Property="HorizontalContentAlignment" Value="Stretch" />
             </Style>
 
-            <Style x:Key="IndentedGridViewItemStyleSmall" TargetType="GridViewItem">
+            <Style x:Key="IndentedGridViewItemStyleSmall" TargetType="GridViewItem" BasedOn="{StaticResource DefaultGridViewItemStyle}">
                 <Setter Property="Margin" Value="12,0,12,12" />
                 <Setter Property="HorizontalContentAlignment" Value="Stretch" />
             </Style>
-
         </ResourceDictionary>
     </Application.Resources>
 </Application>