1

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

enter image description here

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.

jbyrd
  • 5,287
  • 7
  • 52
  • 86
  • 1
    Please replace your image with inline code. – Quality Catalyst Oct 31 '17 at 23:11
  • how are you making sure this style is assigned to your button? – Sharada Gururaj Nov 01 '17 at 14:02
  • @G.Sharada - I'm adding it to a ResourceDictionary, by declaring `public static ResourceDictionary StyleDictionary { get; } = new ResourceDictionary();` and then saying `StyleDictionary.Add(ButtonStyle);`, and then finally setting the `Application.Resources = StyleDictionary;` All my other default styles are added that way and are working. – jbyrd Nov 01 '17 at 16:26
  • 1
    @jbyrd : Maybe the default style is not working in this case due the [ButtonRenderer](https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.WinRT/ButtonRenderer.cs#L130) updating the border-width on control - which in turn overrides the default style values. – Sharada Gururaj Nov 02 '17 at 20:48

1 Answers1

3

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

enter image description here

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}
  }
}
Nico Zhu
  • 32,367
  • 2
  • 15
  • 36
  • I tried that (I'm using code, not XAML) and yes I think it worked when setting it directly on the element, but it didn't affect the button when used in a style, which is what I want. – jbyrd Nov 01 '17 at 13:56