改变HyperlinkButton的下划线(Silverlight)

HyperlinkButton默认下划线效果如左图所示，跟字非常吻合，不清晰，于是修改HyperlinkButton的样式调整下划线的位置

微软的原样式只是增加TextBlock，利用TextBlock的TextDecorations="Underline"来显示下划线，这效果显示得字重叠，下划线不清晰。

以下是微软生成的部分代码：

<Style ...>
...
<Setter Property="Template">
...
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Visibility" Storyboard.TargetName="UnderlineTextBlock">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
...
<TextBlock x:Name="UnderlineTextBlock"
Text="{TemplateBinding Content}" TextDecorations="Underline" Visibility="Collapsed" .../>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" .../>
...
</Style>

本样式是利用Border来代替TextBlock的下划线，修改代码如下：

<Style x:Key="HyperlinkButtonStyle1" TargetType="HyperlinkButton">
<Setter Property="Foreground" Value="#FF73A9D8"/>
<Setter Property="Padding" Value="2,0,2,0"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HyperlinkButton">
<Grid Background="{TemplateBinding Background}" Cursor="{TemplateBinding Cursor}" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnderlineBlock"
Storyboard.TargetProperty="BorderThickness">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0 0 0 1</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="FocusVisualElement"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<!-- <TextBlock x:Name="UnderlineTextBlock" 删除对程序没影响 -->
<TextBlock x:Name="DisabledOverlay" Text="{TemplateBinding Content}" Visibility="Collapsed" Canvas.ZIndex="1" .../>
<Border x:Name="UnderlineBlock" HorizontalAlignment="Stretch"
BorderBrush="{TemplateBinding Foreground}" BorderThickness="0" Height="20" >
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" .../>
</Border>
<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Opacity="0"
Stroke="#00FFFFFF" StrokeThickness="0" Visibility="Collapsed"/>
</Grid>

</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

------ 记录此文，为日后项目中使用----