[WPF自定义控件库] 给WPF一个HyperlinkButton
1. 在WPF怎么在UI上添加超级链接
这篇文章的目的是介绍怎么在WPF里创建自定义的HyperlinkButton控件。很神奇的,WPF居然连HyperlinkButton都没有,不过它提供了另一种方式用于在UI上添加超级链接:
<TextBlock FontSize="20">
<Hyperlink NavigateUri="http://www.google.com" RequestNavigate="Hyperlink_RequestNavigate">
Click here
</Hyperlink>
</TextBlock>
private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
{
Process.Start(new ProcessStartInfo(e.Uri.AbsoluteUri));
e.Handled = true;
}
如果需要在超级链接里放图片或其它东西,代码如下:
<TextBlock FontSize="20">
<Hyperlink NavigateUri="https://www.microsoft.com"
RequestNavigate="Hyperlink_RequestNavigate">
<StackPanel Orientation="Horizontal">
<Image Source="Microsoft-Logo1.jpg" Height="20" Width="20"/>
<TextBlock Text="Microsoft" Margin="4,0,0,0" />
</StackPanel>
</Hyperlink>
</TextBlock>
这真是很怪,为什么要先有TextBlock然后再有Hyperlink,为什么TextBlock里面可以放Image,这真的很难理解。
2. Hyperlink怎么设置样式
要给Hyperlink设置样式也有点难搞,因为在对象树上Hyperlink毫无存在感,所以也没办法使用Blend创建它的Style。
我的做法是用ILSpy拿到它的Style再修改。例如我需要MouseOver状态下文字不是红色而是紫色,可以使用下面的Style:
<Style x:Key="{x:Type Hyperlink}"
TargetType="{x:Type Hyperlink}">
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}" />
<Setter Property="Inline.TextDecorations"
Value="Underline" />
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=(SystemParameters.HighContrast)}"
Value="false" />
<Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Self}}"
Value="true" />
</MultiDataTrigger.Conditions>
<Setter Property="TextElement.Foreground"
Value="#FFFF00FF" />
</MultiDataTrigger>
<Trigger Property="ContentElement.IsEnabled"
Value="False">
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
<Trigger Property="ContentElement.IsEnabled"
Value="True">
<Setter Property="FrameworkContentElement.Cursor"
Value="Hand" />
</Trigger>
</Style.Triggers>
</Style>
3. 自定义一个HyperlinkButton
自定义一个HyperlinkButton有什么好处?因为用起来简单啊,不需要CodeBehind的代码,绑定内容和Command都简单,而且XAML更加简单直观。在外观上,很多人喜欢Hyperlink下面的横线在鼠标MouseOver才显示,另外如上面图片所示插入图片后Hyperlink下面有一条横线,这很奇怪但又取消不了。
Silverlight和UWP都很普通地提供了HyperlinkButton。不过在Silverlight中为了显示MouseOver时出现的下划线使用了两层内容,一层用于正常显示(contentPresenter),另一层用于显示下划线(UnderlineTextBlock),如果HyperlinkButton的内容是文本,当MouseOver时UnderlineTextBlock就会显示UnderlineTextBlock。
<TextBlock x:Name="UnderlineTextBlock"
Text="{TemplateBinding Content}"
TextDecorations="Underline"
Visibility="Collapsed"/>
<ContentPresenter x:Name="contentPresenter"
Content="{TemplateBinding Content}"/>
但是这样效果十分差,重叠在一起的文本看上去变得模糊。
而UWP中的HyperlinkButton的下划线是代码里写死的,大概是这样:
if (VisualTreeHelper.GetChildrenCount(contentPresenter) == 1 && VisualTreeHelper.GetChild(contentPresenter, 0) is TextBlock textBlock)
{
textBlock.TextDecorations = Text.TextDecorations.Underline;
}
而且它还没有提供任何方法关闭或修改这个下划线。我很讨厌这种代码里控制样式的行为,UI和代码应该足够解耦。UWP很多使用代码控制样式的行为,通常宣称理由是为了性能,但Button是整个UI中最不需要性能的部分,毕竟一个UI中不可能有几百个Button,就算有几百个HyperlinkButton,现代的UI框架也不可能仅仅因为下划线就导致性能下降。所以我认为没必要在代码里控制下划线的显示。
而无论Silverlight还是UWP,只要HyperlinkButton的Content不是纯文本就不能显示下划线,这应该也算一个功能缺陷。
我在Kino.Toolkit.Wpf里也提供了一个HyperlinkButton,使用方式如下:
<kino:HyperlinkButton Content="Github"
NavigateUri="https://github.com/DinoChan/Kino.Toolkit.Wpf" />
不仅使用起来简单,HyperlinkButton的代码也很简单。
public Uri NavigateUri
{
get => GetValue(NavigateUriProperty) as Uri;
set => SetValue(NavigateUriProperty, value);
}
protected override void OnClick()
{
base.OnClick();
if (NavigateUri != null && NavigateUri.IsAbsoluteUri)
{
try
{
Process.Start(new ProcessStartInfo(NavigateUri.AbsoluteUri));
}
catch (Win32Exception)
{
}
}
}
上面是HyperlinkButton的核心代码,需要一个HyperlinButton被点击后导航到的NavigateUri属性,以及在OnClick函数中使用Process.Start
在新进程打开目标Uri。关于Process和ProcessStartInfo的具体用法可见本文最后给出的参考链接。
XAML的部分基本上照抄Silverlight的HyperlinkButton,不过关于下划线的处理稍有不同。
<ControlTemplate.Resources>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ButtonBase}, Path=IsMouseOver}"
Value="True">
<Setter Property="TextDecorations"
Value="Underline" />
</DataTrigger>
</Style.Triggers>
</Style>
</ControlTemplate.Resources>
<Grid Cursor="{TemplateBinding Cursor}"
Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed">
<!--some xaml-->
</VisualState>
<VisualState x:Name="Disabled">
<!--some xaml-->
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}">
<ContentPresenter.Resources>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ButtonBase}, Path=IsMouseOver}"
Value="True">
<Setter Property="TextDecorations"
Value="Underline" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</Grid>
上面是HyperlinkButton的DefaultStyle的大致内容。Pressed和Disabled的状态使用VisualState控制外观,这部分略过。在ControlTemplate.Resources
中添加了一个TextBlock的全局样式,里面的DataTrigger设置为当鼠标进入父节点的HyperlinkButton时TextDecorations变为Underline。运行效果如下:
<kino:HyperlinkButton NavigateUri="https://www.microsoft.com/"
Margin="0,16,0,0"
FontSize="20">
<StackPanel Orientation="Horizontal">
<Image Height="20"
Width="20"
Source="/Kino.Toolkit.Wpf.Samples;component/Assets/Images/Microsoft_logo.png" />
<TextBlock Text="Microsoft"
Margin="4,0,0,0"
Resources="{x:Null}" />
</StackPanel>
</kino:HyperlinkButton>
在下面的ContentPresenter.Resources
中也添加了同样的DataTrigger,这是为了应对下面这种情况:
<kino:HyperlinkButton Content="Microsoft"
NavigateUri="https://www.microsoft.com/"
Margin="0,16,0,0"
FontSize="20">
<ButtonBase.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="20"
Width="20"
Source="/Kino.Toolkit.Wpf.Samples;component/Assets/Images/Microsoft_logo.png" />
<TextBlock Text="Microsoft"
Margin="4,0,0,0" />
</StackPanel>
</DataTemplate>
</ButtonBase.ContentTemplate>
</kino:HyperlinkButton>
这里TextBlock不是HyperlinkButton的逻辑树上的子元素,或许就是因为这样它不能应用ControlTemplate.Resources
中的TextBlock的全局样式。
最后记得在最外层的Grid上设置Background:
<Grid Cursor="{TemplateBinding Cursor}" Background="{TemplateBinding Background}">
如果不设置一个透明的background的话,就只有文字部分能捕获鼠标点击事件,这样HyperlinkButton就会很难点中。(我记得在UWP中就没有这个问题,UWP的ContentPresenter自带透明背景)
4. 结语
HyperlinkButton明明很重要但WPF又不提供,幸好自己写起来也很简单。
这么简单的一个控件我也能水这么长的文章,我也很佩服我自己。
5. 参考
Hyperlink Class (System.Windows.Documents) Microsoft Docs
Process Class (System.Diagnostics) Microsoft Docs
ProcessStartInfo Class (System.Diagnostics) Microsoft Docs
6. 源码
[WPF自定义控件库] 给WPF一个HyperlinkButton的更多相关文章
- [WPF自定义控件库]了解WPF的布局过程,并利用Measure为Expander添加动画
1. 前言 这篇文章介绍WPF UI元素的两步布局过程,并且通过Resizer控件介绍只使用Measure可以实现些什么内容. 我不建议初学者做太多动画的工作,但合适的动画可以引导用户视线,提升用户体 ...
- WPF 如何创建自己的WPF自定义控件库
在我们平时的项目中,我们经常需要一套自己的自定义控件库,这个特别是在Prism这种框架下面进行开发的时候,每个人都使用一套统一的控件,这样才不会每个人由于界面不统一而造成的整个软件系统千差万别,所以我 ...
- [WPF自定义控件库] 关于ScrollViewer和滚动轮劫持(scroll-wheel-hijack)
原文:[WPF自定义控件库] 关于ScrollViewer和滚动轮劫持(scroll-wheel-hijack) 1. 什么是滚动轮劫持# 这篇文章介绍一个很简单的继承自ScrollViewer的控件 ...
- [WPF自定义控件库]使用WindowChrome自定义RibbonWindow
原文:[WPF自定义控件库]使用WindowChrome自定义RibbonWindow 1. 为什么要自定义RibbonWindow 自定义Window有可能是设计或功能上的要求,可以是非必要的,而自 ...
- [WPF自定义控件库] 让Form在加载后自动获得焦点
原文:[WPF自定义控件库] 让Form在加载后自动获得焦点 1. 需求 加载后让第一个输入框或者焦点是个很基本的功能,典型的如"登录"对话框.一般来说"登录" ...
- [WPF自定义控件库]以Button为例谈谈如何模仿Aero2主题
1. 为什么选择Aero2 除了以外观为卖点的控件库,WPF的控件库都默认使用"素颜"的外观,然后再提供一些主题包.这样做的最大好处是可以和原生控件或其它控件库兼容,而且对于大部分 ...
- [WPF自定义控件库]简单的表单布局控件
1. WPF布局一个表单 <Grid Width="400" HorizontalAlignment="Center" VerticalAlignment ...
- [WPF自定义控件库]使用WindowChrome的问题
1. 前言 上一篇文章介绍了使用WindowChrome自定义Window,实际使用下来总有各种各样的问题,这些问题大部分都不影响使用,可能正是因为不影响使用所以一直没得到修复(也有可能别人根本不觉得 ...
- [WPF自定义控件库] 自定义控件的代码如何与ControlTemplate交互
1. 前言 WPF有一个灵活的UI框架,用户可以轻松地使用代码控制控件的外观.例设我需要一个控件在鼠标进入的时候背景变成蓝色,我可以用下面这段代码实现: protected override void ...
随机推荐
- CF39D Cubical Planet-C++
银河系中没有你找不到的东西!有一颗形状为立方体的的行星正在绕着一颗形状为二十面体的恒星运转.现在我们让这颗行星的两个在同一条体对角线上的顶点置于(0,0,0)和(1,1,1)上.有两只苍蝇住在行星上. ...
- 洛谷P2384 最短路 题解
题目简叙: 请你求出从1到n的最短路径,其中最短路径☞这条路经过的边的权值的乘积. 题目分析: 很显然,这也是一道经典的单元最短路问题,首先我们可以考虑使用Floyd,显然,这是一个比较无脑简单的最短 ...
- Linux下移动图像监测系统——motion的移植及应用
移动图像监控主系统的开发 移动图像监控的原理方法: 通过获取摄像头图像,比较前后每一帧的图像数据,从而实现移动物体监控.所有移动监控均是如此,只是图像帧的比较算法不同. 移动图像监控系统的实现 选择开 ...
- JavaScript基础学习第六天
目标: 能够使用对象的方式处理数据 ☞ 代码预解析: 1. 变量提升 :当程序中遇到定义变量后,就会将该变量的定义提升到当前作用域的开始位置,不包括变量的赋值 2. 函数提升:当程序中遇到函数的声明时 ...
- solr集群
一.所需环境 1.linux系统(内存分大点) 2.JDK 3.zookeeper 4.solr 二.安装zookeeper 1.此次安装3个zookeeper 2.tar -zxf zookeepe ...
- Java 内存模型详解
概述 Java的内存模型(Java Memory Model )简称JMM.首先应该明白,Java内存模型是一个规范,主要规定了以下两点: 规定了一个线程如何以及何时可以看到其他线程修改过后的共享变量 ...
- wangEditor富文本编辑器使用及图片上传
引入js文件 <script type="text/javascript" src="style/js/wangEditor.min.js">< ...
- redis订阅者与发布者
#conding=utf-8 #一.创建redis类 文件名 RedisHelper import redis # conn=redis.Redis(host='127.0.0.1')# import ...
- 如何在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...
- 面向对象---prototype、__proto__、实例化对象三者之间的关系
1.构造函数 a.什么是构造函数? 解释:通过关键字new 创建的函数叫做构造函数 作用:用来创建一个对象 废话少说直接上代码,首先我们还是创建一个构造函数人类 然后我们在创建两个实例,一个凡尘 一个 ...