没有边框问题的 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

您在使用 Android 吗？如果是，那么：

On Android this property will not have an effect unless VisualElement.BackgroundColor is set to a non-default color.

Answer 2

Button borders don't show on Android when the ButtonRadius is 0 中的 Xamarin.Forms 似乎有问题。（从 Xamarin.Forms v2.0.0.6482 开始，这个问题似乎没有得到解决。）这并不理想，因为它会稍微改变按钮的外观，但您可以通过设置 [=14 来解决它=] 仅适用于 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

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

实际上我仍然必须将 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 4

在Android项目中去MainActivity改成继承来自

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

至

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

现在您使用 Border 不会有问题

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

Answer 5

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

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

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

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

<?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 6

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

在PCL

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

然后你必须在 android 中进行渲染并且 什么都不做

[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
    };

如果没人知道为什么会这样，请解释一下，我已经尝试过相同的方法，但没有渲染，只正常使用 class 按钮，如果我这样做，我不会得到预期的结果。

Answer 7

在 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);
    }

Answer 8

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

"Revert "Fix border on android buttons (#941)" (#1192)"

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

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

~~> 36031 - "Button border not drawn on Android without a BorderRadius" (PR)~~

没有边框问题的 Xamarin 表单按钮

Xamarin forms button with no border issue

xaml

xamarin

xamarin.forms

解决方法（代码）

解决方法（XAML）