Merge pull request #6844 from Youssef1313/issues/6732

fix: Apply icon color correctly inside native AppBarButton
unoplatform · Aug 31, 2021 · 4a85f10 · 4a85f10
2 parents 365da6b + 4ef278b
commit 4a85f10
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 5 deletions.
diff --git a/...App.UITests/Windows_UI_Xaml_Controls/CommandBarTests/UnoSamples_Tests.NativeCommandBar.cs b/...App.UITests/Windows_UI_Xaml_Controls/CommandBarTests/UnoSamples_Tests.NativeCommandBar.cs
@@ -30,6 +30,28 @@ public void NativeCommandBar_Automated()
 			_app.WaitForText(result, "Clicked!");
 		}
 
+		[Test]
+		[AutoRetry]
+		[ActivePlatforms(Platform.Android)] // Disabled on Wasm as there is no native command bar. Enabling for iOS tracked by https://github.com/unoplatform/uno/issues/6732
+		public void When_Foreground_Is_Set()
+		{
+			Run("UITests.Windows_UI_Xaml_Controls.CommandBar.CommandBar_Native_With_AppBarButton_With_Foreground");
+			using var screenshot = TakeScreenshot("CommandBar_Native_With_AppBarButton_With_Foreground.When_Foreground_Is_Set");
+			var rect = _app.Query("MyCommandBar").Single().Rect;
+
+			// Couldn't find a way to get the pixel at the center of the icon. Using this hacky approach:
+			var bitmap = screenshot.GetBitmap();
+			for (int x = (int)rect.Right; x > rect.CenterX; x--)
+			{
+				if (bitmap.GetPixel(x, (int)rect.CenterY) is { A: 255, R: 255, G: 0, B: 0 })
+				{
+					return;
+				}
+			}
+
+			Assert.Fail("Expected a red pixel.");
+		}
+
 		[Test]
 		[AutoRetry]
 		public async Task NativeCommandBar_Size()
@@ -58,7 +80,7 @@ async Task ToggleOrientation()
 
 				currentModeIsLandscape = !currentModeIsLandscape;
 
-				_app.WaitFor(()=> GetIsCurrentRotationLandscape(rootElementName) == currentModeIsLandscape);
+				_app.WaitFor(() => GetIsCurrentRotationLandscape(rootElementName) == currentModeIsLandscape);
 
 				await Task.Delay(125); // A delay ia required after rotation for the test to succeed
 			}
@@ -77,7 +99,7 @@ async Task ToggleOrientation()
 				var x1 = firstCommandBarPhysicalRect.X + (firstCommandBarPhysicalRect.Width * 0.75f);
 				ImageAssert.HasColorAt(firstScreenShot, x1, firstCommandBarPhysicalRect.Bottom - 1, Color.Red);
 
-				if(!supportsRotation)
+				if (!supportsRotation)
 				{
 					return; // We're on a platform not supporting rotations.
 				}

diff --git a/src/SamplesApp/UITests.Shared/UITests.Shared.projitems b/src/SamplesApp/UITests.Shared/UITests.Shared.projitems
@@ -1125,6 +1125,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\CommandBar\CommandBar_Native_With_AppBarButton_With_Foreground.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\CommandBar\CommandBar_Native_With_Content.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -5023,6 +5027,9 @@
     <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\CommandBar\CommandBar_Native_Frame.xaml.cs">
       <DependentUpon>CommandBar_Native_Frame.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\CommandBar\CommandBar_Native_With_AppBarButton_With_Foreground.xaml.cs">
+      <DependentUpon>CommandBar_Native_With_AppBarButton_With_Foreground.xaml</DependentUpon>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\CommandBar\CommandBar_Native_With_Content.xaml.cs">
       <DependentUpon>CommandBar_Native_With_Content.xaml</DependentUpon>
     </Compile>

diff --git a/...dows_UI_Xaml_Controls/CommandBar/CommandBar_Native_With_AppBarButton_With_Foreground.xaml b/...dows_UI_Xaml_Controls/CommandBar/CommandBar_Native_With_AppBarButton_With_Foreground.xaml
@@ -0,0 +1,47 @@
+<Page
+    x:Class="UITests.Windows_UI_Xaml_Controls.CommandBar.CommandBar_Native_With_AppBarButton_With_Foreground"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:UITests.Windows_UI_Xaml_Controls.CommandBar"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d xamarin ios android"
+    xmlns:xamarin="http://nventive.com/xamarin"
+    xmlns:ios="http://nventive.com/ios"
+    xmlns:android="http://nventive.com/android"
+
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+	<Page.Resources>
+		<Style x:Name="NativeCommandbarStyle"
+               TargetType="CommandBar" 
+               xamarin:BasedOn="{StaticResource NativeDefaultCommandBar}"/>
+	</Page.Resources>
+
+	<Grid>
+
+		<android:CommandBar x:Name="MyCommandBar"
+							Style="{StaticResource NativeCommandbarStyle}"
+							Background="Gray">
+			<CommandBar.PrimaryCommands>
+				<AppBarButton Content="Hello">
+					<AppBarButton.Icon>
+						<BitmapIcon x:Name="MyIcon" UriSource="ms-appx:///Assets/Icons/star_full.png" Foreground="Red"/>
+					</AppBarButton.Icon>
+				</AppBarButton>
+			</CommandBar.PrimaryCommands>
+		</android:CommandBar>
+
+		<ios:CommandBar x:Name="MyCommandBar"
+							Style="{StaticResource NativeCommandbarStyle}"
+							Background="Gray">
+			<CommandBar.PrimaryCommands>
+				<AppBarButton Content="Hello">
+					<AppBarButton.Icon>
+						<BitmapIcon x:Name="MyIcon" UriSource="ms-appx:///Assets/Icons/star_full.png" Foreground="Red"/>
+					</AppBarButton.Icon>
+				</AppBarButton>
+			</CommandBar.PrimaryCommands>
+		</ios:CommandBar>
+	</Grid>
+</Page>
diff --git a/...s_UI_Xaml_Controls/CommandBar/CommandBar_Native_With_AppBarButton_With_Foreground.xaml.cs b/...s_UI_Xaml_Controls/CommandBar/CommandBar_Native_With_AppBarButton_With_Foreground.xaml.cs
@@ -0,0 +1,29 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Uno.UI.Samples.Controls;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace UITests.Windows_UI_Xaml_Controls.CommandBar
+{
+	[Sample]
+	public sealed partial class CommandBar_Native_With_AppBarButton_With_Foreground : Page
+	{
+		public CommandBar_Native_With_AppBarButton_With_Foreground()
+		{
+			this.InitializeComponent();
+		}
+	}
+}
diff --git a/src/Uno.UI/Controls/AppBarButtonRenderer.Android.cs b/src/Uno.UI/Controls/AppBarButtonRenderer.Android.cs
@@ -152,14 +152,14 @@ protected override void Render()
 			native.SetVisible(element.Visibility == Visibility.Visible);
 
 			// Foreground
-			var foreground = element.Foreground as SolidColorBrush;
-			var foregroundColor = foreground?.Color;
+			var foreground = (element.Icon?.Foreground) as SolidColorBrush;
+
 			var foregroundOpacity = foreground?.Opacity ?? 0;
 			if (native.Icon != null)
 			{
 				if (foreground != null)
 				{
-					DrawableCompat.SetTint(native.Icon, (Android.Graphics.Color)foregroundColor);
+					DrawableCompat.SetTint(native.Icon, (Android.Graphics.Color)foreground.Color);
 				}
 				else
 				{