Xamarin UWP-如何摆脱将鼠标悬停在按钮上时出现的边框 [英] Xamarin UWP - How to get rid of border that appears when hovering over button

问题描述

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

I'm working on a Xamarin.Forms mobile app. In the UWP version, when I hover over a button, a ~2px gray border appears:

问题是：当不悬停时，边框消失，现在留下的空间为空（或者边框变为透明），导致按钮看起来与

The problem is: when not hovering, the border goes away, leaving that amount of space now empty (or perhaps the border becomes transparent), causing the button to look slightly out of alignment with elements above it.

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

How do I get rid of that border altogether (when hovering and not hovering)?

我使用的是自定义渲染器（ ButtonExt：Button ），在PCL的默认样式中，我将BorderWidthProperty设置为 new默认情况下，Thickness（0）以及处于禁用状态和焦点状态（例如，为了清楚起见，不包括其他样式属性）：

I'm using a custom renderer (ButtonExt : Button), and in the default styles in the PCL, I'm setting the BorderWidthProperty to new Thickness(0) by default, as well as in the disabled and focused state, like this (leaving out other style properties for clarity):

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）; 。但这有点骇人听闻。理想情况下，有一种方法可以通过样式删除该边框。

But that has no effect. The only thing that works is if I explicitly set the native control border thickness to 0 - Control.BorderThickness = new Thickness(0);. But that's a little hacky. Ideally there's a way I can remove that border through styles.

推荐答案

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

You have no need to realize this feature via custom renderer. Xamarin.Forms button has BorderWidth property, and it is designed base on native button BorderThicknessProperty. So you could use it directly.

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

如果使用 Button 样式实现此功能，则可以在 ResourceDictionary 。

If you have used Button style to realize this feature, you could create Xaml Button Style in the ResourceDictionary.

<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}"/>

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

You could also use style in the code behind.

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

更新

您也可以像在您的案例中提到的那样自定义按钮渲染，但是， BorderWidthProperty 是两倍的。您可以将 Value = new Thickness（0）修改为 Value = 0 。它将起作用。

You could also custom button render like mentioned in your case, However, the type of BorderWidthProperty is double. You could modify Value = new Thickness(0) to Value = 0.It will work.

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-如何摆脱将鼠标悬停在按钮上时出现的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！