web-dev-qa-db-fra.com

Bouton arrondi Xamarin.Forms XAML

J'essaie de placer un bouton arrondi dans mon Xamarin.Forms application, mais je ne peux pas le faire.

J'ai lu quelque chose sur un contrôleur personnalisé pour le bouton, mais je n'ai trouvé aucun document sur les boutons arrondis dans Xamarin.Forms.

Est-ce que quelqu'un sait comment le faire? Je construis juste une application Android et iOS.

buttonxamarinxamarin.forms
12
Biellx

Vous pouvez utiliser la propriété BorderRadius pour créer des coins arrondis sur un bouton

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

Si vous essayez d'avoir un bouton rond, utilisez le code ci-dessous. La hauteur et la largeur doivent être identiques et également proportionnelles au rayon de la bordure.

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

Vous pouvez ignorer la taille différente pour les tablettes si vous êtes d'accord pour avoir la même taille sur le téléphone et les tablettes.

Remarque : Cela ne fonctionnera pas sous Windows. Vous obtiendrez un bouton carré.

Sous Android, si votre mainactivity hérite de AppCompact, vous devrez également ajouter this .

1
Rohit Vipin Mathews

Le côté de xaml la propriété est ConerRadius, exemple:

<Button 
    CornerRadius="20"
    Text="{i18n:Translate Cancel}"
    Command="{Binding CancelarCommand}" 
    BackgroundColor="{StaticResource ButtonBackgroundColorbuscar}" 
    TextColor="White" />
1
jAVI sUA

Si vous voulez un bouton d'image, vous pouvez utiliser ceci ButtonCirclePlugin pour les formulaires Xamarin.

Ou un ImageCircle tel que celui-ci ImageCirclePlugin pour Xamarin Forms et ajoutez un TapGestureRecognizer.

1
noelicus

Si vous ne souhaitez pas utiliser un moteur de rendu et que cela ne vous dérange pas de ne pas avoir de bouton circulaire sur Windows Phone, vous pouvez utiliser ce code:

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

Il fera un bouton aux coins arrondis. Pour faire un bouton totalement rond, il suffit de définir le rayon de la bordure à la moitié de la hauteur.

La seule chose à retenir est que votre bouton doit être suffisamment grand pour contenir le contenu. Vous pouvez voir ce que je veux dire en commentant/décommentant les deux sections constantes en haut. Le premier ensemble est bon pour un nombre ou une lettre, et le second est bon pour une phrase, comme "ClickMe".

Encore une fois, cela utilise les boutons natifs de la plate-forme et puisque WP ne prend pas en charge un rayon de bordure tous les boutons sur WP sera rectangulaire, vous aurez donc besoin pour utiliser la technique présentée par James dans le contrôle CircularImage.

0
MohamedHamza

Vous devez utiliser CornerRadius au lieu de BorderRadius car:

'Button.BorderRadius' est obsolète: 'BorderRadius est obsolète depuis 2.5.0. Veuillez utiliser CornerRadius à la place. '

Exemple: XButton.CornerRadius = 5;

0
Mike Darwish

Essayez ce code C #

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),
};
0
imrohit

Pour créer un bouton arrondi (circulaire), essayez ceci ...

  <Button WidthRequest = 100,
            HeightRequest = 100,
            BorderRadius = 50 />

En général, WidthRequest = x, HeightRequest = x, BorderRadius = x/2

0
Abhishek