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; } }
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.
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.
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:
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
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.
@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:
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
{
}
`
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>
`
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;
`
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:
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.
@Bernarden
I got this working.
You need the following your App.xaml in UWP.
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:
And last but not least, the method which is behind the DelegateCommand:
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:
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
NavigationPage
as 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
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.