带圆角的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:http ://infosoft.biz/SlideShowCSS.aspx).似乎微软的WPF人员应该注意......

Answer 1

边框用于圆角.但在你的情况下,如果你只是将TextBlock放在Border中,你将无法获得所需的效果.在这里角落使用边框透明.使用网格使Border完全伸展到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的顶部,由于这一点和抗锯齿,您可能会在圆形边缘上遇到轻微的白色.将边框背景更改为周围的背景颜色,或将边框包含在另一个自动伸展的容器中,例如网格边框,并将其设置为隐藏的可见性.

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

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