带有圆角的 WPF 超链接图像

Question

问题 :如何在 WPF/XAML 中创建带圆角的超链接图像？

到目前为止，超链接图像(无圆角)的现有代码正在运行(见下文):

超链接图像 (WPF XAML)

<TextBlock Name="txtbFooterRight" >
    <Hyperlink Name="lnkImg" TextDecorations="None" 
     NavigateUri="http://webinfocentral.com" 
     ToolTip="Navigate to web page">
        <Image Name="someName" Source="some url" />
    </Hyperlink>
 </TextBlock>

背后的超链接图像代码(C#):

lnkImg.RequestNavigate += (s, e) => {Process.Start(e.Uri.ToString()); };

带圆角(无超链接)的图像控制实现为:

带圆角的图像(WPF/XAML):

<Border Name="brdRounded" BorderThickness="0" CornerRadius="10">
    <Border.Background >
        <ImageBrush>
            <ImageBrush.ImageSource>
                <BitmapImage UriSource="some Uri to .jpg" />
            </ImageBrush.ImageSource>
        </ImageBrush>
    </Border.Background>
</Border>

我需要“圆角”超链接图像(WPF/XAML)，可能结合上述技术。谢谢并恭祝安康，

注意:我已经接受了用户@lisp 发布的答案，并进行了小幅修复:边框背景颜色应与周围颜色相匹配，以避免轻微的“颜色泄漏”。向作者致敬!

单独说明:与 HTML5/CSS3 相比，使用 WPF/XAML 实现如此简单的效果相对困难，这是一次令人大开眼界的体验(例如，在圆角图像上基本相同的效果参见: http://infosoft.biz/SlideShowCSS.aspx )。微软的 WPF 人员似乎应该记下...

Answer 1

边框用于圆角。但是在您的情况下，如果您只是将 TextBlock 放在 Border 内，您将无法获得所需的效果。
在这里，使用边框使角变得透明。使用 Grid 以便 Border 精确地拉伸(stretch)到 TextBlock 的大小。

<Grid>
    <Border Name="CornersMask" Background="White" CornerRadius="20"/>
    <TextBlock>
        <TextBlock.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=CornersMask}"/>
        </TextBlock.OpacityMask>
        <Hyperlink ...>
            <Image Name="someName" Source="some url" />
        </Hyperlink>
    </TextBlock>
</Grid>

TextBlock 显示在 Border 的顶部，正因为如此和抗锯齿，您可能会在圆角边缘遇到轻微的白度。要么将边框背景更改为周围的背景颜色，要么将边框包含在另一个容器中，该容器将自动拉伸(stretch)它，例如网格的边框，并将其可见性设置为隐藏。

<Border Visibility="Hidden">
    <Border Name="CornersMask" Background="White" CornerRadius="20"/>
</Border>

这也解决了周围背景不是SolidColorBrush时的问题