Forum› Xamarin.Forms
UWP ToolbarItem TextColor
MJoehl
USMember ✭✭
USMember ✭✭
Hi
I have a Xamarin.Forms app targeting iOS, Android and UWP. When I add some toolbaritems (secondary) and start the UWP on my Windows10 machine. The menu appears (when I cklick on the 3-dots-button), but the text is in white color.
This is because my ApplicationBar (with the title) has a blue background color and a white text.
I know, I can't change the color directly on the toolbaritem. But I thought about a renderer...
But how? Can anybody help me out?
My Renderer:
public class UwpBasePageRenderer : PageRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
{
base.OnElementChanged(e);
if (e.OldElement != null || Element == null) return;
Loaded += OnLoaded;
}
private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
{
var mypanel = ContainerElement as Panel;
// Something like this...
// mypanel.ApplicationBar.TextColor = Black;
}
}
Tagged:
0
Answers
Hi,
Do you try to change the TextColor / FontColor? If you do, did you find a solution?
@MJoehl @Emixam23 Did anyone of you find a solution?
Preferably in xaml, not code-behind...
@DerProgrammierer
You'll probably have more luck modifying the App theme in your App.xaml in the UWP project.
For example you can get rid of the ellipses likes this.
<Application x:Class="MyApp.UWP.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" RequestedTheme="Dark"> <Application.Resources> <!--Hide three dots on toolbar--> <Style x:Key="EllipsisButton" TargetType="Button"> <Setter Property="MaxWidth" Value="0"/> </Style> <!--Make toolbar truncate rather than wrap--> <Style x:Key="TitleTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}"> <Setter Property="FontWeight" Value="SemiLight"/> <Setter Property="FontSize" Value="24"/> <Setter Property="TextTrimming" Value="Clip"/> <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/> </Style>You can find the theme in the SDK
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic
Check out Generic.xaml. I'm not sure which resource you'd have to modify.
<!-- Default style for Windows.UI.Xaml.Controls.AppBar --> <Style TargetType="AppBar">Hi,
I'm not sure to get it right, because if I change the AppTheme color, then the TopBar (Where you see the batterie, the time etc) will be white too.. but I want to keep mine black (Dark)
Sounds like another similar problem I'm facing. My toolbar is in a dark blue, but when I navigate back with the standard-implemented back-button, it turns white and oddly repositions itself
@NMackay I tried your suggestion, but unfortunately it doesn't work. I'm using a TabbedPage, maybe "AppBar" is not the same?
App.xaml:
<Application x:Class="One.UWP.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:One.UWP" RequestedTheme="Light"> <Application.Resources> <Style x:Key="AppBarItemForegroundThemeBrush" TargetType="AppBar"> <Setter Property="Foreground" Value="White"/> </Style> </Application.Resources> </Application>However, if I change the RequestedTheme to "Dark", the title color is in a lighter color. Are we somehow able to see the code of Xamarin.Forms.Theme.Dark? Because then I could see which property is changing the title color.
@DerProgrammierer
Oh, it you want to modify the tabs in UWP you have to you have to modify PivotItem and PivotItemHeader. I just modified it slightly to take away the page padding when playing about with the styling. Appbar relates to the navigation toolbar
<Style TargetType="PivotItem"> <Setter Property="Background" Value="Transparent" /> <!--<Setter Property="Margin" Value="{ThemeResource PivotItemMargin}"/>--> <Setter Property="Margin" Value="0,0,0,0"/> <Setter Property="Padding" Value="0" /> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="VerticalContentAlignment" Value="Stretch" /> <Setter Property="IsTabStop" Value="False" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="PivotItem"> <Grid Background="White" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="Pivot"> <VisualState x:Name="Right" /> <VisualState x:Name="Left" /> <VisualState x:Name="Center" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="PivotHeaderItem"> <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" /> <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" /> <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" /> <Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" /> <Setter Property="Background" Value="White" /> <Setter Property="Foreground" Value="Black" /> <!-- original value {ThemeResource SystemControlForegroundBaseMediumBrush} --> <Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" /> <Setter Property="Height" Value="48" /> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="IsTabStop" Value="False" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="PivotHeaderItem"> <Grid x:Name="Grid" Background="{TemplateBinding Background}"> <Grid.Resources> <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter"> <Setter Property="FontFamily" Value="Segoe UI" /> <Setter Property="FontWeight" Value="SemiBold" /> <Setter Property="FontSize" Value="15" /> <Setter Property="TextWrapping" Value="Wrap" /> <Setter Property="LineStackingStrategy" Value="MaxHeight" /> <Setter Property="TextLineBounds" Value="Full" /> <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings" /> </Style> <Style x:Key="BodyContentPresenterStyle" TargetType="ContentPresenter" BasedOn="{StaticResource BaseContentPresenterStyle}"> <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" /> <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" /> <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" /> </Style> </Grid.Resources> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="SelectionStates"> <VisualStateGroup.Transitions> <VisualTransition From="Unselected" To="UnselectedLocked" GeneratedDuration="0:0:0.33" /> <VisualTransition From="UnselectedLocked" To="Unselected" GeneratedDuration="0:0:0.33" /> </VisualStateGroup.Transitions> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Unselected" /> <VisualState x:Name="UnselectedLocked"> <Storyboard> <DoubleAnimation Storyboard.TargetName="ContentPresenterTranslateTransform" Storyboard.TargetProperty="X" Duration="0" To="{ThemeResource PivotHeaderItemLockedTranslation}" /> <DoubleAnimation Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="0" /> </Storyboard> </VisualState> <VisualState x:Name="Selected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="White" /> <!-- original value {ThemeResource SystemControlHighlightAltBaseHighBrush} --> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="#C7CECA" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="UnselectedPointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedPointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="UnselectedPressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedPressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> <ContentPresenter.RenderTransform> <TranslateTransform x:Name="ContentPresenterTranslateTransform" /> </ContentPresenter.RenderTransform> </ContentPresenter> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>You can probably create a standard UWP project and load the solution in blend to play with these values. Can be a bit overwhelming unless your comfortable with styling WPF/UWP apps.
@NMackay Thank you, this is working! Now I only need to show different colors depending on mouseover, selected and unselected for PivotItemHeader, but that probably won't be possible without some code-behing...
EDIT: nvm, I see you did SelectedStates in your xaml. I will try this
@DerProgrammierer
Let me know how you get on, UWP is a bit of an unknown so the more knowledge we can share in the community the better.
If you want to disable the tabbed page swipe (can be useful if you have a map) when you can do this with a renderer.
using FooBar.CustomRenderers; using FooBar.UWP.Renderers; using Xamarin.Forms.Platform.UWP; [assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))] namespace FooBar.UWP.Renderers { public class CustomTabbedPageRenderer : TabbedPageRenderer { protected override void OnElementChanged(VisualElementChangedEventArgs e) { base.OnElementChanged(e); if (Control != null) Control.Loaded += Control_Loaded; if (e.OldElement == null) return; // Unhook when disposing control if (Control != null) Control.Loaded -= Control_Loaded; } private void Control_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e) { // Disable UWP swipe gesture on tabbled page if (Control.ItemsPanelRoot != null) Control.ItemsPanelRoot.ManipulationMode = Windows.UI.Xaml.Input.ManipulationModes.None; } } }@NMackay Yes, there are not many solutions for problems in the internet and still some bugs, which both feels very frustrating sometimes, especially since I'm not an expert in programming.
Big thanks to you for your code - I used it and removed all the parts which I didn't need. Here is my code which modifies the PivotHeaderItem color for these states: Selected, Unselected, UnselectedPointOver, SelectedPointOver, UnselectedPressed, SelectedPressed:
<Application.Resources> <Color x:Key="pivotHeaderItemSelected">White</Color> <Color x:Key="pivotHeaderItemUnselected">Gray</Color> <Color x:Key="pivotHeaderItemSelectedPointerOver">#35A9FF</Color> <Color x:Key="pivotHeaderItemUnselectedPointerOver">#35A9FF</Color> <Color x:Key="pivotHeaderItemSelectedPressed">#0060A8</Color> <Color x:Key="pivotHeaderItemUnselectedPressed">#0060A8</Color> <Style TargetType="PivotHeaderItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="PivotHeaderItem"> <Grid x:Name="Grid"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="SelectionStates"> <VisualState x:Name="Selected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource pivotHeaderItemSelected}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Unselected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource pivotHeaderItemUnselected}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="UnselectedPointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource pivotHeaderItemUnselectedPointerOver}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedPointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource pivotHeaderItemSelectedPointerOver}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="UnselectedPressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource pivotHeaderItemUnselectedPressed}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedPressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource pivotHeaderItemSelectedPressed}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> </ContentPresenter> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Application.Resources>That's the result:
And with PointOver:
I tried using your code, I put it between the tabs in the App.xaml file in my UWP project. But the tabs didn't change color, is there anything else I need to do?
Keep in mind that my code is for changing the visuals of a
TabbedPage. Which kind of bar are you using?If you are using an
AppBar, you should try NMackay's solution: http://forums.xamarin.com/discussion/comment/225819/#Comment_225819Maybe you could show us your code so that we can help you better?
I actually tried doing it using a custom renderer. I don't need the tabs to change color based on which is selected/pressed/etc., I just need them to be a different color (same with the text in the tab).
This following code appears to work, however when you press a tab, the background color reverts back to a lighter (however the text color remains the same...)
`
[assembly: ExportRenderer(typeof(TabbedPage), typeof(TabbedPageCustom))]
namespace Talkking.UWP.customrenderers
{
public class TabbedPageCustom : TabbedPageRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e) { base.OnElementChanged(e); if (Control != null) { string hexColor; byte a, r, g, b; hexColor = "#FF333333"; a = byte.Parse(hexColor.Substring(1, 2), NumberStyles.HexNumber); r = byte.Parse(hexColor.Substring(3, 2), NumberStyles.HexNumber); g = byte.Parse(hexColor.Substring(5, 2), NumberStyles.HexNumber); b = byte.Parse(hexColor.Substring(7, 2), NumberStyles.HexNumber); Control.ToolbarBackground = new SolidColorBrush(Windows.UI.Color.FromArgb(a, r, g, b)); Control.HeaderTemplate = GetStyledTitleTemplate(); } } private Windows.UI.Xaml.DataTemplate GetStyledTitleTemplate() { string dataTemplateXaml = @"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"" xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""> <TextBlock Text=""{Binding Title}"" FontFamily=""Segoe UI"" Foreground=""White"" FontSize=""16"" /> </DataTemplate>"; return (Windows.UI.Xaml.DataTemplate)XamlReader.Load(dataTemplateXaml); } }}
`
Now I have two problems. No matter what, the tab text does not change color.
And the background of the tabs changes color, but the tabs don't fill the entire screen horizontally, and the leftover space to the right of the last tab remains the default color. Heres my code...
`
<Application.Resources>
<Color x:Key="tabBackgroundColor">#333333</Color> <Color x:Key="tabTextColor">#FFFFFF</Color> <Style TargetType="PivotHeaderItem"> <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" /> <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" /> <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" /> <Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" /> <Setter Property="Background" Value="{StaticResource tabBackgroundColor}" /> <Setter Property="Foreground" Value="{StaticResource tabTextColor}" /> <!-- original value {ThemeResource SystemControlForegroundBaseMediumBrush} --> <Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" /> <Setter Property="Height" Value="48" /> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="IsTabStop" Value="False" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="PivotHeaderItem"> <Grid x:Name="Grid" Background="{TemplateBinding Background}"> <Grid.Resources> <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter"> <Setter Property="FontFamily" Value="Segoe UI" /> <Setter Property="FontWeight" Value="SemiBold" /> <Setter Property="FontSize" Value="15" /> <Setter Property="TextWrapping" Value="Wrap" /> <Setter Property="LineStackingStrategy" Value="MaxHeight" /> <Setter Property="TextLineBounds" Value="Full" /> <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings" /> </Style> <Style x:Key="BodyContentPresenterStyle" TargetType="ContentPresenter" BasedOn="{StaticResource BaseContentPresenterStyle}"> <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" /> <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" /> <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" /> </Style> </Grid.Resources> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="SelectionStates"> <VisualStateGroup.Transitions> <VisualTransition From="Unselected" To="UnselectedLocked" GeneratedDuration="0:0:0.33" /> <VisualTransition From="UnselectedLocked" To="Unselected" GeneratedDuration="0:0:0.33" /> </VisualStateGroup.Transitions> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource tabTextColor}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Unselected" /> <VisualState x:Name="UnselectedLocked"> <Storyboard> <DoubleAnimation Storyboard.TargetName="ContentPresenterTranslateTransform" Storyboard.TargetProperty="X" Duration="0" To="{ThemeResource PivotHeaderItemLockedTranslation}" /> <DoubleAnimation Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="0" /> </Storyboard> </VisualState> <VisualState x:Name="Selected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource tabTextColor}" /> <!-- original value {ThemeResource SystemControlHighlightAltBaseHighBrush} --> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource tabBackgroundColor}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="UnselectedPointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource tabTextColor}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource tabBackgroundColor}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedPointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource tabTextColor}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource tabBackgroundColor}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="UnselectedPressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource tabTextColor}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource tabBackgroundColor}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedPressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource tabTextColor}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource tabBackgroundColor}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> <ContentPresenter.RenderTransform> <TranslateTransform x:Name="ContentPresenterTranslateTransform" /> </ContentPresenter.RenderTransform> </ContentPresenter> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Application.Resources>`
My temporary hack to fix this problem is this:
Control.PivotItemUnloading += Control_PivotItemUnloading; // temporary fix...private void Control_PivotItemUnloading(Windows.UI.Xaml.Controls.Pivot sender, Windows.UI.Xaml.Controls.PivotItemEventArgs args) { if (Control != null) Control.ToolbarBackground = new SolidColorBrush(Windows.UI.Color.FromArgb(a, r, g, b)); }Its not a fix though because each time you press a new tab, the empty area next to the tabs still changes back to the default color before the PivotItemUnloading event handler can revert it back to the color I want it to be.
Solved it, I had to dig around the TabbedPageRenderer.cs class in the Xamarin.Forms.Platform.UAP directory. Problem was here:
Whenver a new tab is pressed, this function is called:
`
void UpdateBarBackgroundColor()
{
if (Element == null) return;
var barBackgroundColor = Element.BarBackgroundColor;
if (barBackgroundColor == _barBackgroundColor) return; _barBackgroundColor = barBackgroundColor; var controlToolbarBackground = Control.ToolbarBackground; if (controlToolbarBackground == null && barBackgroundColor.IsDefault) return; var brush = GetBarBackgroundBrush(); if (brush == controlToolbarBackground) return; TitleProvider.BarBackgroundBrush = brush; foreach (WGrid tabBarGrid in Control.GetDescendantsByName<WGrid>(TabBarHeaderGridName)) { tabBarGrid.Background = brush; } }`
In there, the variable brush is received from GetBarBackgroundBrush():
Brush GetBarBackgroundBrush() { object defaultColor = Windows.UI.Xaml.Application.Current.Resources["SystemControlBackgroundChromeMediumLowBrush"]; if (Element.BarBackgroundColor.IsDefault && defaultColor != null) return (Brush)defaultColor; return Element.BarBackgroundColor.ToBrush(); }As you can , brush either returns with the default color, or the Tabbed Page's BarBackgroundColor property. Well the problem was I had only set the BarBackgroundColor property on the navigation page that encapsulates the TabbedPage. So I simply set the BarBackgroundColor property for the tabbed page as well, and now it returns the proper color instead of the default one.
So in other words, for those who want a simple custom renderer to change the tabbed color on UWP, here is my code:
Also Xamarin needs to fix how code is formatted on the forums, it always gets so sloppy if you post more than a few lines of code.
@Sme
Wrap your code in three ``` instead of one `
Hi @NMackay
This is related directly to the initial question.
I have looked through generic.xaml and then wrote the following code:
<Style TargetType="CommandBar"> <Setter Property="CommandBarOverflowPresenterStyle"> <Setter.Value> <Style TargetType="CommandBarOverflowPresenter"> <Style.Setters> <Setter Property="Background" Value="Purple"/> </Style.Setters> </Style> </Setter.Value> </Setter> </Style>It works in a native UWP app, but not in my Xamarin Forms app. I have also tried to override complete styles for AppBarButton, AppBar and CommandBar. No success there.
Any ideas?
P.S. I have also tried adding the following code you provided to get rid of the ellipsis button and it did work.
<Style x:Key="EllipsisButton" TargetType="Button"> <Setter Property="MaxWidth" Value="0"/> </Style>@Bernarden
I got this working.
You need the following your App.xaml in UWP.
<Application x:Class="Foobar.UWP.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Foobar.UWP" RequestedTheme="Dark"> <Application.Resources> <Style TargetType="AppBarButton"> <Setter Property="Background" Value="CornflowerBlue"/> <!-- ADDED --> <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> <Setter Property="FontWeight" Value="Normal"/> <Setter Property="Width" Value="68"/> <Setter Property="UseSystemFocusVisuals" Value="True" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="AppBarButton"> <Grid x:Name="Root" MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}" Background="{TemplateBinding Background}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="ApplicationViewStates"> <VisualState x:Name="FullSize"/> <VisualState x:Name="Compact"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Overflow"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="OverflowWithToggleButtons"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Margin"> <DiscreteObjectKeyFrame KeyTime="0" Value="38,0,12,0"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> <Storyboard> <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" /> </Storyboard> </VisualState> <VisualState x:Name="PointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> </ObjectAnimationUsingKeyFrames> <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" /> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> </ObjectAnimationUsingKeyFrames> <PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" /> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="InputModeStates"> <VisualState x:Name="InputModeDefault" /> <VisualState x:Name="TouchInputMode" > <VisualState.Setters> <Setter Target="OverflowTextLabel.Padding" Value="0,11,0,13" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <StackPanel x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeCompactHeight}"> <ContentPresenter x:Name="Content" Height="20" Margin="0,14,0,4" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" AutomationProperties.AccessibilityView="Raw"/> <TextBlock x:Name="TextLabel" Text="{TemplateBinding Label}" Foreground="DarkRed" FontSize="12" FontFamily="{TemplateBinding FontFamily}" TextAlignment="Center" TextWrapping="Wrap" Margin="0,0,0,6"/> </StackPanel> <TextBlock x:Name="OverflowTextLabel" Text="{TemplateBinding Label}" Foreground="{TemplateBinding Foreground}" FontSize="15" FontFamily="{TemplateBinding FontFamily}" TextAlignment="Left" TextTrimming="Clip" TextWrapping="NoWrap" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="12,0,12,0" Padding="0,5,0,7" Visibility="Collapsed"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Application.Resources> </Application>I changed the textblock foreground in ContentRoot of the control template. Seems to work okay. Just change the background to transparent or remove from the style if you don't want a button background.
@NMackay
That code does modify the primary buttons, but not the secondary ones.
For this app I wanted to use one secondary button.
Changing theme from Light to Dark does change the background color of the secondary buttons though.
Is there an actual way of changing the secondary buttons' background color?
@Bernarden
I think it's a bug, I was picking through the forms source and the secondary menu button is an AppBarButton but for some reason it doesn't respect the style. Whatever you do to the commandbar styling seems to be ignored. We'll probably just run with the default styling as it's too much grief to change it but it's maybe worth raising a bug about this. It's all a bit clunky and limited. I don't know if platform specifics will give any additional styling features for UWP
@Bernarden @Emixam23 Did you find a solution to change the secondary button's background color?
@NMackay There already is a confirmed bug listed on Bugzilla: https://bugzilla.xamarin.com/show_bug.cgi?id=44453
@DerProgrammierer
No, I didn't find a solution for this. Xamarin forms ignores all of the standard styling defined by generic.xaml for secondary buttons. You can change the theme (Light, Dark) but that's probably not what you are after.
@Bernarden Okay that's unfortunate. How did you solve your problem then? Did you just keep the light/dark style?
I've come up with a "workaround" in my mind which I am trying to build now. I will just add another primary ToolbarItem which pretends to show secondary/additional actions like this (following image is done in paint as a "prototype"
):
On the very top right, the 3 punctuation points are the icon for the button. When I click on this button, it calls DisplayActionSheet (as seen in the image above).
@DerProgrammierer
Might be fixed in a year or so, you never know!
I'm dying
I implemented what I've explained above and I want to provide the code here. While it's not an answer to the initial question on this thread, it is (in my opinion) a good workaround for UWP. Basically I'm adding a primary ToolbarItem which shows some available actions by calling DisplayActionSheet Method.
Adding the ToolbarItem:
<ToolbarItem Text="Weitere Aktionen" Name="weitere_aktionen" Order="Primary" Command="{Binding AdditionalActionsCommand}" Icon="ic_group_add.png"> </ToolbarItem>Creating the DelegateCommand:
public DelegateCommand _additionalActionsCommand; public DelegateCommand AdditionalActionsCommand { get { return _additionalActionsCommand; } set { SetProperty(ref _additionalActionsCommand, value); } } private void baseInit() { AdditionalActionsCommand = new DelegateCommand(AdditionalActionsAsync); }And last but not least, the method which is behind the DelegateCommand:
private async void AdditionalActionsAsync() { string chosen = await _dialogService.DisplayActionSheetAsync("Weitere Aktionen", AppResources.abbrechen, null, AppResources.verlauf_leeren, AppResources.informationen_einblenden); if (chosen == AppResources.verlauf_leeren) { DeleteMessages(); } else if (chosen == AppResources.informationen_einblenden) { ShowInformation(); } }The result looks like this when you click the ToolbarItem (note that I need a new Icon for this
):
FYI. You can assign commands to the DisplayActionSheet buttons so that you do not have to parse the result and do if statements.
http://prismlibrary.readthedocs.io/en/latest/Xamarin-Forms/4-Page-Dialog-Service/#displayactionsheetasync
Essentially all you need is something like this:
IActionSheetButton selectAAction = ActionSheetButton.CreateButton("Select A", new DelegateCommand(() => { Debug.WriteLine("Select A"); })); IActionSheetButton cancelAction = ActionSheetButton.CreateCancelButton("Cancel", new DelegateCommand(() => { Debug.WriteLine("Cancel"); })); IActionSheetButton destroyAction = ActionSheetButton.CreateDestroyButton("Destroy", new DelegateCommand(() => { Debug.WriteLine("Destroy"); })); void ShowActionSheet() { _pageDialogService.DisplayActionSheetAsync("My Action Sheet", selectAAction, cancelAction, destroyAction); }I found the solution for this. It's because my page didn't have a NavigationPage as parent. Seems like iOS and Android do this on their own, while in UWP I had to explicitly set the NavigationPage:
So I had this:
await _navigationService.NavigateAsync("ChatsTabletMDPage/OneNavigationPage/MessagePhonePage", animated: false);After adding my
NavigationPageas a parent to theMasterDetailPage, it worked:await _navigationService.NavigateAsync("OneNavigationPage/ChatsTabletMDPage/OneNavigationPage/MessagePhonePage", animated: false);@BryanHunterXam Sorry that I have to tag you like this, I just want to make a Xamarin member aware of this because I don't know if this is a known bug.
is there any fix for this? I cant figure out how to fix textcolor of Secondary buttons.
Actually there is another problem, I have Primary toolbar buttons like this
<ContentPage.ToolbarItems> <ToolbarItem x:Name="btnSearch" Icon="Search.png" Text="Search" Order="Primary" Command="{Binding SearchClick}"></ToolbarItem> </ContentPage.ToolbarItems>It is displayed as primary in full screen on Desktop
but if i reduce the size of the window, same button becomes secondary
Does anyone know why and how to prevent this is happening?
@batmaci Did you find a solution to changing the secondary buttons foreground/text color?
If i recall it correctly, it was related to titleview. do you use titleview? titleview messes up toolbaritems. here is the issue
https://github.com/xamarin/Xamarin.Forms/issues/5153
but if you are asking how to change the color, no that i didnt find. i think that you should create custom renderer.