Fix bug with HorizontalContentAlignment not working on NavigationView…

…Item (#1325) * Fix bug with NavViewItem HorizontalContentAlignment , Closes #481 * Improve visual behaviour * Add testpage für NavView Menuitem content stretch
microsoft · Sep 17, 2019 · 67537d9 · 67537d9
1 parent 418fe9c
commit 67537d9
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 4 deletions.
diff --git a/dev/NavigationView/NavigationView_rs1_themeresources.xaml b/dev/NavigationView/NavigationView_rs1_themeresources.xaml
@@ -1,4 +1,4 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
+<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
 <ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -589,7 +589,8 @@
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}" />
 
-                        <Grid HorizontalAlignment="Left" 
+                        <Grid
+                            HorizontalAlignment="Stretch"
                             x:Name="ContentGrid"
                             MinHeight="{ThemeResource NavigationViewItemOnLeftMinHeight}">
                             <Grid.ColumnDefinitions>

diff --git a/dev/NavigationView/TestUI/NavigationViewCaseBundle.xaml b/dev/NavigationView/TestUI/NavigationViewCaseBundle.xaml
@@ -27,6 +27,7 @@
             <Button x:Name="NavigateToMinimalPage" AutomationProperties.Name="Navigation Minimal Test" Margin="2" HorizontalAlignment="Stretch">Navigation Minimal Test</Button>
             <Button x:Name="NavigateToCustomThemeResourcesPage" AutomationProperties.Name="NavigationView custom ThemeResources Test" Margin="2" HorizontalAlignment="Stretch">NavigationView with custom ThemeResources Test</Button>
             <Button x:Name="NavigationViewBlankPage1" AutomationProperties.Name="NavigationView Blank Test1" Margin="2" HorizontalAlignment="Stretch">NavigationView Blank Test1</Button>
+            <Button x:Name="NavigationViewMenuItemStretchPageButton" AutomationProperties.Name="NavigationView Menuitem Stretch Test" Margin="2" HorizontalAlignment="Stretch">NavigationView Menuitem Stretch Test</Button>
         </StackPanel>
     </Grid>
 </local:TestPage>
diff --git a/dev/NavigationView/TestUI/NavigationViewCaseBundle.xaml.cs b/dev/NavigationView/TestUI/NavigationViewCaseBundle.xaml.cs
@@ -34,6 +34,7 @@ public NavigationViewCaseBundle()
             NavigateToMinimalPage.Click += delegate { Frame.NavigateWithoutAnimation(typeof(NavigationViewMinimalPage), 0); };
             NavigateToCustomThemeResourcesPage.Click += delegate { Frame.NavigateWithoutAnimation(typeof(NavigationViewCustomThemeResourcesPage), 0); };
             NavigationViewBlankPage1.Click += delegate { Frame.NavigateWithoutAnimation(typeof(NavigationViewBlankPage1), 0); };
+            NavigationViewMenuItemStretchPageButton.Click += delegate { Frame.NavigateWithoutAnimation(typeof(NavigationViewMenuItemStretchPage), 0); };
         }
     }
 }
diff --git a/dev/NavigationView/TestUI/NavigationViewMenuItemStretchPage.xaml b/dev/NavigationView/TestUI/NavigationViewMenuItemStretchPage.xaml
@@ -0,0 +1,40 @@
+<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
+<local:TestPage
+    x:Class="MUXControlsTestApp.NavigationViewMenuItemStretchPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:MUXControlsTestApp"
+    xmlns:muxcontrols="using:Microsoft.UI.Xaml.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <!-- This page contains a NavigationView control that is in LeftMinimal mode on initial load -->
+    <StackPanel>
+        <muxcontrols:NavigationView >
+            <muxcontrols:NavigationView.MenuItems>
+                <muxcontrols:NavigationViewItem HorizontalContentAlignment="Center" Icon="Find" Tag="find" IsSelected="True">
+                    <Border Background="Red">
+                        <TextBlock>Center</TextBlock>
+                    </Border>
+                </muxcontrols:NavigationViewItem>
+                <muxcontrols:NavigationViewItem HorizontalContentAlignment="Left" Icon="Find" Tag="find" IsSelected="True">
+                    <Border Background="Red">
+                        <TextBlock>Left</TextBlock>
+                    </Border>
+                </muxcontrols:NavigationViewItem>
+                <muxcontrols:NavigationViewItem HorizontalContentAlignment="Right" Icon="Find" Tag="find" IsSelected="True">
+                    <Border Background="Red">
+                        <TextBlock>Right</TextBlock>
+                    </Border>
+                </muxcontrols:NavigationViewItem>
+                <muxcontrols:NavigationViewItem HorizontalContentAlignment="Stretch" Icon="Find" Tag="find" IsSelected="True">
+                    <Border Background="Red">
+                        <TextBlock>Stretch</TextBlock>
+                    </Border>
+                </muxcontrols:NavigationViewItem>
+
+            </muxcontrols:NavigationView.MenuItems>
+        </muxcontrols:NavigationView>
+    </StackPanel>
+</local:TestPage>
diff --git a/dev/NavigationView/TestUI/NavigationViewMenuItemStretchPage.xaml.cs b/dev/NavigationView/TestUI/NavigationViewMenuItemStretchPage.xaml.cs
@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License. See LICENSE in the project root for license information.
+
+namespace MUXControlsTestApp
+{
+    public sealed partial class NavigationViewMenuItemStretchPage : TestPage
+    {
+        public NavigationViewMenuItemStretchPage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}
diff --git a/dev/NavigationView/TestUI/NavigationView_TestUI.projitems b/dev/NavigationView/TestUI/NavigationView_TestUI.projitems
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <PropertyGroup>
@@ -26,6 +26,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)NavigationViewMenuItemStretchPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)NavigationViewMinimalPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -92,8 +96,9 @@
     <Compile Include="$(MSBuildThisFileDirectory)NavigationViewIsPaneOpenPage.xaml.cs">
       <DependentUpon>NavigationViewIsPaneOpenPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)NavigationViewMenuItemStretchPage.xaml.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)NavigationViewMinimalPage.xaml.cs">
-     <DependentUpon>NavigationViewMinimalPage.xaml</DependentUpon>
+      <DependentUpon>NavigationViewMinimalPage.xaml</DependentUpon>
     </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)NavigationViewStretchPage.xaml.cs">
       <DependentUpon>NavigationViewStretchPage.xaml</DependentUpon>
@@ -132,4 +137,9 @@
       <DependentUpon>NavigationViewTopNavStorePage.xaml</DependentUpon>
     </Compile>
   </ItemGroup>
+  <ItemGroup>
+    <Compile Update="D:\Projects\microsoft-ui-xaml\dev\NavigationView\TestUI\NavigationViewMenuItemStretchPage.xaml.cs">
+      <DependentUpon>NavigationViewMenuItemStretchPage.xaml</DependentUpon>
+    </Compile>
+  </ItemGroup>
 </Project>