Xamarin.Forms XAML 圓形按鈕

Question

我試圖在我的Xamarin.Forms應用程序中放置一個圓形按鈕，但我做不到。

我讀了一些關於按鈕的自定義 controller 的內容，但我沒有在Xamarin.Forms中找到任何關於圓形按鈕的文檔。

有誰知道該怎么做？ 我正在構建一個Android和iOS應用程序。

Answer 1

您可以使用 BorderRadius 屬性在按鈕上創建圓角

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

Answer 2

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

'Button.BorderRadius' 已過時：'BorderRadius 自 2.5.0 起已過時。 請改用 CornerRadius。

示例： XButton.CornerRadius = 5;

Answer 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繼承的，您也必須添加它。

Answer 4

xaml 一側的屬性是 ConerRadius，示例：

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

Answer 5

如果你想要一個圖像按鈕，你可以使用這個ButtonCirclePlugin for Xamarin Forms。

或者一個 ImageCircle，比如這個ImageCirclePlugin for Xamarin Forms 並添加一個 TapGestureRecognizer。

Answer 6

試試這個 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 7

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

它將制作一個帶有圓角的按鈕。 要使按鈕完全圓形，您只需將邊框半徑設置為高度的一半。

唯一要記住的是，您的按鈕必須足夠大以包含內容。 您可以通過注釋/取消注釋頂部的兩個常量部分來理解我的意思。 第一組適用於數字或字母，第二組適用於短語，例如“ClickMe”。

同樣，這使用了平台的本機按鈕，並且由於 WP 不支持邊框半徑，因此 WP 上的所有按鈕都將是矩形的，因此您需要使用 James 在 CircularImage 控件中顯示的技術。

Answer 8

要創建圓形（圓形）按鈕試試這個......

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

一般來說，WidthRequest=x，HeightRequest=x，BorderRadius=x/2

Answer 9

當前版本的 Xamarin Forms 中沒有BorderRadius屬性。 另一種選擇是CornerRadius屬性。

例子：

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

Answer 10

你可以使用這種樣式和轉換器來獲得通用圓形按鈕。

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

您的轉換器 class 將角半徑除以 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}" />

這是我認為最好的解決方案:)