Xamarin.forms。 Android：ボタン画像のボタンを表示

Question

私はAndroidとiOS向けのアプリを製作しています。私の知る限り、アンドロイド上の画像ボタンに枠線を設定することはできません。 iOSでは可能です。

私が画像ボタンを作成すると、Android上のボタンのようには見えません。私はボタンの外観を与える方法を見つけることができません。私はテキスト付きのボタンでしか見つけることができません。

理解を深めるために画像を参照してください。

誰でも手助けできますか？

（それはおそらく「格好良い」コードではありませんので、XamarinとXAMLに新しい）これは私のコードである

<Label Text="Velg betalingsmetode:" 
    TextColor="#002C6C" 
    FontSize="Medium" 
    VerticalOptions="Center" 
    HorizontalOptions="Center"/> 

    <Button x:Name="MobilePayButton" 
    HeightRequest="100" 
    WidthRequest="130" 
    HorizontalOptions="Center" 
    VerticalOptions="Center" 
    BackgroundColor="White" 
    BorderColor="#002C6C" 
    BorderWidth="2" 
    Clicked="ToPayConfirmationPage"> 

     <Button.Image> 
      <OnPlatform x:TypeArguments="FileImageSource" 
      Android="pay_MobilePaylogo2.png" 
      iOS="Pay_MobilePaylogo2.png"/> 
     </Button.Image> 

    </Button> 

Answer 1

の境界線を持つボタンを作成するには、作成する必要がありますカスタマイズされたボタン：

：PCLプロジェクトで

1. はカスタムボタンを追加します3210

   public class ButtonWithBorder:Button 
   { 
   } 
   

2. XAMLでそれを使用してください：Androidのプロジェクトで

   <StackLayout 
   VerticalOptions="Center"> 
       <local:ButtonWithBorder Clicked="ButtonWithBorder_Clicked"> 
       <local:ButtonWithBorder.Image> 
        <OnPlatform x:TypeArguments="FileImageSource" 
         Android="gluehbirne.png" 
         iOS="Pay_MobilePaylogo2.png"/> 
       </local:ButtonWithBorder.Image> 
       </local:ButtonWithBorder> 
   </StackLayout> 
   

3. を、私たちのカスタムボタンのButtonRendererを作成します。

   [assembly: ExportRenderer(typeof(ButtonWithBorder),typeof(ButtonWithBorderRenderer))] 
   namespace ButtonWithBorderDemo.Droid 
   { 
       public class ButtonWithBorderRenderer:ButtonRenderer 
       { 
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e) 
        { 
         base.OnElementChanged(e); 
         Control.Background=ContextCompat.GetDrawable(this.Context, Resource.Drawable.button_bg); 
   
        } 
       } 
   } 
   

4. はResources\drawableにbutton_bg.axmlを追加します。

   <?xml version="1.0" encoding="utf-8"?> 
   <shape xmlns:android="http://schemas.android.com/apk/res/android" 
       android:shape="rectangle"> 
       <corners android:radius="3dp" /> 
       <stroke android:width="5px" android:color="#000000" /> 
   </shape> 
   

あなたはアンドロイドでボーダーのボタンを取得します。