Xamarin 窗体按钮没有边框问题

Question

我尝试在视图中呈现可点击项目的列表。我想添加一个带有图像和白色边框（第一个）的按钮。我发现我的 StackLayout/ViewCell 中的按钮无法呈现边框。

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage 
xmlns="http://xamarin.com/schemas/2014/forms" 
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
x:Class="*.PlacesPage"
Title="TEST">
<ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
</ContentPage.Padding>
<ContentPage.Content>
    <Grid>
        <ListView x:Name="lvPlaces" ItemsSource="{Binding Places}" SeparatorColor="Gray" SeparatorVisibility="Default" RowHeight="120" >
            <ListView.ItemTemplate>
              <DataTemplate>
                  <ViewCell>
                    <ViewCell.View>
                        <StackLayout Orientation="Horizontal">
                            <Button HorizontalOptions="Center" VerticalOptions="Center" BorderWidth="3" BorderColor="White" Text="IMG"></Button>
                            <Button Text="{Binding Name}" BorderWidth="0" FontSize="20" BackgroundColor="Transparent" Clicked="OnButtonClickedPlace"></Button>
                        </StackLayout>
                    </ViewCell.View>
                  </ViewCell>
              </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</ContentPage.Content>

Answer 1

我正在使用 Xamarin.Forms 2.3，并且我还尝试创建一个按钮，没有边框半径，背景颜色设置为白色，边框颜色和宽度，以上答案都不适用于我.

实际上我仍然必须将 BorderRadius 设置为 1（我的宽度是 2），并添加另一个我无法理解的解决方法：

在我的 Android 项目中，我为 Button 添加了一个自定义渲染器，其中没有任何内容。绝对没有。 因此，当您使用默认渲染器和使用从默认渲染器继承的自定义渲染器但其中没有任何代码行时，Xamarin 表单的行为在 Android 上是不同的。

我的渲染器：

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(GenericButtonRenderer))]

    namespace Express.CustomRenderers
{
    public class GenericButtonRenderer : Xamarin.Forms.Platform.Android.ButtonRenderer
    {
    }
}

Answer 2

Xamarin.Forms 中似乎存在Button borders don't show on Android when the ButtonRadius is 0 的问题。 （从 Xamarin.Forms v2.0.0.6482 开始，这个问题似乎没有得到解决。）这并不理想，因为它会稍微改变按钮的外观，但您可以通过设置 BorderRadius = 1 来解决它Android 或所有平台，对角进行略微可察觉的圆角。

解决方法（代码）

// HACK: fixes a bug where border doesn't work without a radius.
yourButton.BorderRadius = Device.OnPlatform<int>(iOS: 0, Android: 1, WinPhone: 0);

解决方法 (XAML)

<Button
    x:Name="YourButton"
    Text="Some Button Text"
    TextColor="Black"
    Clicked="OnClickedDiscover"
    BackgroundColor="Aqua"
    BorderColor="Red"
    BorderWidth="1">
    <Button.BorderRadius>
        <!-- HACK: fixes a bug where border doesn't work without a radius. -->
        <OnPlatform x:TypeArguments="x:Int32">
            <OnPlatform.Android>1</OnPlatform.Android>
        </OnPlatform>
    </Button.BorderRadius>
</Button>

Answer 3

您使用的是安卓系统吗？如果是，那么：

在 Android 上，此属性不会生效，除非 VisualElement.BackgroundColor 设置为非默认颜色。

Answer 4

在 Xamarin.Forms 2.5.0 中，补丁已恢复：

"Revert "修复 android 按钮上的边框 (#941)" (#1192)"

您现在必须使用自定义渲染器...

此错误已在 Xamarin Forms 2.4.0 的最后一个 version 中修复：

> 36031 - “在没有 BorderRadius 的 Android 上未绘制按钮边框”(PR)

Answer 5

在 Android 项目中转到 MainActivity 并将其更改为继承 来自

public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity

到

public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity

现在您使用边框不会有问题

 <Button Text="test" TextColor="White" 
            BackgroundColor="#FFA733" BorderRadius="15" 
            BorderColor="White" BorderWidth="2" HorizontalOptions="FillAndExpand" />

Answer 6

遇到了一些问题。我做了两件事来解决它：

1. 我没有为 Android 的按钮设置背景颜色（仅适用于 iOS）

<Setter Property="BackgroundColor">
    <OnPlatform x:TypeArguments="x:String">
        <OnPlatform.iOS>Transparent</OnPlatform.iOS>
    </OnPlatform>
</Setter>

1. 手动为按钮设置可绘制背景

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <stroke android:width="2px" android:color="#ffffff" />
</shape>

Answer 7

我找到了这个解决方案，不知道为什么有效，但它有效。

在 PCL 中

namespace xxx.Renderers
{
    public class WhiteButton : Button
    {
        public WhiteButton()
        {
        }
    }
}

然后你必须在android中进行渲染并且DO NOTHING

[assembly: ExportRenderer(typeof(WhiteButton), typeof(WhiteButtonRenderer))]
namespace xxxx.Droid.Renderers
{
    public class WhiteButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                var newElement = e.NewElement as WhiteButton;

                if (newElement != null)
                {

                }
            }
        }

    }
}

然后你只需要调用实例化按钮并做你想要的边框

    var myButton = new WhiteButton()
    {
        BackgroundColor = Color.Transparent,
        TextColor = Color.White,
        Text = "Desconectarse",
        BorderRadius = 45/2,//rounded border Heightbutton/2
        BorderWidth = 2,
        BorderColor = Color.White
    };

如果没有人知道为什么工作，请解释一下，我已经尝试过相同的方法，但仅使用类 Button 没有渲染，如果我这样做，我不会得到预期的结果。

Answer 8

在Android项目中创建ButtonRenderer并粘贴代码

protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {

        if (Control != null)
        {
            var roundableShape = new GradientDrawable();
            roundableShape.SetShape(ShapeType.Rectangle);
            roundableShape.SetStroke((int) Element.BorderWidth,Element.BorderColor.ToAndroid());
            roundableShape.SetColor(Element.BackgroundColor.ToAndroid());
            roundableShape.SetCornerRadius(Element.BorderRadius * Resources.DisplayMetrics.Density);
            Control.Background = roundableShape;
            Control.TransformationMethod = null;
            Control.Elevation = 0;
        }
        base.OnElementPropertyChanged(sender, e);
    }