Sample Xamarin.Forms applications with various problems/questions (and examples)
The sample renders two buttons, the idea is that both look and work in the same matter but I'm fine if at least one of them works as expected. The first button is using a custom renderer and the second is using native embedding.
MainPage.xaml declares <controlscustom:ImageButton ... which inherits Xamarin.Forms.Button. The
first thing that custom implementation does is to set BackgroundColor to Color.Transparent to
prevent it from rendering any background. The text is however rendered from the XF.Button.
The .Droid project exports a renderer (ButtonRenderer) that applies a background (drawable xml) and
inserts an image (facebook logo). Yes - I am aware that the XF.Button supports images but when using
an image, the centered text in the button get offset by the image width, which makes the text not
purely centered. By rendering the image from the .Droid custom renderer the XF.Button text remains
centered.
- The overall look is correct
- The click event works
- Sizing is correctly based on the xaml layout containers
- No click effect (Android Material Ripple effect) on the button. I assume this is because the XF button (though Transparent) still picks up the click event. I would like to have the press effect from the custom rendered background - is that possible?
- Click effect on the button when pressing outside of the button When clicking/pressing and holding anywhere on the page background or the label text, then this button has an onpress effect. It seems like the click area from the .Droid custom renderer is huge! How can I limit this size?
MainPage.xaml declares <controlsnative:NativeImageButton ... which inherits from
Xamarin.Forms.AbsoluteLayout (not button). It resolves a native embedded renderer using
DependencyService.Get<INativeImageButton>() and adds it to it's own layout. The .Droid project
handles rendering of the entire button (background, facebook logo and text).
- The overall look is correct (even if the element size is wrong)
- The click event works
- Click effect (Android Material Ripple effect) works correctly on the button
-
The element is autosized and not covering the window width (as specified from the xaml layout) I can achieve that the element covers the entire size by setting the buttons WidthRequest to 360f but I do not want to set an absolute value. I would like for the button to fill it's parent container (i.e. the PCL projects NativeImageButton - which is an AbsoluteLayout).
-
Centered text on the button This can be a non issue if the sizing problem is solved. But if I set the WidthRequest to 360f, then the button fills the entire width but the text is still not centered.
-
Binding timings/life cycle I have BindableProperties for Text/Icon/TapCommand. I am currently creating the native view in the constructor, before the bindable properties are set from the .xaml view. When creating the button, the Text property is an empty string. I could solve this by listening to propertyChanged for the Text property and when it changes I would send the new Text to the native element and updating it's text. But could/should I create the element at a later point in the PCL project and NativeImageButton?
