Xamarin UWP - Wie loswerden von Grenze, die erscheint, wenn der Mauszeiger über den Button

Question

Ich arbeite an einer Xamarin.Forms Mobile App. In der UWP-Version, wenn ich über eine Schaltfläche bewegen, ein ~ 2px grauer Rand erscheint:

Das Problem ist: Wenn nicht schwebt, geht die Grenze entfernt, dass die Menge an Raum verläßt jetzt leer (oder Vielleicht wird die Umrandung transparent), so dass die Schaltfläche nicht mehr mit den darüber liegenden Elementen übereinstimmt.

Wie entferne ich diese Grenze (wenn ich schwebe und nicht schwebe)?

Ich bin mit einem benutzerdefinierten Renderer (ButtonExt : Button) und in den Standard-Stilen in der PCL, ich bin die BorderWidthProperty zu new Thickness(0) von Standardeinstellung, sowie in dem behinderten und fokussierten Zustand, wie dies (Weglassen andere Stileigenschaften für Klarheit):

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

Aber das hat keinen Effekt. Das einzige, was funktioniert, ist, wenn ich die native Kontrollrandstärke explizit auf 0 - Control.BorderThickness = new Thickness(0); einstelle. Aber das ist ein bisschen hacky. Im Idealfall gibt es eine Möglichkeit, diese Grenze durch Stile zu entfernen.

Answer 1

Sie müssen diese Funktion nicht über einen benutzerdefinierten Renderer ausführen. Xamarin.Forms-Schaltfläche hat BorderWidth Eigenschaft, und es basiert auf nativer Schaltfläche BorderThicknessProperty basiert. Sie können es also direkt verwenden.

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

Wenn Sie Button Stil verwendet haben, um diese Funktion zu realisieren, können Sie XAML Button Style im ResourceDictionary erstellen.

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

Nutzungs

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

Sie auch Stil in der Code-behind verwenden könnte.

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

aktualisieren

Sie können auch benutzerdefinierte Schaltfläche wie in Ihrem Fall erwähnt machen, jedoch ist die Art der BorderWidthProperty Doppel. Sie könnten Value = new Thickness(0) zu Value = 0 ändern. Es wird funktionieren.

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