Xamarin.forms XAML丸めボタン

Question

私はXamarin.Formsアプリケーションに丸いボタンを配置しようとしていますが、できません。

私はカスタムコントローラについて何かボタンに読みましたが、丸いボタンに関するドキュメントはありませんでした。Xamarin.forms

誰でもそれを行う方法を知っていますか？私はちょうどandroidとiOSアプリケーションを構築しています。

Answer 1

あなたは以下のコードを使用して、あなたは丸いボタンを持ってしようとしている場合はボタン

<Button Text="BlueButton" 
     BorderColor="Blue" 
     BorderRadius = "5" 
     BorderWidth = "2"/> 

Answer 2

上の角を丸く作成するBorderRadiusプロパティを使用することができます。高さと幅は同じで、境界線の半径に比例する必要があります。

<Button HorizontalOptions="Fill" VerticalOptions="Fill" Text="+">    
      <Button.WidthRequest> 
       <OnIdiom x:TypeArguments="x:Double" Phone="60" Tablet="80" /> 
      </Button.WidthRequest> 
      <Button.HeightRequest> 
       <OnIdiom x:TypeArguments="x:Double" Phone="60" Tablet="80" /> 
      </Button.HeightRequest> 
      <Button.BorderRadius> 
       <OnIdiom x:TypeArguments="x:Int32" Phone="30" Tablet="40" /> 
      </Button.BorderRadius> 
</Button> 

携帯電話とタブレットで同じサイズの罰金がある場合は、タブレットのさまざまなサイズを無視できます。

注：：これはWindowsでは動作しません。正方形のボタンが表示されます。

Androidの場合、mainactivityがAppCompactから継承されている場合は、thisも追加する必要があります。

Answer 3

あなたはレンダラを使用してドロップダウンしたくない、とあなたは、Windows Phoneの円形のボタンを持っていない気にしないならば、あなたはこのコードを使用することができます

private const int BUTTON_BORDER_WIDTH = 1; 
    private const int BUTTON_HEIGHT = 65; 
    private const int BUTTON_HEIGHT_WP = 40; 
    private const int BUTTON_HALF_HEIGHT = 33; 
    private const int BUTTON_HALF_HEIGHT_WP = 20; 
    private const int BUTTON_WIDTH = 65; 
    private const int BUTTON_WIDTH_WP = 20; 
    var chkIm = new Button() 
     { 


      BackgroundColor = Color.Black, 
      HorizontalOptions = LayoutOptions.Center, 
      TextColor = Color.White, 
      BorderRadius = Device.OnPlatform(BUTTON_HALF_HEIGHT, BUTTON_HALF_HEIGHT, BUTTON_HALF_HEIGHT_WP), 
      HeightRequest = Device.OnPlatform(BUTTON_HEIGHT, BUTTON_HEIGHT, BUTTON_HEIGHT_WP), 
      MinimumHeightRequest = Device.OnPlatform(BUTTON_HEIGHT, BUTTON_HEIGHT, BUTTON_HEIGHT_WP), 
      WidthRequest = Device.OnPlatform(BUTTON_WIDTH, BUTTON_WIDTH, BUTTON_WIDTH_WP), 
      MinimumWidthRequest = Device.OnPlatform(BUTTON_WIDTH, BUTTON_WIDTH, BUTTON_WIDTH_WP), 


     }; 

Answer 4

このC＃のコードを試してみてください。

private const int BUTTON_BORDER_WIDTH = 1; 

// Normal button height 
//private const int BUTTON_HEIGHT = 44; 
//private const int BUTTON_HEIGHT_WP = 72; 
//private const int BUTTON_HALF_HEIGHT = 22; 
//private const int BUTTON_HALF_HEIGHT_WP = 36; 
//private const int BUTTON_WIDTH = 44; 
//private const int BUTTON_WIDTH_WP = 72; 

// Large button Height 
private const int BUTTON_HEIGHT = 88; 
private const int BUTTON_HEIGHT_WP = 144; 
private const int BUTTON_HALF_HEIGHT = 44; 
private const int BUTTON_HALF_HEIGHT_WP = 72; 
private const int BUTTON_WIDTH = 88; 
private const int BUTTON_WIDTH_WP = 144; 

public RoundButtonPage() 
{ 
    var button = new Button 
    { 
     HorizontalOptions = LayoutOptions.Center, 
     BackgroundColor = Color.Accent, 
     BorderColor = Color.Black, 
     TextColor = Color.White, 
     BorderWidth = BUTTON_BORDER_WIDTH, 
     BorderRadius = Device.OnPlatform(BUTTON_HALF_HEIGHT, BUTTON_HALF_HEIGHT, BUTTON_HALF_HEIGHT_WP), 
     HeightRequest = Device.OnPlatform(BUTTON_HEIGHT, BUTTON_HEIGHT, BUTTON_HEIGHT_WP), 
     MinimumHeightRequest = Device.OnPlatform(BUTTON_HEIGHT, BUTTON_HEIGHT, BUTTON_HEIGHT_WP), 
     WidthRequest = Device.OnPlatform(BUTTON_WIDTH, BUTTON_WIDTH, BUTTON_WIDTH_WP), 
     MinimumWidthRequest = Device.OnPlatform(BUTTON_WIDTH, BUTTON_WIDTH, BUTTON_WIDTH_WP), 
     Text = "ClickMe" 
    }; 

    var stack = new StackLayout 
    { 
     VerticalOptions = LayoutOptions.Center, 
     Orientation = StackOrientation.Vertical, 
     Children = { button }, 
    }; 

    Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5); 
    Content = stack; 
} 

角が丸いボタンを作成します。ボタンを完全に丸くするには、境界の半径を高さの半分に設定します。

覚えておいていただきたいのは、ボタンが内容を収めるのに十分な大きさでなければならないということだけです。あなたは、上の2つの定数セクションをコメント化/コメント解除することで、私が何を意味するのかを見ることができます。最初のセットは数字や文字に適しており、2番目のセットは "ClickMe"のようなフレーズに適しています。

また、これはプラットフォームのネイティブボタンを使用し、WPはボーダー半径をサポートしていないので、WPのすべてのボタンは長方形になります。そのため、JamesがCircularImageコントロールで示すテクニックを使用する必要があります。

Answer 5

画像ボタンが必要な場合は、ButtonCirclePluginをXamarinフォームに使用できます。

Xamarinフォームの場合はImageCirclePluginのようなImageCircleを使用し、TapGestureRecognizerを追加します。