[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. 原始碼
HyperlinkButton.cs at master