[Windows] Fix Picker alignment issues (#13516)

* Fix Windows Picker alignment issues * Refactoring code * Update src/Controls/samples/Controls.Sample/Pages/Controls/PickerPage.xaml.cs Co-authored-by: Manuel de la Pena <mandel@microsoft.com> * Auto-format source code * Fix build errors * Auto-format source code --------- Co-authored-by: Manuel de la Pena <mandel@microsoft.com> Co-authored-by: GitHub Actions Autoformatter <autoformat@example.com>
dotnet · Mar 17, 2023 · 048ae02 · 048ae02
1 parent 16fcd7e
commit 048ae02
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 2 deletions.
diff --git a/src/Controls/samples/Controls.Sample/Pages/Controls/PickerPage.xaml b/src/Controls/samples/Controls.Sample/Pages/Controls/PickerPage.xaml
@@ -83,6 +83,37 @@
                         Clicked="OnRemoveBindingContextClicked" />
                 </StackLayout>
 
+                <Label
+                     Text="Alignment"
+                     Style="{StaticResource Headline}" />
+                <Grid
+                    HeightRequest="150"
+                    RowDefinitions="Auto, *">
+                    <HorizontalStackLayout
+                        HorizontalOptions="Center">
+                        <Button 
+                            x:Name="HorizontalOptionsButton"
+                            Text="Update HorizontalOptions"
+                            Clicked="OnUpdateHorizontalOptionsClicked"/>
+                        <Button 
+                            x:Name="VerticalOptionsButton"
+                            Text="Update VerticalOptions"
+                            Clicked="OnUpdateVerticalOptionsClicked"/>
+                    </HorizontalStackLayout>
+                    <Picker
+                        x:Name="AlignmentPicker"
+                        Grid.Row="1"
+                        SelectedIndex="0"
+                        BackgroundColor="Green"
+                        TextColor="White"
+                        Margin="0, 6">
+                        <Picker.Items>
+                            <x:String>Item 1</x:String>
+                            <x:String>Item 2</x:String>
+                            <x:String>Item 3</x:String>
+                        </Picker.Items>
+                    </Picker>
+                </Grid>
             </VerticalStackLayout>
         </ScrollView>
     </views:BasePage.Content>

diff --git a/src/Controls/samples/Controls.Sample/Pages/Controls/PickerPage.xaml.cs b/src/Controls/samples/Controls.Sample/Pages/Controls/PickerPage.xaml.cs
@@ -8,14 +8,17 @@ namespace Maui.Controls.Sample.Pages
 {
 	public partial class PickerPage
 	{
+		int _horizontalOptionsIndex;
+		int _verticalOptionsIndex;
+
 		public PickerPage()
 		{
 			InitializeComponent();
 
 			UpdatePickerBackground();
 			UpdatePickerBindingContext();
 
-			this.BindingContext = this;
+			BindingContext = this;
 
 			Loaded += (s, e) =>
 			{
@@ -112,6 +115,41 @@ void UpdatePickerBindingContext()
 				}
 			};
 		}
+
+		void OnUpdateHorizontalOptionsClicked(object sender, EventArgs e)
+		{
+			AlignmentPicker.HorizontalOptions = GetLayoutOptions(_horizontalOptionsIndex);
+			UpdateIndex(ref _horizontalOptionsIndex);
+		}
+
+		void OnUpdateVerticalOptionsClicked(object sender, EventArgs e)
+		{
+			AlignmentPicker.VerticalOptions = GetLayoutOptions(_verticalOptionsIndex);
+			UpdateIndex(ref _verticalOptionsIndex);
+		}
+
+		void UpdateIndex(ref int index)
+		{
+			index++;
+			if (index == 4)
+				index = 0;
+		}
+
+		LayoutOptions GetLayoutOptions(int index)
+		{
+			switch (index)
+			{
+				default:
+				case 0:
+					return LayoutOptions.Start;
+				case 1:
+					return LayoutOptions.Center;
+				case 2:
+					return LayoutOptions.End;
+				case 3:
+					return LayoutOptions.Fill;
+			}
+		}
 	}
 
 	public class PickerData

diff --git a/src/Controls/src/Core/HandlerImpl/Picker/Picker.Windows.cs b/src/Controls/src/Core/HandlerImpl/Picker/Picker.Windows.cs
@@ -1,7 +1,18 @@
-namespace Microsoft.Maui.Controls
+using System;
+using Microsoft.Maui.Controls.Platform;
+
+namespace Microsoft.Maui.Controls
 {
 	public partial class Picker
 	{
+		public static void MapHorizontalOptions(IPickerHandler handler, Picker picker)
+		{
+			handler.PlatformView?.UpdateHorizontalOptions(picker);
+		}
 
+		public static void MapVerticalOptions(IPickerHandler handler, Picker picker)
+		{
+			handler.PlatformView?.UpdateVerticalOptions(picker);
+		}
 	}
 }
diff --git a/src/Controls/src/Core/HandlerImpl/Picker/Picker.cs b/src/Controls/src/Core/HandlerImpl/Picker/Picker.cs
@@ -7,6 +7,9 @@ public partial class Picker
 		{
 #if IOS
 			[PlatformConfiguration.iOSSpecific.Picker.UpdateModeProperty.PropertyName] = MapUpdateMode,
+#elif WINDOWS
+			[nameof(Picker.HorizontalOptions)] = MapHorizontalOptions,
+			[nameof(Picker.VerticalOptions)] = MapVerticalOptions,
 #endif
 			[nameof(Picker.ItemsSource)] = (handler, _) => handler.UpdateValue(nameof(IPicker.Items))
 		};

diff --git a/src/Controls/src/Core/Platform/Windows/Extensions/PickerExtensions.cs b/src/Controls/src/Core/Platform/Windows/Extensions/PickerExtensions.cs
@@ -0,0 +1,32 @@
+using System;
+using Microsoft.UI.Xaml;
+
+namespace Microsoft.Maui.Controls.Platform
+{
+	public static class PickerExtensions
+	{
+		public static void UpdateHorizontalOptions(this FrameworkElement platformView, View view)
+		{
+			platformView.HorizontalAlignment = view.HorizontalOptions.Alignment switch
+			{
+				LayoutAlignment.Start => HorizontalAlignment.Left,
+				LayoutAlignment.Center => HorizontalAlignment.Center,
+				LayoutAlignment.End => HorizontalAlignment.Right,
+				LayoutAlignment.Fill => HorizontalAlignment.Stretch,
+				_ => throw new ArgumentOutOfRangeException()
+			};
+		}
+
+		public static void UpdateVerticalOptions(this FrameworkElement platformView, View view)
+		{
+			platformView.VerticalAlignment = view.VerticalOptions.Alignment switch
+			{
+				LayoutAlignment.Start => VerticalAlignment.Top,
+				LayoutAlignment.Center => VerticalAlignment.Center,
+				LayoutAlignment.End => VerticalAlignment.Bottom,
+				LayoutAlignment.Fill => VerticalAlignment.Stretch,
+				_ => throw new ArgumentOutOfRangeException()
+			};
+		}
+	}
+}
diff --git a/src/Controls/src/Core/PublicAPI/net-windows/PublicAPI.Unshipped.txt b/src/Controls/src/Core/PublicAPI/net-windows/PublicAPI.Unshipped.txt
@@ -1,6 +1,7 @@
 #nullable enable
 *REMOVED*override Microsoft.Maui.Controls.RefreshView.MeasureOverride(double widthConstraint, double heightConstraint) -> Microsoft.Maui.Graphics.Size
 Microsoft.Maui.Controls.LayoutOptions.Equals(Microsoft.Maui.Controls.LayoutOptions other) -> bool
+Microsoft.Maui.Controls.Platform.PickerExtensions
 Microsoft.Maui.Controls.Region.Equals(Microsoft.Maui.Controls.Region other) -> bool
 Microsoft.Maui.Controls.Shapes.Matrix.Equals(Microsoft.Maui.Controls.Shapes.Matrix other) -> bool
 Microsoft.Maui.Controls.VisualElement.~VisualElement() -> void
@@ -9,6 +10,10 @@ override Microsoft.Maui.Controls.Region.GetHashCode() -> int
 override Microsoft.Maui.Controls.Shapes.Matrix.GetHashCode() -> int
 static Microsoft.Maui.Controls.LayoutOptions.operator !=(Microsoft.Maui.Controls.LayoutOptions left, Microsoft.Maui.Controls.LayoutOptions right) -> bool
 static Microsoft.Maui.Controls.LayoutOptions.operator ==(Microsoft.Maui.Controls.LayoutOptions left, Microsoft.Maui.Controls.LayoutOptions right) -> bool
+static Microsoft.Maui.Controls.Picker.MapHorizontalOptions(Microsoft.Maui.Handlers.IPickerHandler! handler, Microsoft.Maui.Controls.Picker! picker) -> void
+static Microsoft.Maui.Controls.Picker.MapVerticalOptions(Microsoft.Maui.Handlers.IPickerHandler! handler, Microsoft.Maui.Controls.Picker! picker) -> void
+static Microsoft.Maui.Controls.Platform.PickerExtensions.UpdateHorizontalOptions(this Microsoft.UI.Xaml.FrameworkElement! platformView, Microsoft.Maui.Controls.View! view) -> void
+static Microsoft.Maui.Controls.Platform.PickerExtensions.UpdateVerticalOptions(this Microsoft.UI.Xaml.FrameworkElement! platformView, Microsoft.Maui.Controls.View! view) -> void
 static Microsoft.Maui.Controls.Region.operator !=(Microsoft.Maui.Controls.Region left, Microsoft.Maui.Controls.Region right) -> bool
 static Microsoft.Maui.Controls.Region.operator ==(Microsoft.Maui.Controls.Region left, Microsoft.Maui.Controls.Region right) -> bool
 static Microsoft.Maui.Controls.Shapes.Matrix.operator !=(Microsoft.Maui.Controls.Shapes.Matrix left, Microsoft.Maui.Controls.Shapes.Matrix right) -> bool

diff --git a/src/Controls/tests/DeviceTests/Elements/Picker/PickerTests.Windows.cs b/src/Controls/tests/DeviceTests/Elements/Picker/PickerTests.Windows.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Collections.ObjectModel;
 using System.Threading.Tasks;
 using Microsoft.Maui.Controls;
 using Microsoft.Maui.Graphics;
@@ -12,6 +13,48 @@ namespace Microsoft.Maui.DeviceTests
 {
 	public partial class PickerTests : ControlsHandlerTestBase
 	{
+		[Fact(DisplayName = "HorizontalOptions Initializes Correctly")]
+		public async Task HorizontalOptionsInitializesCorrectly()
+		{
+			var items = new ObservableCollection<string>()
+			{
+				"Item 1",
+				"Item 2"
+			};
+
+			Picker picker = new Picker()
+			{
+				HorizontalOptions = LayoutOptions.End,
+				ItemsSource = items,
+				SelectedIndex = 0
+			};
+
+			var handler = await CreateHandlerAsync<PickerHandler>(picker);
+
+			Assert.Equal(UI.Xaml.HorizontalAlignment.Right, GetPlatformHorizontalOptions(handler.PlatformView));
+		}
+
+		[Fact(DisplayName = "VerticalOptions Initializes Correctly")]
+		public async Task VerticalOptionsInitializesCorrectly()
+		{
+			var items = new ObservableCollection<string>()
+			{
+				"Item 1",
+				"Item 2"
+			};
+
+			Picker picker = new Picker()
+			{
+				VerticalOptions = LayoutOptions.End,
+				ItemsSource = items,
+				SelectedIndex = 0
+			};
+
+			var handler = await CreateHandlerAsync<PickerHandler>(picker);
+
+			Assert.Equal(UI.Xaml.VerticalAlignment.Bottom, GetPlatformVerticalOptions(handler.PlatformView));
+		}
+
 		protected Task<string> GetPlatformControlText(ComboBox platformView)
 		{
 			return InvokeOnMainThreadAsync(() =>
@@ -28,5 +71,15 @@ protected Task<string> GetPlatformControlText(ComboBox platformView)
 				return platformView.SelectedItem?.ToString();
 			});
 		}
+
+		UI.Xaml.HorizontalAlignment GetPlatformHorizontalOptions(ComboBox platformView)
+		{
+			return platformView.HorizontalAlignment;
+		}
+
+		UI.Xaml.VerticalAlignment GetPlatformVerticalOptions(ComboBox platformView)
+		{
+			return platformView.VerticalAlignment;
+		}
 	}
 }