Xamarin.Forms XAML 圆角按钮

Question

Xamarin.Forms XAML 圆角按钮

buttonxamarinxamarin.forms

16

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

我读了一些关于通过自定义控制器来创建按钮的内容，但我没有发现有关在Xamarin.Forms中创建圆形按钮的文档。

有人知道怎么做吗？我只是在构建一个Android和iOS应用程序。

- Biellx

我建议您将我的答案设为接受的答案，因为它是最新的。 - Mohamad Mahmoud Darwish

10个回答

7

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

'Button.BorderRadius'已经过时了：'自2.5.0版本起，BorderRadius已经过时，请改用CornerRadius。'

示例：XButton.CornerRadius = 5;

- Mohamad Mahmoud Darwish

3

如果您想要一个圆形按钮，请使用以下代码。高度和宽度需要相同并且与边框半径成比例。

<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，您还需要添加此内容。

- Rohit Vipin Mathews

这个有效，但是请使用HorizontalOptions="Center"代替HorizontalOptions="Fill"。 - Najeeb

2

在当前的Xamarin Forms版本中，没有“BorderRadius”属性。一个替代方案是“CornerRadius”属性。

示例：

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

- sabsab

2

XAML中的属性侧重于ConerRadius，示例：

最初的回答：

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

- jAVI sUA

1

如果您想要一个图像按钮，您可以使用这个ButtonCirclePlugin适用于Xamarin Forms。

或者，您可以使用ImageCirclePlugin适用于Xamarin Forms的ImageCircle，并添加TapGestureRecognizer。

- noelicus

0

要创建圆形按钮，请尝试以下方法...

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

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

- Abhishek

0

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

- imrohit

我使用XAML，会怎样呢？ - Biellx

0

如果您不想使用渲染器，并且不介意在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;
}

它将创建一个带有圆角的按钮。要使按钮完全圆形，只需将边框半径设置为高度的一半。

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

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

- MohamedHamza

1

XAML怎么样？可以吗？ - Biellx

0

你可以使用这个样式和转换器来获取通用的圆形按钮。

在 App.xaml 中定义样式。

<Style x:Key="CircleButton" TargetType="{x:Type Button}">
    <Setter Property="CornerRadius" Value="{Binding Source={RelativeSource Self}, Path=WidthRequest, Converter={StaticResource NumberDivideConverter}, ConverterParameter=2}" />
    <Setter Property="HeightRequest" Value="{Binding Source={RelativeSource Self}, Path=WidthRequest}" />
</Style>

别忘了在App.xaml的头部添加下面这一行：

xmlns:converters="clr-namespace:AlarteInclinometer.Converters"

并且

<converters:NumberDivideConverter x:Key="NumberDivideConverter" />

在 App.xaml 中进行如下操作：

你的转换器类将圆角分成 WidthRequest / 2，代码如下：

NumberDivideConverter.cs:

public class NumberDivideConverter : IValueConverter
{
    /// <summary>
    /// Converts binding property to calculated new property
    /// </summary>
    /// <param name="value">Source value</param>
    /// <param name="targetType">Target type of to be calculated (return) value.</param>
    /// <param name="parameter">Converter parameter.</param>
    /// <param name="culture">Converter culture.</param>
    /// <returns>New calculated value.</returns>
    /// <exception cref="ArgumentNullException">If value is null, throws ArgumentNullException</exception>
    /// <exception cref="ArgumentException">If value cannot be converted to a integer, throws ArgumentException</exception>
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        // Check is value not null
        if (value == null)
            throw new ArgumentNullException($"Value is null");

        // Check is value integer
        if (int.TryParse(value.ToString(), out int intValue))
        {
            // If there is no parameter value, return same value 
            if (parameter == null)
                return intValue;

            // If there is converter parameter, divide number with it and return new result
            if (int.TryParse(parameter.ToString(), out int param))
                return intValue / param;
        }
        // Throw an error if value is not an integer
        else
        {
            throw new ArgumentException($"The value must be a integer but it is a/an {value}");
        }

        return 0;
    }

    /// <summary>
    /// Converts calculated property to binding property
    /// </summary>
    /// <param name="value">Source value</param>
    /// <param name="targetType">Target type of to be calculated (return) value.</param>
    /// <param name="parameter">Converter parameter.</param>
    /// <param name="culture">Converter culture.</param>
    /// <returns>New calculated value.</returns>
    /// <exception cref="ArgumentNullException">If value is null, throws ArgumentNullException</exception>
    /// <exception cref="ArgumentException">If value cannot be converted to a integer, throws ArgumentException</exception>
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        // Check is value not null
        if (value == null)
            throw new ArgumentNullException($"Value is null");

        // Check is value integer
        if (int.TryParse(value.ToString(), out int intValue))
        {
            // If there is no parameter value, return same value 
            if (parameter == null)
                return intValue;

            // If there is converter parameter, divide number with it and return new result
            if (int.TryParse(parameter.ToString(), out int param))
                return intValue * param;
        }
        // Throw an error if value is not an integer
        else
        {
            throw new ArgumentException($"The target must be a integer but it is a/an {value}");
        }

        return 0;
    }
}

之后，您可以在需要的按钮中使用此样式，例如：

<Button Text="Circular" WidthRequest="120" Style="{StaticResource CircleButton}" />

我认为这是最好的解决方案 :)

- Abdulkadir NURKALEM

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason · Accepted Answer

您可以使用BorderRadius属性在按钮上创建圆角。

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