Пользовательский рендерер для кнопки

Question

Я тяну свои волосы с этим. Я пытаюсь создать пользовательский визуализатор при помощи Xamarin форм (Portable Class Library-PCL), чтобы получить результат, показывающий в изображении ниже:

Что мне нужно:

1. Закругленные углы
2. кнопка Apperance (показывая касание)
3. «Normal» метка кнопки в центре
4. изображение в правом углу
5. Меньший текст в левом нижнем углу.

Мне удалось создать собственный рендерер для обычной кнопки, но не смог добавить небольшой текст и изображение. Смотрите изображение ниже

Спасибо!

Answer 1

Вот решение для UWP для тех, кто интересно!

[assembly: ExportRenderer(typeof(RoundedButton), typeof(RoundedButtonRenderer))] 
namespace Platformspecific.Buttons 
{ 
    public class RoundedButtonRenderer : ViewRenderer<RoundedButton, Windows.UI.Xaml.Shapes.Rectangle> 
    { 
     Xamarin.Forms.Color originalBackground; 
     private RoundedButton _control; 

     protected override void OnElementChanged(ElementChangedEventArgs<RoundedButton> e) 
     { 
      base.OnElementChanged(e); 

      if (e.NewElement != null) 
      { 
       _control = e.NewElement as RoundedButton; 

       originalBackground = _control.CustomBackgroundColor; 

       this.PointerPressed += Control_Pressed; 
       this.PointerReleased += Control_Released; 
       this.PointerExited += Control_Released; 

       var rectangle = new Windows.UI.Xaml.Shapes.Rectangle(); 
       rectangle.Width = this.Width; // 100; 
       rectangle.Height = this.Height; 


       rectangle.Fill = new SolidColorBrush(ToMediaColor(_control.CustomBackgroundColor)); 

       rectangle.RadiusX = _control.BorderRadius; 
       rectangle.RadiusY = _control.BorderRadius; 



       rectangle.Stroke = new SolidColorBrush(ToMediaColor(_control.OutlineColor)); 
       rectangle.StrokeThickness = _control.BorderWidth; 

       this.SetNativeControl(rectangle); 


      } 
     } 


     public static Windows.UI.Color ToMediaColor(Xamarin.Forms.Color color) 
     { 
      return Windows.UI.Color.FromArgb(((byte)(color.A * 255)), (byte)(color.R * 255), (byte)(color.G * 255), (byte)(color.B * 255)); 
     } 


     void Control_Pressed(object sender, PointerRoutedEventArgs e) 
     { 


      Windows.UI.Xaml.Shapes.Rectangle _rectangle = e.OriginalSource as Windows.UI.Xaml.Shapes.Rectangle; 


      var rectangle = new Windows.UI.Xaml.Shapes.Rectangle(); 
      rectangle.Width = this.Width; 
      rectangle.Height = this.Height; 
      rectangle.Fill = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 100, 100, 100)); 
      rectangle.RadiusX = _control.BorderRadius; 
      rectangle.RadiusY = _control.BorderRadius; 
      rectangle.Stroke = new SolidColorBrush(ToMediaColor(_control.OutlineColor)); 
      rectangle.StrokeThickness = _control.BorderWidth; 

      this.SetNativeControl(rectangle); 

      e.Handled = false; 
     } 

     void Control_Released(object sender, PointerRoutedEventArgs e) 
     { 

      Windows.UI.Xaml.Shapes.Rectangle _rectangle = e.OriginalSource as Windows.UI.Xaml.Shapes.Rectangle; 


      var rectangle = new Windows.UI.Xaml.Shapes.Rectangle(); 
      rectangle.Width = this.Width; 
      rectangle.Height = this.Height; 
      rectangle.Fill = new SolidColorBrush(Windows.UI.Color.FromArgb(((byte)(originalBackground.A * 255)), (byte)(originalBackground.R * 255), (byte)(originalBackground.G * 255), (byte)(originalBackground.B * 255))); 
      rectangle.RadiusX = _control.BorderRadius; 
      rectangle.RadiusY = _control.BorderRadius; 
      rectangle.Stroke = new SolidColorBrush(ToMediaColor(_control.OutlineColor)); 
      rectangle.StrokeThickness = _control.BorderWidth; 



      rectangle.Fill = new SolidColorBrush(ToMediaColor(_control.CustomBackgroundColor)); 
      rectangle.Stroke = new SolidColorBrush(ToMediaColor(_control.CustomBackgroundColor)); 


      this.SetNativeControl(rectangle); 
      e.Handled = false; 
     } 


    } 
} 

Answer 2

Это может помочь

использовать CardView как кнопки и ручки мыши события на cardview, как вы справиться с кнопкой

<android.support.v7.widget.CardView 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
card_view:cardCornerRadius="4dp" 
card_view:contentPadding="4dp" 
card_view:cardBackgroundColor="@color/darkorange" 
android:id="@+id/view"> 
<RelativeLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 
    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true" 
     android:layout_centerHorizontal="true" 
     android:text="centered"/> 
    <ImageButton 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/imageButton" 
     android:background="@android:color/transparent" 
     android:src="@drawable/ic_menu_send" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentEnd="true" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textAppearance="?android:attr/textAppearanceSmall" 
     android:text="Small Text" 
     android:id="@+id/textView3" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" /> 
</RelativeLayout> 
</android.support.v7.widget.CardView>