0

私はこのもので私の髪を引っ張っています。私は必要なものボタンのカスタムレンダラー

enter image description here

:私は結果が下の画像に表示を取得するためにXamarinフォーム(ポータブルクラスライブラリ-PCL)を使用して、カスタムレンダラを作成しようとしています

  1. 角丸
  2. (タッチを示す)ボタンapperance
  3. 中央に
  4. 「ノーマル」ボタンのラベル
  5. 画像右隅に
  6. 左下に小さな文字が表示されます。

通常のボタン用のカスタムレンダラーを作成できましたが、小さなテキストと画像を追加できませんでした。おかげenter image description here

下の画像をご覧ください!

+2

(http://meta.stackoverflow.com/questions/318249/handling-ops-pre-emptive-defensive-instructions)[これをチェック] –

+0

@MD何?私の質問でどこの条件を満たしていますか? –

+1

@ JoakimMおそらくここに「Frame/ContentView/Button用のカスタムレンダラーを使ってこれを作成するのを助けても気にしない」 – Sreeraj

答えて

0

に処理する方法がここに誰のためのUWPのためのソリューションがあるcardviewのイベントをクリック扱うに役立つかもしれません興味がある!

[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; 
     } 


    } 
} 
1

これは

がボタンとしてCardViewを使用し、ボタン

enter image description here

<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> 
+0

残念ながらXamarinフォームを使用しています:( –

+1

'Xamarin.Forms'でも動作しますが、' CardView'の素晴らしい例です;-) – SushiHangover