I want the height of the NavigationBar, tried using CustomRenderer but always gets the same value whether it is Tablet, Android phone.
I am using the following code
namespace OfflineFieldService.Droid
{
public class CustomAndroidPageRenderer : PageRenderer
{
public CustomAndroidPageRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
{
base.OnElementChanged(e);
var height = 0;
var resources = Context.Resources;
int resourceId = resources.GetIdentifier("navigation_bar_height", "dimen", "android");
if (resourceId > 0)
{
height = resources.GetDimensionPixelSize(resourceId);
}
var scale = Resources.DisplayMetrics.Density;
var heightinUnits = (height - .5) / scale;
App.screenHeight = heightinUnits;
}
}```
[Attached image in the link, since dont have permission to embed][1]
[1]: https://i.stack.imgur.com/UosCb.png
In the image whatever marked in yellow, need to get the height of it. I am using Shell template.
Navigation Bar Height iOS
public class NavRendererForiOS : NavigationRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
var height = NavigationBar.Bounds.Height;
}
}
Nav Bar height android
public class NavRendererForAndroid : NavigationPageRenderer
{
public CustomNaviForAndroid(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
{
base.OnElementChanged(e);
var height = 0;
Resources resources = Context.Resources;
int resourceId = resources.GetIdentifier("navigation_bar_height", "dimen", "android");
if (resourceId > 0)
{
height = resources.GetDimensionPixelSize(resourceId);
}
}
}
Screen Size Android
App.ScreenHeight = (int) (Resources.DisplayMetrics.HeightPixels / Resources.DisplayMetrics.Density);
App.ScreenWidth = (int) (Resources.DisplayMetrics.WidthPixels / Resources.DisplayMetrics.Density);
Screen Size iOS
App.ScreenHeight = (int)UIScreen.MainScreen.Bounds.Height;
App.ScreenWidth = (int)UIScreen.MainScreen.Bounds.Width;
Related
I'm using Xamarin Forms 3.3, I want change height of ProgressBar. I execute it:
How to change height of progress bar in Xamarin Forms?
But I can't change height of ProgressBar. This is my code:
1) Class custom control ProgressBar:
public class ColorProgressBar : ProgressBar
{
public static BindableProperty BarColorProperty = BindableProperty.Create(
nameof(BarColor), typeof(Color), typeof(ColorProgressBar), default(Color));
public static BindableProperty ProgressTintColorProperty = BindableProperty.Create(
nameof(ProgressTintColor), typeof(Color), typeof(ColorProgressBar), default(Color));
public static BindableProperty TrackTintColorProperty = BindableProperty.Create(
nameof(TrackTintColor), typeof(Color), typeof(ColorProgressBar), default(Color));
public Color BarColor
{
get => (Color)GetValue(BarColorProperty);
set => SetValue(BarColorProperty, value);
}
public Color ProgressTintColor
{
get => (Color)GetValue(ProgressTintColorProperty);
set => SetValue(ProgressTintColorProperty, value);
}
public Color TrackTintColor
{
get => (Color)GetValue(TrackTintColorProperty);
set => SetValue(TrackTintColorProperty, value);
}
public float HeightOfProgressBar { get; set; }
}
2) For iOS:
public class ColorProgressBarRenderer : ProgressBarRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<ProgressBar> e)
=> iOS.Control.Logger.InvokeAction(() =>
{
base.OnElementChanged(e);
if (e.NewElement == null)
return;
if (Control != null)
{
UpdateBarColor();
}
});
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
=> iOS.Control.Logger.InvokeAction(() =>
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == ColorProgressBar.BarColorProperty.PropertyName)
{
UpdateBarColor();
}
});
private void UpdateBarColor() => iOS.Control.Logger.InvokeAction(() =>
{
var element = (ColorProgressBar) Element;
if (element == null)
return;
Control.TintColor = element.BarColor.ToUIColor();
Control.ProgressTintColor = element.ProgressTintColor.ToUIColor();
Control.TrackTintColor = element.TrackTintColor.ToUIColor();
});
public override void LayoutSubviews()
{
base.LayoutSubviews();
var element = (ColorProgressBar)Element;
if (element == null)
return;
var X = 1.0f;
var Y = element.HeightOfProgressBar > 0.0f ? element.HeightOfProgressBar : 1.0f;
var transform = CGAffineTransform.MakeScale(X, Y);
Transform = transform;
}
}
And At View .xaml:
<control:ColorProgressBar Grid.Row="1"
HeightOfProgressBar="8.0"
TrackTintColor="{x:Static color:BasePalette.DarkestColor}"
ProgressTintColor="{x:Static color:NeutralPalette.RedColor}"
Progress="{Binding PercentDataValue}">
</control:ColorProgressBar>
I test on device run iOS 12.0.
Thanks!
You missed a comment on the linked SO thread that said:
To get the iOS renderer to work I needed to change this.Transform = transform; to Control.Transform = transform;
So changing Transform = transform; in the LayoutSubviews method of the ColorProgressBarRenderer to Control.Transform = transform; makes your sample work as expected, i.e the height of the progress bar is changed:
public override void LayoutSubviews()
{
base.LayoutSubviews();
var element = (ColorProgressBar)Element;
if (element == null)
return;
var X = 1.0f;
var Y = element.HeightOfProgressBar > 0.0f ? element.HeightOfProgressBar : 1.0f;
var transform = CGAffineTransform.MakeScale(X, Y);
Control.Transform = transform; // <---- change here
}
I'm trying to use a Gradient Renderer for which I have written a class in PCL and written a renderer for both Android and iOS. Android renderer is working but iOS renderer is not showing the gradient colour at all.
I'm using this Gradient code from XLabs. I'm not sure what's broken. A hint in the right direction would help.
PCL Code:
using Xamarin.Forms;
namespace gradient
{
public enum GradientOrientation
{
Vertical,
Horizontal
}
public class GradientContentView : ContentView
{
public GradientOrientation Orientation
{
get { return (GradientOrientation)GetValue(OrientationProperty); }
set { SetValue(OrientationProperty, value); }
}
public static readonly BindableProperty OrientationProperty =
BindableProperty.Create<GradientContentView, GradientOrientation>(x => x.Orientation, GradientOrientation.Vertical, BindingMode.OneWay);
public Color StartColor
{
get { return (Color)GetValue(StartColorProperty); }
set { SetValue(StartColorProperty, value); }
}
public static readonly BindableProperty StartColorProperty =
BindableProperty.Create<GradientContentView, Color>(x => x.StartColor, Color.White, BindingMode.OneWay);
public Color EndColor
{
get { return (Color)GetValue(EndColorProperty); }
set { SetValue(EndColorProperty, value); }
}
public static readonly BindableProperty EndColorProperty =
BindableProperty.Create<GradientContentView, Color>(x => x.EndColor, Color.Black, BindingMode.OneWay);
}
}
iOS Renderer code:
using CoreAnimation;
using CoreGraphics;
using gradient;
using gradient.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(GradientContentView), typeof(GradientContentViewRenderer))]
namespace gradient.iOS
{
class GradientContentViewRenderer : VisualElementRenderer<ContentView>
{
private GradientContentView GradientContentView
{
get { return (GradientContentView)Element; }
}
protected CAGradientLayer GradientLayer { get; set; }
protected override void OnElementChanged(ElementChangedEventArgs<ContentView> e)
{
base.OnElementChanged(e);
if (GradientContentView != null &&
NativeView != null)
{
// Create a gradient layer and add it to the
// underlying UIView
GradientLayer = new CAGradientLayer();
GradientLayer.Frame = NativeView.Bounds;
GradientLayer.Colors = new CGColor[]
{
GradientContentView.StartColor.ToCGColor(),
GradientContentView.EndColor.ToCGColor()
};
SetOrientation();
NativeView.Layer.InsertSublayer(GradientLayer, 0);
}
}
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (GradientLayer != null && GradientContentView != null)
{
// Turn off Animations
CATransaction.Begin();
CATransaction.DisableActions = true;
if (e.PropertyName == GradientContentView.StartColorProperty.PropertyName)
GradientLayer.Colors[0] = GradientContentView.StartColor.ToCGColor();
if (e.PropertyName == GradientContentView.EndColorProperty.PropertyName)
GradientLayer.Colors[1] = GradientContentView.EndColor.ToCGColor();
if (e.PropertyName == VisualElement.WidthProperty.PropertyName ||
e.PropertyName == VisualElement.HeightProperty.PropertyName)
GradientLayer.Frame = NativeView.Bounds;
if (e.PropertyName == GradientContentView.OrientationProperty.PropertyName)
SetOrientation();
CATransaction.Commit();
}
}
void SetOrientation()
{
if (GradientContentView.Orientation == GradientOrientation.Horizontal)
{
GradientLayer.StartPoint = new CGPoint(0, 0.5);
GradientLayer.EndPoint = new CGPoint(1, 0.5);
}
else
{
GradientLayer.StartPoint = new CGPoint(0.5, 0);
GradientLayer.EndPoint = new CGPoint(0.5, 1);
}
}
}
}
This is my code for rendering a gradient background, i am not using orientation, but maybe it helps.
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
if (e.OldElement == null) // perform initial setup
{
ModernOrderCalendar page = e.NewElement as ModernOrderCalendar;
var gradientLayer = new CAGradientLayer();
gradientLayer.Name = "gradient";
CGRect rect = View.Bounds;
gradientLayer.Frame = rect;
gradientLayer.Colors = new CGColor[] { page.StartColor.ToCGColor(), page.EndColor.ToCGColor() };
View.Layer.InsertSublayer(gradientLayer, 0);
}
}
public override void ViewWillLayoutSubviews()
{
base.ViewWillLayoutSubviews();
if (Xamarin.Forms.Device.Idiom == TargetIdiom.Tablet)
{
var gradientLayer = View.Layer.Sublayers.FirstOrDefault(l => l.Name == "gradient");
gradientLayer.Frame = View.Bounds;
View.Layer.Sublayers[0] = gradientLayer;
CGRect frame = View.Bounds;
View.Bounds = frame;
}
}
The main difference I see is that you don't seem to be overriding the ViewWillLayoutSubviews method. I had the same issue, which caused the gradient layer to be created with no height and width during the creation of the window (at that point the View has not layouted, yet).
Therefore I adapt the gradientlayer width and height when layouting the subviews, because at that point width and height of the view are definitely known.
You must update the layer's size in VisualElementRenderer.LayoutSubviews:
public override void LayoutSubviews()
{
base.LayoutSubviews();
CATransaction.Begin();
CATransaction.DisableActions = true;
GradientLayer.Frame = NativeView.Bounds;
CATransaction.Commit();
}
I can change the font color like this:
var homePage = new NavigationPage(new HomePage())
{
Title = "Home",
Icon = "ionicons_2_0_1_home_outline_25.png",
BarTextColor = Color.Gray,
};
But is there a way to change the font for the Title. I would like to change it for the iOS and Android platforms only. Hoping that someone knows of custom renderer code that can help me to do this.
You need Custom Renderer , refer to this sample
iOS
[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(CustomNavigationPageRenderer))]
namespace CustomFontsNavigationPage.iOS.Renderers
{
public class CustomNavigationPageRenderer : NavigationRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
var att = new UITextAttributes();
UIFont customFont = UIFont.FromName("Trashtalk", 20);
UIFont systemFont = UIFont.SystemFontOfSize(20.0);
UIFont systemBoldFont = UIFont.SystemFontOfSize(20.0 , FontAttributes.Bold);
att.Font = font;
UINavigationBar.Appearance.SetTitleTextAttributes(att);
}
}
}
}
Android
[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(CustomNavigationPageRenderer))]
namespace CustomFontsNavigationPage.Droid.Renderers
{
public class CustomNavigationPageRenderer : NavigationPageRenderer
{
private Android.Support.V7.Widget.Toolbar _toolbar;
public override void OnViewAdded(Android.Views.View child)
{
base.OnViewAdded(child);
if (child.GetType() == typeof(Android.Support.V7.Widget.Toolbar))
{
_toolbar = (Android.Support.V7.Widget.Toolbar)child;
_toolbar.ChildViewAdded += Toolbar_ChildViewAdded;
}
}
protected override void Dispose(bool disposing)
{
base.Dispose(disposing);
if(disposing)
{
_toolbar.ChildViewAdded -= Toolbar_ChildViewAdded;
}
}
private void Toolbar_ChildViewAdded(object sender, ChildViewAddedEventArgs e)
{
var view = e.Child.GetType();
if (e.Child.GetType() == typeof(Android.Widget.TextView))
{
var textView = (Android.Widget.TextView)e.Child;
var spaceFont = Typeface.CreateFromAsset(Forms.Context.ApplicationContext.Assets, "Trashtalk.ttf");
var systemFont = Typeface.DEFAULT;
var systemBoldFont = Typeface.DEFAULT_BOLD;
textView.Typeface = spaceFont;
_toolbar.ChildViewAdded -= Toolbar_ChildViewAdded;
}
}
}
}
There is no need in a custom renderer on iOS, you can just use the Appearance API:
UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes
{
Font = UIFont.FromName("MyCoolFont", 20)
});
In Android you do need a renderer, however you should check against Android.Support.V7.Widget.AppCompatTextView and not Android.Widget.TextView.
Tested on Xamarin.Forms 3.4.0
I am trying to create a custom renderer so that a context menu is displayed when a user clicks a button. I have it working in Android and UWP but iOS is proving more difficult. When I click the button, everything runs with no errors but the UIMenuController is not displayed, although I cannot click the button again almost as though the view containing the button has overlaid the screen preventing access to the button. I've tried attaching the menu controller to the button, the ContextMenuView.
Here's the custom Xamarin Forms View -
public class ContextMenuView : View
{
public EventHandler MenuRequested;
public void RequestMenu(object sender)
{
if(MenuRequested != null)
{
MenuRequested(sender, EventArgs.Empty);
}
}
}
The ContextMenuView is instantiated from the click event of a button on Main.xaml. Main.xaml consists of an AbsoluteLayout that contains the button being clicked. Here's the click event of the button -
private void ContextMenuButton_Clicked(object sender, EventArgs e)
{
System.Diagnostics.Debug.WriteLine("Click");
var button = sender as Button;
if (_popupMenu == null)
{
_popupMenu = new ContextMenuView();
Rectangle menuPosition = new Rectangle { X = button.X, Y = button.Y, Width = 50, Height = 50 };
_popupMenu.Layout(((Button)sender).Bounds);
AbsLayout.Children.Add(_popupMenu, menuPosition);
_popupMenu.IsVisible = true;
}
else
{
Rectangle menuPosition = new Rectangle { X = button.X, Y = button.Y + button.Height, Width = 50, Height = 50 };
_popupMenu.Layout(((Button)sender).Bounds);
}
_popupMenu.RequestMenu(sender);
}
And the iOS renderer -
public class ContextMenuViewRendererIOS : ViewRenderer<ContextMenuView, UIView>
{
private UIView _nativeControl;
private ContextMenuView _xamarinControl;
private Xamarin.Forms.AbsoluteLayout _container;
private UIView _iosView;
private nfloat _height;
private nfloat _width;
protected override void OnElementChanged(ElementChangedEventArgs<ContextMenuView> e)
{
base.OnElementChanged(e);
if (Control == null)
{
if (e.NewElement != null)
{
_xamarinControl = e.NewElement;
_xamarinControl.MenuRequested += OnMenuRequested;
}
_height = UIScreen.MainScreen.Bounds.Height;
_width = UIScreen.MainScreen.Bounds.Width;
_nativeControl = new UIView(new CGRect(0, 0, _width, _height));
SetNativeControl(_nativeControl);
}
}
private void OnMenuRequested(object sender, EventArgs e)
{
try
{
var _menu = UIMenuController.SharedMenuController;
BecomeFirstResponder();
var iterm = new UIMenuItem("John", new ObjCRuntime.Selector("MenuItemAction:"));
_menu.MenuItems = new[] { iterm };
_menu.SetTargetRect(new CGRect(10, 10, 100, 100), _nativeControl);
_menu.MenuVisible = true;
}
catch (Exception ex)
{
throw;
}
}
[Export("MenuItemAction:")]
private void MenuItemAction(UIMenuController controller)
{
System.Diagnostics.Debug.WriteLine("MenuItemAction");
}
}
Thanks in advance.
The custom renderer needs to override CanBecomeFirstResponder and CanPerform(Selector action, NSObject withSender) and return true from both.
I am using Xamarin.Forms and I want to globally make the buttons look a little nicer.
I have achieved this just fine for the Android version using a custom renderer, but I am having trouble doing the same with iOS.
When defining buttons in my XAML pages, I reference "CustomButton" instead of "Button", and then I have the following CustomButtonRenderer in my iOS app.
Most of the style changes work just fine (border radius, etc), but I cannot seem to make it render a background gradient for the button.
Here is my code so far, but the background just displays as white. How can I make it display a gradient with the text on top?
class CustomButtonRenderer : ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (Control != null)
{
var gradient = new CAGradientLayer();
gradient.Frame = Control.Layer.Bounds;
gradient.Colors = new CGColor[]
{
UIColor.FromRGB(51, 102, 204).CGColor,
UIColor.FromRGB(51, 102, 204).CGColor
};
Control.Layer.AddSublayer(gradient);
Control.Layer.CornerRadius = 10;
Control.Layer.BorderColor = UIColor.FromRGB(51, 102, 204).CGColor;
Control.Layer.BorderWidth = 1;
Control.VerticalAlignment = UIControlContentVerticalAlignment.Center;
}
}
}
1st) Do not use AddSublayer, use InsertSublayerBelow so that the Z-order will be correct and your Title text will be on top.
2nd) Override LayoutSubviews and update your CAGradientLayer frame to match your UIButton.
3rd) Enjoy your gradient:
Complete Example:
[assembly: ExportRenderer(typeof(CustomButton), typeof(CustomButtonRenderer))]
namespace AppCompatRender.iOS
{
public class CustomButtonRenderer : Xamarin.Forms.Platform.iOS.ButtonRenderer
{
public override void LayoutSubviews()
{
foreach (var layer in Control?.Layer.Sublayers.Where(layer => layer is CAGradientLayer))
layer.Frame = Control.Bounds;
base.LayoutSubviews();
}
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (e.OldElement == null)
{
var gradient = new CAGradientLayer();
gradient.CornerRadius = Control.Layer.CornerRadius = 10;
gradient.Colors = new CGColor[]
{
UIColor.FromRGB(51, 102, 104).CGColor,
UIColor.FromRGB(51, 202, 204).CGColor
};
var layer = Control?.Layer.Sublayers.LastOrDefault();
Control?.Layer.InsertSublayerBelow(gradient, layer);
}
}
}
}
Update:
If you are using iOS 10+ with newer version of Xamarin.Forms, the Control.Bounds during calls to LayoutSubViews will all be zeros. You will need to set the gradient layer Frame size during sets to the control's Frame property, i.e.:
public class CustomButtonRenderer : Xamarin.Forms.Platform.iOS.ButtonRenderer
{
public override CGRect Frame
{
get
{
return base.Frame;
}
set
{
if (value.Width > 0 && value.Height > 0)
{
foreach (var layer in Control?.Layer.Sublayers.Where(layer => layer is CAGradientLayer))
layer.Frame = new CGRect(0, 0, value.Width, value.Height);
}
base.Frame = value;
}
}
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (e.OldElement == null)
{
var gradient = new CAGradientLayer();
gradient.CornerRadius = Control.Layer.CornerRadius = 20;
gradient.Colors = new CGColor[]
{
UIColor.FromRGB(51, 102, 104).CGColor,
UIColor.FromRGB(51, 202, 204).CGColor
};
var layer = Control?.Layer.Sublayers.LastOrDefault();
Control?.Layer.InsertSublayerBelow(gradient, layer);
}
}
}
In the moment that OnElementChanged is called, Control.Layer.Bounds is completely zero'd out. In your rendered you will need to add methods to update the Gradient's Frame to match the Control.Layer's frame.
Responding to the comment by Robert Cafazzo, I can help to slightly adjust this render so that it works correctly:
public class GdyBtnRendererIos : ButtonRenderer
{
#region Colors
static Color rosecolor = (Color)App.Current.Resources["ClrGeneralrose"];
static Color orangecolor = (Color)App.Current.Resources["ClrRoseOrange"];
CGColor roseCGcolor = rosecolor.ToCGColor();
CGColor orangeCGcolor = orangecolor.ToCGColor();
#endregion
CAGradientLayer gradient;
public override CGRect Frame
{
get => base.Frame;
set
{
if (value.Width > 0 && value.Height > 0)
{
if (Control?.Layer.Sublayers != null)
foreach (var layer in Control?.Layer.Sublayers.Where(layer => layer is CAGradientLayer))
layer.Frame = new CGRect(0, 0, value.Width, value.Height);
}
base.Frame = value;
}
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == "Renderer")
{
gradient.Frame = new CGRect(0, 0, Frame.Width, Frame.Height);
}
}
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (e.OldElement != null) return;
gradient = new CAGradientLayer
{
CornerRadius = Control.Layer.CornerRadius,
Colors = new CGColor[] { roseCGcolor, orangeCGcolor },
StartPoint = new CGPoint(0.1, 0.5),
EndPoint = new CGPoint(1.1, 0.5)
};
var layer = Control?.Layer.Sublayers.LastOrDefault();
Control?.Layer.InsertSublayerBelow(gradient, layer);
base.Draw(Frame);
}