Xamarin UWP - 如何摆脱悬停在按钮上时出现的边框
Posted
技术标签:
【中文标题】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),是的,我认为直接在元素上设置它时它可以工作,但在样式中使用时它不会影响按钮,这是我想要的。以上是关于Xamarin UWP - 如何摆脱悬停在按钮上时出现的边框的主要内容,如果未能解决你的问题,请参考以下文章
[UWP] [VisualState]自定义ListViewItem悬停演示文稿