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，我还试图创建一个按钮，没有边框半径，背景颜色设置为白色，边框颜色和＆amp;宽度，上述答案都不适合我。

实际上我仍然需要将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开始，这个问题并没有得到解决。）它不太理想，因为它会略微改变按钮的外观，但是你可以解决它仅为Android或所有平台设置BorderRadius = 1，为角落提供略微可感知的四舍五入。

解决方法（代码）

// 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吗？如果是，那么：

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

Answer 4

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

“还原”修复Android按钮上的边框（＃941）“（#1192）”

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

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

~~＆GT; 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

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

我没有为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 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
    };

如果没有人知道为什么工作请解释我，我已经尝试了同样但没有渲染只使用班级按钮正常，如果我这样做，我不会得到预期的结果。

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

Xamarin形成没有边框问题的按钮

8 个答案:

解决方法（代码）

解决方法（XAML）