Question

我正在开发一款Xamarin.Forms移动应用。在UWP版本中，当我将鼠标悬停在按钮上时，会出现~2px灰色边框：

问题是：当没有悬停时，边框会消失，现在剩下的空间数量为空（或者边框变得透明），导致按钮看起来与上面的元素略微不对齐。

如何完全摆脱边界（悬停时而不是悬停）？

我正在使用自定义渲染器（ButtonExt : Button），在PCL的默认样式中，默认情况下我将BorderWidthProperty设置为new Thickness(0)，以及禁用和聚焦像这样的状态（为了清楚起见，省略了其他样式属性）：

public static Style ButtonStyle => new Style(typeof(ButtonExt))
{
    Setters =
    {
        new Setter {Property = ButtonExt.BorderWidthProperty, Value = new Thickness(0)}
    },
    Triggers =
    {
        // Disabled button
        new Trigger(typeof(ButtonExt))
        {
            Property = VisualElement.IsEnabledProperty,
            Value = false,
            Setters =
            {
                new Setter {Property = ButtonExt.BorderWidthProperty, Value = new Thickness(0)}
            }
        },
        new Trigger(typeof(ButtonExt))
        {
            Property = VisualElement.IsFocusedProperty,
            Value = true,
            Setters =
            {
                new Setter {Property = ButtonExt.BorderWidthProperty, Value = new Thickness(0)}
            }
        }
    }
};

但这没有效果。唯一有效的是，如果我明确地将原生控件边框厚度设置为0 - Control.BorderThickness = new Thickness(0);。但那有点笨拙。理想情况下，我可以通过样式删除边框。

Answer 1

您无需通过自定义渲染器实现此功能。 Xamarin.Forms按钮具有BorderWidth属性，它基于本机按钮BorderThicknessProperty设计。所以你可以直接使用它。

<Button Text="Welcome" BorderWidth="0"
    VerticalOptions="CenterAndExpand" 
    HorizontalOptions="CenterAndExpand" Clicked="Button_Clicked" />

如果您使用Button样式来实现此功能，则可以在ResourceDictionary中创建Xaml按钮样式。

<ResourceDictionary>
    <Style x:Key="buttonStyle" TargetType="Button">
        <Setter Property="HorizontalOptions" Value="Center" />
        <Setter Property="VerticalOptions" Value="CenterAndExpand" />
        <Setter Property="BorderColor" Value="Lime" />
        <Setter Property="BorderRadius" Value="0" />
        <Setter Property="BorderWidth" Value="0" />
        <Setter Property="WidthRequest" Value="200" />
        <Setter Property="TextColor" Value="Teal" />
    </Style>
</ResourceDictionary>

<强>用法

<Button Text="Welcome" Style="{StaticResource buttonStyle}"/>

您也可以在后面的代码中使用样式。

MyButton.Style = App.Current.Resources["buttonStyle"] as Style;

<强>更新

你也可以像你提到的那样自定义按钮渲染，但BorderWidthProperty的类型是双倍的。您可以将Value = new Thickness(0)修改为Value = 0。它会有效。

public CustomButton()
{
    this.Style = ButtonStyle;
}

public static Style ButtonStyle => new Style(typeof(Button))
{
    Setters =
  {
    new Setter {Property = Button.BorderWidthProperty, Value = 0},
    new Setter{ Property = Button.BorderColorProperty,Value  = Color.Red}
  }
}

Xamarin UWP - 如何摆脱悬停在按钮上时出现的边框

1 个答案: