I am trying to change the color of a toolbar in a Xamarin.Forms application. I used this to change the color:
MainPage = new NavigationPage(new StartPage())
{
BarBackgroundColor = Color.FromHex("#15315A"),
BarTextColor = Color.FromHex("#F3F9F5")
};
This works successfully on iOS, but on Android the Toolbar is just white. I tried to change the styles colors, and defined a Toolbar.axml with no luck either. I posted the pictures below of what I am seeing. Anyone know what I could be doing wrong?
There was a fairly good answer on this post on the xamarin developer forums. Basically there's a couple of options to get this to work, these are:
An Appearance which works globally.
Or using a custom renderer.
[assembly: ExportRenderer(typeof(TabbedPage), typeof(TabbedPageCustom))]
namespace MobileCRM.iOS
{
public class TabbedPageCustom : TabbedRenderer
{
public TabbedPageCustom ()
{
TabBar.TintColor = MonoTouch.UIKit.UIColor.Black;
TabBar.BarTintColor = MonoTouch.UIKit.UIColor.Blue;
TabBar.BackgroundColor = MonoTouch.UIKit.UIColor.Green;
}
}
}
Related
I'm trying to make a Flyout page (previously MasterDetailPage) take up a 1/3 of the screen for the Flyout and 2/3 for Detail.
I was able to accomplish this on iOS by using a custom renderer that's a modification of the Xamarin.Form's Flyout implementation
But there isn't any such implementation for Android and I can't figure out how to accomplish this.
Anyone know how to do this?
You could use custom renderer to do that.
The renderer of FlyoutPage in Android is FlyoutPageRenderer. The following link lists the renderer and native control classes that implement each Xamarin.Forms Page type:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/renderers
The source code of FlyoutPageRenderer:
https://github.com/xamarin/Xamarin.Forms/blob/5.0.0/Xamarin.Forms.Platform.Android/AppCompat/FlyoutPageRenderer.cs
You could get the field _flyoutLayout in source code. Then, you could set the height and width like the code below.
[assembly: ExportRenderer(typeof(FlyoutPage), typeof(FlyoutPageCustomRenderer))]
namespace App14.Droid
{
class FlyoutPageCustomRenderer: FlyoutPageRenderer
{
public FlyoutPageCustomRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(VisualElement oldElement, VisualElement newElement)
{
base.OnElementChanged(oldElement, newElement);
var fieldInfo = GetType().BaseType.GetField("_flyoutLayout", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic);
var _flyoutLayou = (ViewGroup)fieldInfo.GetValue(this);
var lp = new LayoutParams(_flyoutLayou.LayoutParameters);
lp.Width = 400;
lp.Height = 600;
lp.Gravity = (int)GravityFlags.Left;
_flyoutLayou.LayoutParameters = lp;
}
}
}
For better effect, i set the background color to pink. The background color is set in flyout menu page.
If you wanna more information about the FlyoutPage, you could refer to the MS docs.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage
To change the TitleBarTextColor so far I tried a lot and my code now does change the back button color and the area on the very top of the screen, but the title!
in my AppDelegate FinishedLaunching function (it's after Forms.Init() and before LoadApplication()):
UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes
{
TextColor = UIColor.White
});
In my ViewModel:
(App.Current.MainPage as NavigationPage).BarBackgroundColor = Color.FromHex("#990000");
(App.Current.MainPage as NavigationPage).BarTextColor = Color.White;
And this is how I'm navigating between the pages (not all the pages):
await _navigationService.NavigateAsync(new Uri("http://wwww.x.com/NavigationPage/TabbedNavigationPage?selectedTab=XPage/Document", UriKind.Absolute));
I even try to call the ViewModel code after the Prism navigation but it doesn't work... I'm a beginner and don't fully comprehend Prism and or Xamarin Forms.
[EDIT] -> I also tried to create a new class and inherit it from NavigationPage, set the BarTextColor in its constructor and use that class in the navigation like this: await _navigationService.NavigateAsync(new Uri("http://wwww.x.com/NEWCLASSCREATED/TabbedNavigationPage?selectedTab=XPage/Document", UriKind.Absolute)); But, as you may know, it is still not working.
Here's a Image ;)
imageToSeeThatImNotLying
Thank you for your support!
So I finnaly managed to work this out...
What I had to do was to create a custom Content Page because all the other solutions wasn't working. So I created this custom renderer only in my iOS project:
[assembly: ExportRenderer(typeof(ContentPage), typeof(CustomContentPageRenderer))]
namespace TestProject.iOS.Bll.Utils.Renderers
{
public class CustomContentPageRenderer : PageRenderer
{
public override void DidMoveToParentViewController(UIViewController parent)
{
base.WillMoveToParentViewController(parent);
var titleView = new UITextView();
var page = this.Element as ContentPage;
try
{
if (!string.IsNullOrEmpty(page.Title))
{
titleView.Text = page.Title;
titleView.TextColor = UIColor.White;
titleView.Font = UIFont.SystemFontOfSize(17, UIFontWeight.Regular);
var bgColor = page.BackgroundColor;
titleView.BackgroundColor = UIColor.FromRGBA((int)bgColor.R, (int)bgColor.G, (int)bgColor.B, 0);
parent.NavigationItem.TitleView = titleView;
parent.NavigationItem.TitleView.ContentMode = UIViewContentMode.ScaleAspectFit;
}
}
catch (Exception e)
{
}
}
}
}
And I also removed all the code that I puted before in my AppDelegate file and in the App.xaml.cs file as well. I left the codes from the ViewModels because it was changing the back button to white, and I deleted the new NagivationPage class that I created before.
I'm going to explain why I did some of the things that you saw there:
To change the Title I created a UITextView() and set it to my NavigationItem.TitleView of the parent page. I set titleView.Text = page.Title; because my original page already have a title, so I'm just reusing it. And the backgroundcolor I had to do all of that so the backgroundcolor property works just in the way that I wanted.
And this DidMoveToParentViewController function was just so it can do all that before NavigationAsync from Prism.
Trying out the new PlatformConfiguration in Xamarin.Forms 2.3.3.166-pre4 but moving the Toolbar to the bottom on UWP just doesn't want to work. What am I doing wrong?
using Xamarin.Forms;
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.WindowsSpecific;
namespace FormsToolBarDemo
{
public partial class MainPage:ContentPage
{
public MainPage()
{
InitializeComponent();
this.On<Windows>().SetToolbarPlacement(ToolbarPlacement.Bottom);
}
}
}
Alright, after trying every possible combination of SetToolbarPlacement(ToolbarPlacement.Bottom), I found out a few things:
Toolbar Placement can only be set application wide, not per page
Toolbar Placement can only be set on a NavigationPage
So what you can do, when you want to place the toolbar at the bottom, you can set it application wide by attaching the Toolbar Placement to the App classes MainPage property.
public App()
{
MainPage = new NavigationPage(new MainPage());
MainPage.On<Windows>().SetToolbarPlacement(ToolbarPlacement.Bottom);
}
Is it possible to truncate long texts with ellipsis in a picker control. I have already created a custom renderer to set a fontsize and no border in order to achieve the following result.
Also tried to set Control.Ellipsize = TextUtils.TruncateAt.End; but nothing happens
[assembly: ExportRenderer(typeof(NoBorderPicker), typeof(CustomPicker))]
namespace Prj.Droid.Renderers
{
public class CustomPicker : PickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
if (Control != null)
{
var customBG = new GradientDrawable();
customBG.SetColor(Android.Graphics.Color.Transparent);
customBG.SetCornerRadius(3);
Control.SetBackground(customBG);
Control.Ellipsize = TextUtils.TruncateAt.End;
var custdatepicker = (NoBorderPicker) this.Element;
this.Control.TextSize = (float)custdatepicker.FontSize;
}
}
}
}
Now, I could be sure that Control.SetSingleLine(true); will work.
if you are using a custom renderer can be the incorret inheritance.
Use Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer not Xamarin.Forms.Platform.Android.PickerRenderer
Tks to https://www.damirscorner.com/blog/posts/20201204-CustomPickerRendererOnAndroid.html
Oddly enough, for me in the latest Xamarin Forms, on Android the Picker automatically truncates text, but on iOS the Picker becomes arbitrarily wide, covering up other UI elements.
The fix is to set the MinimumWidthRequest = 1, which for some reason re-enables text truncation. I have no idea why. Welcome to Xamarin.
Wanting to achieve a consistent look for my Xamarin Forms app, I need to know how to change the font for the tabbed page tab bar icons. Using UITabBarItem.Appearance as the iOS API would suggest does not appear to have any effect. What's necessary to do this?
U need to write a custom renderer like this one , take a clue from below code ! it has what u r seeking
[assembly: ExportRenderer(typeof(ExtendedTabbedPage), typeof(TabbedPageCustom))]
namespace App.iOS
{
public class TabbedPageCustom : TabbedRenderer
{
public TabbedPageCustom ()
{
TabBar.TintColor = UIKit.UIColor.White;
TabBar.BarTintColor = UIKit.UIColor.White;
TabBar.BackgroundColor = UIKit.UIColor.Red;
}
protected override void OnElementChanged (VisualElementChangedEventArgs e)
{
base.OnElementChanged (e);
// Set Text Font for unselected tab states
UITextAttributes normalTextAttributes = new UITextAttributes();
normalTextAttributes.Font = UIFont.FromName("ChalkboardSE-Light", 20.0F); // unselected
normalTextAttributes.TextColor = UIKit.UIColor.Blue;
UITabBarItem.Appearance.SetTitleTextAttributes(normalTextAttributes, UIControlState.Normal);
}
public override UIViewController SelectedViewController {
get {
UITextAttributes selectedTextAttributes = new UITextAttributes();
selectedTextAttributes.Font = UIFont.FromName("ChalkboardSE-Bold", 20.0F); // SELECTED
if (base.SelectedViewController != null)
{
base.SelectedViewController.TabBarItem.SetTitleTextAttributes(selectedTextAttributes, UIControlState.Normal);
}
return base.SelectedViewController;
}
set {
base.SelectedViewController = value;
foreach (UIViewController viewController in base.ViewControllers)
{
UITextAttributes normalTextAttributes = new UITextAttributes();
normalTextAttributes.Font = UIFont.FromName("ChalkboardSE-Light", 20.0F); // unselected
normalTextAttributes.TextColor = UIKit.UIColor.Blue;
viewController.TabBarItem.SetTitleTextAttributes(normalTextAttributes, UIControlState.Normal);
}
}
}
}
}
This was a particularly interesting problem. I tried:
UITabBarItem.Appearance
Using the UITabBarItem.Appearance.SetTitleTextAttributes method to update the UITextAttribute to my font (size 9.0f) for UIControlState.Normal. This didn't appear to make any difference.
UINavigationBar.Appearance
I found out that setting UINavigationBar.Appearance.SetTitleTextAttributes would update both the UINavigationBar text appearance as well as the UITabBarItem text appearance.
Which was a problem because the tabbed page item font size was far too large.
Customizing the TabbedRenderer
Inspired by a sample I saw somewhere, I subclassed TabbedRenderer in the iOS project.
I tried overriding the settor for TabbedRenderer.SelectedViewController property and loop through the ViewControllers property to set their items. The icons would display with the standard font, but once the user changed the tab they would all update to the desired font. Almost there!
I then tried overriding AddChildViewController and updating that controller's TabBarItem after it was added which ended up having no effect. The TabBarItem for the added page was being updated at some point after the controller was added.
Eventually I found out that overriding ViewWillAppear and setting the appearance for all the tab bar items at that time seemed to do the job I desired.
I've included a sample in this gist.