[英]Xamarin.Forms XAML Rounded Button
I'm trying to place a rounded Button in my Xamarin.Forms application, but I can't do it.我试图在我的Xamarin.Forms应用程序中放置一个圆形按钮,但我做不到。
I read something about a custom controller to the button, but I didn't find any docs about rounded buttons in Xamarin.Forms .我读了一些关于按钮的自定义 controller 的内容,但我没有在Xamarin.Forms中找到任何关于圆形按钮的文档。
Does anyone know how to do it?有谁知道该怎么做? I'm just building an
Android
and iOS
application.我正在构建一个
Android
和iOS
应用程序。
You can use the BorderRadius property to create rounded corners on a Button您可以使用 BorderRadius 属性在按钮上创建圆角
<Button Text="BlueButton"
BorderColor="Blue"
BorderRadius="5"
BorderWidth="2"/>
You need to use CornerRadius
instead of BorderRadius
because:您需要使用
CornerRadius
而不是BorderRadius
因为:
'Button.BorderRadius' is obsolete: 'BorderRadius is obsolete as of 2.5.0.
'Button.BorderRadius' 已过时:'BorderRadius 自 2.5.0 起已过时。 Please use CornerRadius instead.'
请改用 CornerRadius。
Example: XButton.CornerRadius = 5;
示例:
XButton.CornerRadius = 5;
If you are trying to have a Round button, use the below code.如果您尝试使用圆形按钮,请使用以下代码。 The height and width needs to be same and also proportionate to 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>
You can ignore the different size for tablets if you are fine in having the same size on phone and tablets.如果您可以在手机和平板电脑上使用相同的尺寸,则可以忽略平板电脑的不同尺寸。
Note : This won't work on Windows.注意:这不适用于 Windows。 You will get a square button.
你会得到一个方形按钮。
In Android, if your mainactivity
is inheriting from AppCompact
you will have to add this too.在 Android 中,如果您的
mainactivity
是从AppCompact
继承的,您也必须添加它。
The side of xaml the property is ConerRadius, Example: xaml 一侧的属性是 ConerRadius,示例:
<Button
CornerRadius="20"
Text="{i18n:Translate Cancel}"
Command="{Binding CancelarCommand}"
BackgroundColor="{StaticResource ButtonBackgroundColorbuscar}"
TextColor="White" />
If you want an image button you can use this ButtonCirclePlugin for Xamarin Forms.如果你想要一个图像按钮,你可以使用这个ButtonCirclePlugin for Xamarin Forms。
Or an ImageCircle such as this ImageCirclePlugin for Xamarin Forms and add a TapGestureRecognizer.或者一个 ImageCircle,比如这个ImageCirclePlugin for Xamarin Forms 并添加一个 TapGestureRecognizer。
Try this C# 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),
};
If you do not wish to drop down to using a renderer, and you don't mind not having a circular button on Windows Phone, you can use this code:如果您不想下拉使用渲染器,并且不介意在 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;
}
It will make a button with rounded corners.它将制作一个带有圆角的按钮。 To make a button totally round you just set the border radius to be half of the height.
要使按钮完全圆形,您只需将边框半径设置为高度的一半。
The only thing to remember is that your button has to be large enough to contain the contents.唯一要记住的是,您的按钮必须足够大以包含内容。 You can see what I mean by commenting/uncommenting out the two constant sections at the top.
您可以通过注释/取消注释顶部的两个常量部分来理解我的意思。 The first set is good for a number or letter, and the second one is good for a phrase, like "ClickMe."
第一组适用于数字或字母,第二组适用于短语,例如“ClickMe”。
Again, this uses the native buttons of the platform and since WP doesn't support a border radius all buttons on WP will be rectangular so you'll need to use the technique that James shows in the CircularImage control.同样,这使用了平台的本机按钮,并且由于 WP 不支持边框半径,因此 WP 上的所有按钮都将是矩形的,因此您需要使用 James 在 CircularImage 控件中显示的技术。
To create rounded (circular) button try this...要创建圆形(圆形)按钮试试这个......
<Button WidthRequest = 100,
HeightRequest = 100,
BorderRadius = 50 />
In general, WidthRequest=x, HeightRequest=x, BorderRadius=x/2一般来说,WidthRequest=x,HeightRequest=x,BorderRadius=x/2
There is no BorderRadius
Property in the current version of Xamarin Forms.当前版本的 Xamarin Forms 中没有
BorderRadius
属性。 An alternative is the CornerRadius
Property.另一种选择是
CornerRadius
属性。
example:例子:
<Button Text="Submit"
FontSize="Large"
TextColor="White"
BackgroundColor="Green"
CornerRadius="100"
Yo can use this style and converter to get General Circular Button.你可以使用这种样式和转换器来获得通用圆形按钮。
Style in App.xaml 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>
Don't forget to add below line to your head of App.xaml :不要忘记将以下行添加到App.xaml的头部:
xmlns:converters="clr-namespace:AlarteInclinometer.Converters"
and和
<converters:NumberDivideConverter x:Key="NumberDivideConverter" />
to in App.xaml到App.xaml
Your converter class which divides corner radius to WidthRequest / 2 is:您的转换器 class 将角半径除以 WidthRequest / 2 是:
NumberDivideConverter.cs: 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;
}
}
After that, you can use this style in buttons where you want like:之后,您可以在需要的按钮中使用此样式:
<Button Text="Circular" WidthRequest="120" Style="{StaticResource CircleButton}" />
This is the best solution I think:)这是我认为最好的解决方案:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.