Question

我试图在我的 Xamarin.Forms 应用程序中放置一个圆角按钮，但我无法做到。

我在按钮上阅读了有关自定义控制器的内容，但我在 Xamarin.Forms 中找不到任何有关圆角按钮的文档。

有谁知道怎么做？我正在构建Android和iOS应用程序。

Answer 1

您可以使用BorderRadius属性在Button

上创建圆角

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

Answer 2

如果您尝试使用圆形按钮，请使用以下代码。高度和宽度需要相同，并且与Border Radius成比例。

<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

如果您需要图像按钮，可以将此ButtonCirclePlugin用于Xamarin Forms。

或者ImageCircle，例如Xamarin Forms的ImageCirclePlugin，并添加TapGestureRecognizer。

Answer 4

试试这个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),
};

Answer 5

如果您不想使用渲染器，并且不介意在Windows Phone上没有圆形按钮，则可以使用以下代码：

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

它会制作一个带圆角的按钮。要使按钮完全圆整，只需将边框半径设置为高度的一半。

唯一要记住的是，您的按钮必须足够大以容纳内容。你可以通过评论/取消注释顶部的两个常量部分来了解我的意思。第一组适用于数字或字母，第二组适用于短语，例如＆＃34; ClickMe。＆＃34;

同样，这使用平台的原生按钮，由于WP不支持边框半径，WP上的所有按钮都是矩形的，因此您需要使用James在CircularImage控件中显示的技术

Answer 6

要创建圆形（圆形）按钮，请尝试此...

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

一般来说，WidthRequest = x，HeightRequest = x，BorderRadius = x / 2

Answer 7

xaml的一侧是ConerRadius，例如：

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

Answer 8

您需要使用CornerRadius而不是BorderRadius，因为：

'Button.BorderRadius'已过时：'BorderRadius已过时 2.5.0。请改用CornerRadius。'

示例：XButton.CornerRadius = 5;

Answer 9

当前版本的Xamarin Forms中没有BorderRadius属性。另一种选择是CornerRadius属性。

示例：

<Button Text="Submit"
 FontSize="Large"
 TextColor="White"
 BackgroundColor="Green" 
 CornerRadius="100"

Xamarin.Forms XAML圆形按钮

9 个答案: