Merge pull request #20 from microsoft/master-update-to-winui2.4

Update to WinUI 2.4
microsoft · Jun 25, 2020 · 8f335b7 · 8f335b7
2 parents b9d883d + e1a2c9a
commit 8f335b7
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 42 deletions.
diff --git a/ContosoApp/App.xaml b/ContosoApp/App.xaml
@@ -26,6 +26,7 @@
         <ResourceDictionary>
 
             <ResourceDictionary.MergedDictionaries>
+                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                 <ResourceDictionary Source="/Styles/DataGrid.xaml" />
                 <ResourceDictionary Source="/Styles/Expander.xaml" />
                 <ResourceDictionary Source="/Styles/NavStyles.xaml" />

diff --git a/ContosoApp/AppShell.xaml b/ContosoApp/AppShell.xaml
@@ -25,6 +25,7 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:uc="using:Contoso.App.UserControls"
+    xmlns:MUXC="using:Microsoft.UI.Xaml.Controls"
     KeyDown="AppShell_KeyDown"
     TabNavigation="Cycle"
     mc:Ignorable="d">
@@ -33,41 +34,41 @@
         x:Name="LayoutRoot"
         Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-        <NavigationView
+        <MUXC:NavigationView
             x:Name="NavView"
             OpenPaneLength="160"
             AlwaysShowHeader="False"
             IsSettingsVisible="True"
             ItemInvoked="NavigationView_ItemInvoked"
-            BackRequested="NavView_BackRequested"
+            BackRequested="NavigationView_BackRequested"
             IsBackEnabled="{x:Bind AppFrame.CanGoBack, Mode=OneWay}">
-            
-            <NavigationView.MenuItems>
-                <NavigationViewItem
+
+            <MUXC:NavigationView.MenuItems>
+                <MUXC:NavigationViewItem
                     x:Name="CustomerListMenuItem"
                     Content="{x:Bind CustomerListLabel}" 
                     ToolTipService.ToolTip="{x:Bind CustomerListLabel}"
                     Icon="ContactInfo"/>
-                <NavigationViewItem
+                <MUXC:NavigationViewItem
                     x:Name="OrderListMenuItem"
                     Content="{x:Bind OrderListLabel}" 
                     ToolTipService.ToolTip="{x:Bind OrderListLabel}"
                     Icon="Shop"/>
-            </NavigationView.MenuItems>
+            </MUXC:NavigationView.MenuItems>
 
-            <NavigationView.PaneFooter>
+            <MUXC:NavigationView.PaneFooter>
                 <StackPanel>
-                    <NavigationViewItem
+                    <MUXC:NavigationViewItem
                         Content="View code"
                         ToolTipService.ToolTip="View code"
                         Tapped="ViewCodeNavPaneButton_Tapped">
-                        <NavigationViewItem.Icon>
+                        <MUXC:NavigationViewItem.Icon>
                             <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE943;"/>
-                        </NavigationViewItem.Icon>
-                    </NavigationViewItem>
+                        </MUXC:NavigationViewItem.Icon>
+                    </MUXC:NavigationViewItem>
                     <uc:AuthenticationControl/>
                 </StackPanel>
-            </NavigationView.PaneFooter>
+            </MUXC:NavigationView.PaneFooter>
 
             <!-- In OnNavigatingToPage, we synchronize the selected item in the NavigationView with the current page. -->
             <Frame
@@ -85,7 +86,7 @@
                 </Frame.ContentTransitions>
             </Frame>
 
-        </NavigationView>
+        </MUXC:NavigationView>
     </Grid>
 </Page>
 
diff --git a/ContosoApp/AppShell.xaml.cs b/ContosoApp/AppShell.xaml.cs
@@ -110,7 +110,7 @@ private void AppShell_KeyDown(object sender, KeyRoutedEventArgs e)
         /// <summary>
         /// Navigates to the page corresponding to the tapped item.
         /// </summary>
-        private void NavigationView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
+        private void NavigationView_ItemInvoked(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewItemInvokedEventArgs args)
         {
             var label = args.InvokedItem as string;
             var pageType =
@@ -156,7 +156,7 @@ await Launcher.LaunchUriAsync(new Uri(
         /// <summary>
         /// Navigates the frame to the previous page.
         /// </summary>
-        private void NavView_BackRequested(NavigationView sender, NavigationViewBackRequestedEventArgs args)
+        private void NavigationView_BackRequested(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewBackRequestedEventArgs args)
         {
             if (AppFrame.CanGoBack)
             {

diff --git a/ContosoApp/Contoso.App.csproj b/ContosoApp/Contoso.App.csproj
@@ -11,7 +11,7 @@
     <AssemblyName>ContosoApp</AssemblyName>
     <DefaultLanguage>en-US</DefaultLanguage>
     <TargetPlatformIdentifier>UAP</TargetPlatformIdentifier>
-    <TargetPlatformVersion Condition=" '$(TargetPlatformVersion)' == '' ">10.0.19569.0</TargetPlatformVersion>
+    <TargetPlatformVersion Condition=" '$(TargetPlatformVersion)' == '' ">10.0.19041.0</TargetPlatformVersion>
     <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
     <MinimumVisualStudioVersion>14</MinimumVisualStudioVersion>
     <FileAlignment>512</FileAlignment>
@@ -260,6 +260,9 @@
     <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.DataGrid">
       <Version>4.0.0</Version>
     </PackageReference>
+    <PackageReference Include="Microsoft.UI.Xaml">
+      <Version>2.4.2</Version>
+    </PackageReference>
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\ContosoModels\Contoso.Models.csproj">

diff --git a/ContosoApp/Views/CustomerDetailPage.xaml b/ContosoApp/Views/CustomerDetailPage.xaml
@@ -30,6 +30,7 @@
     xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
     xmlns:stateTriggers="using:Contoso.App.StateTriggers"
     xmlns:uc="using:Contoso.App.UserControls"
+    xmlns:MUXC="using:Microsoft.UI.Xaml.Controls"
     NavigationCacheMode="Enabled"
     mc:Ignorable="d">
 
@@ -62,7 +63,7 @@
                     Icon="Cancel"
                     Label="Cancel"
                     Visibility="{x:Bind ViewModel.IsInEdit, Mode=OneWay}" />
-                <AppBarSeparator Visibility="{x:Bind ViewModel.IsInEdit, Mode=OneWay}" />
+                <AppBarSeparator Visibility="{x:Bind ViewModel.IsInEdit, Mode=OneWay}" MaxHeight="40" />
                 <AppBarButton
                     Click="{x:Bind ViewModel.StartEdit}"
                     Icon="Edit"
@@ -298,7 +299,7 @@
                                 </toolkit:DataGrid.Columns>
                             </toolkit:DataGrid>
 
-                            <ProgressBar
+                            <MUXC:ProgressBar
                                 Margin="0,48,0,0"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Top"

diff --git a/ContosoApp/Views/CustomerListPage.xaml b/ContosoApp/Views/CustomerListPage.xaml
@@ -28,6 +28,7 @@
     xmlns:stateTriggers="using:Contoso.App.StateTriggers"
     xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
     xmlns:uc="using:Contoso.App.UserControls"
+    xmlns:MUXC="using:Microsoft.UI.Xaml.Controls"
     NavigationCacheMode="Required"
     mc:Ignorable="d">
 
@@ -54,13 +55,13 @@
             <TextBlock
                 x:Name="PageTitle"
                 Style="{StaticResource PageTitleTextBlockStyle}"
-                Text="Customers" />
+                Text="Customers"/>
 
             <!--
                 On Windows 10, version 1607 or later, set DefaultLabelPosition to Right in code.
                 See CommandBar_Loaded event handler.
             -->
-            <CommandBar
+            <CommandBar IsOpen="False"
                 x:Name="mainCommandBar"
                 HorizontalAlignment="Stretch"
                 Background="Transparent"
@@ -79,7 +80,7 @@
                     IsEnabled="{x:Bind vm:Converters.IsNotNull(ViewModel.SelectedCustomer), Mode=OneWay}"
                     Label="Add order"
                     ToolTipService.ToolTip="Add order" />
-                <AppBarSeparator />
+                <AppBarSeparator MaxHeight="40"></AppBarSeparator>
                 <AppBarButton
                     Click="CreateCustomer_Click"
                     Icon="Add"
@@ -91,14 +92,14 @@
                     Label="Sync"
                     ToolTipService.ToolTip="Sync with server" />
             </CommandBar>
-            
+
             <uc:CollapsibleSearchBox
                 x:Name="CustomerSearchBox"
                 Width="240"
                 Margin="12,8,12,0"
                 CollapseWidth="{StaticResource LargeWindowSnapPoint}"
                 Loaded="CustomerSearchBox_Loaded"
-                RelativePanel.AlignRightWithPanel="True" />
+                RelativePanel.AlignRightWithPanel="True"/>
 
             <Grid
                 Margin="0,10,0,0"
@@ -150,7 +151,7 @@
                     </toolkit:DataGrid.Columns>
                 </toolkit:DataGrid>
 
-                <ProgressBar
+                <MUXC:ProgressBar
                     Margin="0,50,0,0"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Top"

diff --git a/ContosoApp/Views/OrderListPage.xaml b/ContosoApp/Views/OrderListPage.xaml
@@ -30,6 +30,7 @@
     xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
     xmlns:stateTriggers="using:Contoso.App.StateTriggers"
     xmlns:uc="using:Contoso.App.UserControls"
+    xmlns:MUXC="using:Microsoft.UI.Xaml.Controls"
     NavigationCacheMode="Required"
     mc:Ignorable="d">
 
@@ -248,7 +249,7 @@
                             </toolkit:DataGrid.Columns>
                         </toolkit:DataGrid>
 
-                        <ProgressBar
+                        <MUXC:ProgressBar
                             Margin="0,50,0,0"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Top"

diff --git a/ContosoApp/Views/SettingsPage.xaml b/ContosoApp/Views/SettingsPage.xaml
@@ -24,6 +24,7 @@
     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:MUXC="using:Microsoft.UI.Xaml.Controls"
     mc:Ignorable="d">
     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
         <StackPanel>
@@ -32,21 +33,11 @@
                 Style="{StaticResource PageTitleTextBlockStyle}"
                 Text="Settings" />
 
-            <TextBlock
-                Margin="0,25,0,5"
-                Text="Data source" />
-            <RadioButton
-                x:Name="SqliteRadio"
-                Checked="OnDataSourceChanged"
-                Content="Sqlite (Local)"
-                GroupName="DataSource"
-                Tag="Sqlite" />
-            <RadioButton
-                x:Name="RestRadio"
-                Checked="OnDataSourceChanged"
-                Content="REST (Azure)"
-                GroupName="DataSource"
-                Tag="Rest" />
+            <MUXC:RadioButtons Header="Data source" SelectedIndex="2">
+                <RadioButton Checked="OnDataSourceChanged" x:Name="SqliteRadio" Tag="Sqlite">Sqlite (Local)</RadioButton>
+                <RadioButton Checked="OnDataSourceChanged" x:Name="RestRadio" Tag="Rest">REST (Azure)</RadioButton>
+            </MUXC:RadioButtons>
+
             <TextBlock Text="Data is read-only while using REST unless you deploy your own service. See the GitHub repository for details." />
 
             <HyperlinkButton

diff --git a/README.md b/README.md
@@ -24,7 +24,20 @@ and products for the fictitious company Contoso.
 
 ![ContosoApp screenshot 1](screenshot1.png)
 
-## What's new
+### June 2020 update
+
+This update includes:
+
+* Update to WinUI 2.4 
+	* Add Microsoft.UI.Xaml NuGet package reference
+	* Update <Application.Resources> in App.xaml 
+* Refactoring for the following WinUI 2.4 controls:
+   * [ProgressBar](https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/progress-controls)
+   * [NavigationView](https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/navigationview)
+   * [RadioButtons](https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/radio-button)
+* Minor update to AppBarSeparator instances to correct unneccessary appearance of "More" button, and eliminate vertical shift of command buttons when the "More" button is clicked
+
+## Previous updates
 
 - Use of new controls like [DataGrid](https://docs.microsoft.com/windows/communitytoolkit/controls/datagrid), 
 [NavigationView](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.navigationview), and