I am trying to create a subclass of ImageButton called TintedImageButton that (surprise) can tint the image. I am following the basic structure of some TintedImage code I have found.
TintedImageButton has three renderers for iOS, Android and UWP.
The Android version of TintedImageButtonRenderer isn't working because it can't access the "Control" property of its superclass, ImageButtonRenderer. The Control should be the native widget.
I have been unable to locate the class documentation for ImageButtonRenderer but decompiling seems to indicate that the Control property has been made private for Android, but not for iOS. Does anyone know why this might be? How can I get the native widget so I can modify it?
The ImageButtonRenderer inherits from AppCompatImageButton, so the class myImageButtonRender itself is a native control which is a subclass of AppCompatImageButton.
[assembly: ExportRenderer(typeof(TintedImageButton), typeof(myImageButtonRender))]
namespace App261.Droid
{
class myImageButtonRender : ImageButtonRenderer
{
public myImageButtonRender(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ImageButton> e)
{
base.OnElementChanged(e);
this.SetImageResource(Resource.Drawable.sample);
AppCompatImageButton imagV = this as AppCompatImageButton;
}
}
}
Related
For the past 2 month I have been searching tirelessly for a way to implement a proper Page.Loaded event when using Xamarin.Forms but I couldn't implement or find a way to do it.
Most people suggest overriding Page.OnAppearing or adding an event handler for Page.Appearing both of which are not the answers or the proper way to achieve the desired effect and don't event behave as a real Page.Loaded event would.
I would like to know the following:
Why doesn't Xamarin.Forms have a built-in Page.Loaded event?
Is there's a work around?
Can I implement it from the native side?
Edit:
What I mean by "proper Page.Loaded" event is:
It must be called ONCE AND ONLY ONCE the page has loaded all of it's controls, laid them out, initialized them and rendered them for the first time.
It must NOT be called when returning from modal pages.
1.Why not load the data/controls in the constructor of the ContentPage? The constructor method is call only once and it is also called before Page.OnAppearing.
Can I implement it from the native side?
Yes, I think you can.
In iOS, override the ViewDidLoad method in custom renderer:
[assembly:ExportRenderer (typeof(ContentPage), typeof(MyPageRenderer))]
namespace App487.iOS
{
public class MyPageRenderer : PageRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
//call before ViewWillAppear and only called once
}
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
}
}
}
In Android, try to override the OnAttachedToWindow method:
[assembly: ExportRenderer(typeof(ContentPage), typeof(MyPageRenderer))]
namespace App487.Droid
{
public class MyPageRenderer : PageRenderer
{
public MyPageRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
{
base.OnElementChanged(e);
}
protected override void OnAttachedToWindow()
{
base.OnAttachedToWindow();
}
}
}
Currently Xamarin.Forms doesn't not provide a proper/complete life cycle events to fulfill all specific requirements, but things are improving, the Dev team is currently working on to address this issue, below mentioned issues and recent pull request on the official GitHub Repos (you may follow, get ideas and maybe implement it yourself before they even ship it), they will for sure provide that in the future, although it is not clear when it will be ready.
Specification: Enhancement Add better life cycle events #2210.
Issue: LifeCycle events for controls #556.
Pull request: Life cycle events for controls
GitHub Branch where currently working on.
MAUI repo (Next evolution of Xamarin) Cross-Platform LifeCycle.
Specification Add Loaded/Unloaded to VisualElement.
I have followed James Montemagno's guide on how to make a custom renderer for round images in my Xamarin Forms Shared Project.
https://blog.xamarin.com/elegant-circle-images-in-xamarin-forms/
(being a true copy of the guide it feels redundant to actually add the code itself to my project but please comment if that is not the case)
It is working flawless, however, I need to change the colour of the circle border dynamically with the press of a button when the app is running.
But since the colour of the circle is set natively in each renderer I am uncertain how I could possibly change it from my shared code.
Maybe this snippet can help:
public class CircleImage : Image
{
public static readonly BindableProperty CurvedBackgroundColorProperty =
BindableProperty.Create(
nameof(CurvedBackgroundColor),
typeof(Color),
typeof(CurvedCornersLabel),
Color.Default);
public Color CurvedBackgroundColor
{
get { return (Color)GetValue(CurvedBackgroundColorProperty); }
set { SetValue(CurvedBackgroundColorProperty, value); }
}
}
//Android/iOS
[assembly: ExportRenderer(typeof(CircleImage), typeof(CircleImageRenderer))]
namespace SchedulingTool.iOS.Renderers
{
public class CircleImageRenderer : ImageRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
var xfViewReference = (CircleImage)Element;
//Here you can reference xfViewReference.CurvedBackgroundColor to assign what ever is binded.
}
}
}
}
I hope you get the main idea, you can create your own bindable properties and access them on the Native Renderer.
If everything does not go as expected you can always download the NuGet (which has everything you need):
https://github.com/jamesmontemagno/ImageCirclePlugin
How do I enable iOS 11 prefersLargeTitles throughout my Xamarin.Forms app?
I tried creating a custom renderer derived from PageRenderer for NavigationPage, setting:
ViewController.NavigationController.NavigationBar.PrefersLargeTitles = true;
This didn't have any effect, however.
Voila
[assembly: ExportRenderer(typeof(NavigationPage), typeof(NavBarRenderer))]
namespace LargeTitleSample.iOS
{
public class NavBarRenderer : NavigationRenderer
{
protected override void OnElementChanged(Xamarin.Forms.Platform.iOS.VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
NavigationBar.PrefersLargeTitles = true;
}
}
}
You have to create a custom renderer for the NavigationPage inheriting the NavigationRenderer. Then set the PrefersLargeTitles property on the NavigationBar to true.
It seems that when you add some scrollable control to the page, it will automatically have to 'big to small' effect when scrolling up, at least for a ListView.
Working example repo is here: https://github.com/jfversluis/LargeTitleSample
For XAML:
<NavigationPage Title="..." xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" ios:NavigationPage.PrefersLargeTitles="true">
I'm using a ScrollView in Xamarin Forms and on iOS, the scrollview bounces (often too far) when you hit the top or the bottom. My understanding is this is default iOS behavior? Is there a way I can disable this so there is no bounce on scroll?
Yes, disabling the bouncing effect is possible. But you will need to create a Custom Renderer.
In your specific case, you have to use ScrollViewRenderer as a base class for your custom renderer. Then, in your custom renderer, you can simply set Bounces to false.
An example of a Custom Renderer can be found here. Your result should look something like this:
PCL:
public class CustomScrollView : ScrollView
{
public CustomScrollView() {}
}
iOS:
[assembly: ExportRenderer(typeof(CustomScrollView), typeof(CustomScrollViewRenderer))]
namespace Test.iOS
{
public class CustomScrollViewRenderer : ScrollViewRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
Bounces = false;
}
}
}
On Android, you will need to implement a Custom Renderer as well which simply does nothing.
I'm using the android toolbar at my MvvmCross 3.5.1 app but once I updated it to MvvmCross 4.0 databindings are broken. As long as there is no base appcompat activity I have to implement my own:
MvxActionBarEventSourceActivity : AppCompatActivity , IMvxEventSourceActivity
{
...
}
And then base bindable mvx activity:
MvxActionBarActivity : MvxActionBarEventSourceActivity, IMvxAndroidView
{
...
}
App starts just fine and I can see my toolbar but bindings are just "silent" and don't work. Same implementation works find for MvvmCross 3.5.
You can find full sample here:
https://dl.dropboxusercontent.com/u/19503836/MvvmCross4_Toolbar_Bindings.zip
Please advise.
You need to override OnCreateView and AttachBaseContext and use the MvxAppCompatActivityHelper to support bindings: https://github.com/MvvmCross/MvvmCross-AndroidSupport/blob/master/MvvmCross.Droid.Support.V7.AppCompat/MvxAppCompatActivity.cs#L78
public override View OnCreateView(View parent, string name, Context context, IAttributeSet attrs)
{
var view = MvxAppCompatActivityHelper.OnCreateView(parent, name, context, attrs);
return view ?? base.OnCreateView(parent, name, context, attrs);
}
protected override void AttachBaseContext(Context #base)
{
base.AttachBaseContext(MvxContextWrapper.Wrap(#base, this));
}
There is a sample available to implement Toolbar instead of Actionbar too: https://github.com/MvvmCross/MvvmCross-AndroidSupport/tree/master/Samples