[英]Xamarin.Forms XAML Rounded Button
我试图在我的Xamarin.Forms应用程序中放置一个圆形按钮,但我做不到。
我读了一些关于按钮的自定义 controller 的内容,但我没有在Xamarin.Forms中找到任何关于圆形按钮的文档。
有谁知道该怎么做? 我正在构建一个Android
和iOS
应用程序。
您可以使用 BorderRadius 属性在按钮上创建圆角
<Button Text="BlueButton"
BorderColor="Blue"
BorderRadius="5"
BorderWidth="2"/>
您需要使用CornerRadius
而不是BorderRadius
因为:
'Button.BorderRadius' 已过时:'BorderRadius 自 2.5.0 起已过时。 请改用 CornerRadius。
示例: XButton.CornerRadius = 5;
如果您尝试使用圆形按钮,请使用以下代码。 高度和宽度需要相同并且与边框半径成比例。
<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
继承的,您也必须添加它。
xaml 一侧的属性是 ConerRadius,示例:
<Button
CornerRadius="20"
Text="{i18n:Translate Cancel}"
Command="{Binding CancelarCommand}"
BackgroundColor="{StaticResource ButtonBackgroundColorbuscar}"
TextColor="White" />
如果你想要一个图像按钮,你可以使用这个ButtonCirclePlugin for Xamarin Forms。
或者一个 ImageCircle,比如这个ImageCirclePlugin for Xamarin Forms 并添加一个 TapGestureRecognizer。
试试这个 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),
};
如果您不想下拉使用渲染器,并且不介意在 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 控件中显示的技术。
要创建圆形(圆形)按钮试试这个......
<Button WidthRequest = 100,
HeightRequest = 100,
BorderRadius = 50 />
一般来说,WidthRequest=x,HeightRequest=x,BorderRadius=x/2
当前版本的 Xamarin Forms 中没有BorderRadius
属性。 另一种选择是CornerRadius
属性。
例子:
<Button Text="Submit"
FontSize="Large"
TextColor="White"
BackgroundColor="Green"
CornerRadius="100"
你可以使用这种样式和转换器来获得通用圆形按钮。
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}" />
这是我认为最好的解决方案:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.