So I have a problem with putting an image on a button and it's driving me crazy. Any suggestions/help would be greatly appreciated!
Normal Xamarin.Forms Button is not working either on iOS or Android. (see two attached screenshots Android_Button & iOS_Button)
So I've created my own renderer which is working fine on iOS (See iOS_CustButton) However it's causing me problems on Android.
Here's the xaml for the page:
<RelativeLayout>
<StackLayout
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.6}" >
<Image Source="shared/logo.png" HorizontalOptions="Center" />
</StackLayout>
<StackLayout
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.58}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4}" >
<StackLayout Orientation="Vertical" Padding="20,1,20,20" VerticalOptions="FillAndExpand">
<local:ImageButton2 Text="Start spil" Command="{Binding StartCommand}" Image="shared/knap_graa.png" Font="{Binding Font}" TextColor="#000" VerticalOptions="FillAndExpand"/>
<local:ImageButton2 Text="Info" Command="{Binding InfoCommand}" Image="shared/knap_graa.png" Font="{Binding Font}" TextColor="#000" VerticalOptions="FillAndExpand"/>
<local:ImageButton2 Text="Highscore" Command="{Binding HiscoreCommand}" Image="shared/knap_graa.png" Font="{Binding Font}" TextColor="#000" VerticalOptions="FillAndExpand"/>
<local:ImageButton2 Text="Besøg hjemmeside" Command="{Binding WebCommand}" Image="shared/knap_graa.png" Font="{Binding Font}" TextColor="#000" VerticalOptions="FillAndExpand"/>
</StackLayout>
</StackLayout>
</RelativeLayout>
And here is the code for the Android custom renderer: (snippet)
protected override void OnElementChanged (ElementChangedEventArgs<Button> e)
{
base.OnElementChanged (e);
if (e.OldElement != null) {
return;
}
button = new global::Android.Widget.Button(Context);
button.SetBackgroundResource(Resource.Drawable.knap_graa);
button.Text=Control.Text;
button.SetTextColor (Element.TextColor.ToAndroid());
SetNativeControl (button);
}
If I set the BackgroundResource it seems like the button does not respect the layout but takes up all the vertical space of the inner StackLayout. If I don't set any BackgroundResource - all the 4 buttons are laid out correct.
See attached screen shots (Android_CustButton and Android_NoImage)
I simply cannot get this to work and any help would be appreciated.
Thanks in advance.
Normal Xamarin.Forms button with Image on iOS:
Normal Xamarin.Forms button with Image on Android:
Custom button renderer working on iOS:
Custom button renderer not working on Android:
Custom button renderer on Android without setting BackgroundResource: