Xamarin UWP - How to get rid of border that appears when hovering over button

问题

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

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

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.

回答1:

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

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>

Usage

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

You could also use style in the code behind.

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

Update

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

来源：https://stackoverflow.com/questions/47040536/xamarin-uwp-how-to-get-rid-of-border-that-appears-when-hovering-over-button

标签

Xamarin

xamarin.forms

uwp

xamarin.uwp

custom-renderer