From 11f229e0cdae7bcce8718f42f97844d2dd551baf Mon Sep 17 00:00:00 2001 From: David Britch Date: Tue, 24 Oct 2023 13:17:13 +0100 Subject: [PATCH 1/2] Shell tab color appearance. --- docs/fundamentals/shell/tabs.md | 18 ++++++++++++++++++ docs/whats-new/dotnet-8.md | 1 + 2 files changed, 19 insertions(+) diff --git a/docs/fundamentals/shell/tabs.md b/docs/fundamentals/shell/tabs.md index 984e7b1238..9deaba6490 100644 --- a/docs/fundamentals/shell/tabs.md +++ b/docs/fundamentals/shell/tabs.md @@ -174,6 +174,24 @@ The class defines the following attached pr All of these properties are backed by objects, which means that the properties can be targets of data bindings, and styled. +::: moniker range=">=net-maui-8.0" + +The three properties that most influence the color of a tab are `TabBarForegroundColor`, `TabBarTitleColor`, and `TabBarUnselectedColor`: + +- If only the `TabBarTitleColor` property is set then its value will be used to color the title and icon of the selected tab. If `TabBarTitleColor` isn't set then the title color will match the value of the `TabBarForegroundColor` property. +- If the `TabBarForegroundColor` property is set and the `TabBarUnselectedColor` property isn't set then the value of the `TabBarForegroundColor` property will be used to color the title and icon of the selected tab. +- If only the `TabBarUnselectedColor` property is set then its value will be used to color the title and icon of the unselected tab. + +For example: + +- When the `TabBarTitleColor` property is set to `Green` the title and icon for the selected tab is green, and unselected tabs match system colors. +- When the `TabBarForegroundColor` property is set to `Blue` the title and icon for the selected tab is blue, and unselected tabs match system colors. +- When the `TabBarTitleColor` property is set to `Green` and the `TabBarForegroundColor` property is set to `Blue` the title is green and the icon is blue for the selected tab, and unselected tabs match system colors. +- When the `TabBarTitleColor` property is set to `Green` and the `Shell.ForegroundColor` property is set to `Blue` the title is green and the icon is blue for the selected tab, and unselected tabs match system colors. This occurs because the `Shell.ForegroundColor` property value propagates to the `TabBarForegroundColor` property. +- When the `TabBarTitleColor` property is set to `Green`, the `TabBarForegroundColor` property is set to `Blue`, and the `TabBarUnselectedColor` property is set to `Red`, the title is green and the icon is blue for the selected tab, and unselected tab titles and icons are red. + +::: moniker-end + The following example shows a XAML style that sets different tab bar color properties: ```xaml diff --git a/docs/whats-new/dotnet-8.md b/docs/whats-new/dotnet-8.md index 05820e9338..f3e2a0fed3 100644 --- a/docs/whats-new/dotnet-8.md +++ b/docs/whats-new/dotnet-8.md @@ -58,6 +58,7 @@ The following behavior has changed from the previous release: - Use of the control from XAML now requires the following `xmlns` namespace declaration: `xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps"`. - Image caching is disabled on Android when loading an image from a stream with the [`ImageSource.FromStream`](xref:Microsoft.Maui.Controls.ImageSource.FromStream%2A) method. This is due to the lack of data from which to create a reasonable cache key. - On iOS, pages automatically scroll when the soft input keyboard would cover a text entry field, so that the field is above the soft input keyboard. The `KeyboardAutoManagerScroll.Disconnect` method, in the `Microsoft.Maui.Platform` namespace, can be called to disable this default behavior. The `KeyboardAutoManagerScroll.Connect` method can be called to re-enable the behavior after it's been disabled. +- How the color of a tab is set in a Shell app has changed on some platforms. For more information, see [Tab appearance](~/fundamentals/shell/tab.md#tab-appearance).