html鼠标悬停图片边框出现

Posted 2023-04-24

参考技术A html鼠标悬停图片边框出现是查看图片的设置是自动默认的。需要修改html鼠标悬停图片边框出现的设置可通过软件设置以更改。

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

【中文标题】Xamarin UWP - 如何摆脱悬停在按钮上时出现的边框

【英文标题】：Xamarin UWP - How to get rid of border that appears when hovering over button

【发布时间】：2018-04-12 22:12:21

【问题描述】：

我正在开发 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);。但这有点骇人听闻。理想情况下，我可以通过样式删除该边框。

【问题讨论】：

请用内联代码替换您的图片。

您如何确保将这种样式分配给您的按钮？

@G.Sharada - 我将它添加到 ResourceDictionary，通过声明 public static ResourceDictionary StyleDictionary get; = new ResourceDictionary(); 然后说 StyleDictionary.Add(ButtonStyle);，然后最后设置 Application.Resources = StyleDictionary; 添加我所有其他默认样式方式和工作。

@jbyrd ：由于ButtonRenderer 更新控件的边框宽度，默认样式在这种情况下可能不起作用 - 这反过来会覆盖默认样式值。

【参考方案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
  

【讨论】：

我试过了（我使用的是代码，而不是 XAML），是的，我认为直接在元素上设置它时它可以工作，但在样式中使用时它不会影响按钮，这是我想要的。