WPF圆角超链接图片

Question

WPF圆角超链接图片

wpfxamlhyperlinkwpf-controlsrounded-corners

4

问题: 如何在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发布的答案，只进行了小修补:边框背景颜色应与周围颜色相匹配，以避免轻微的"颜色泄漏"。作者万岁！

另外提醒一下：使用WPF/XAML相对于HTML5/CSS3实现这样简单的效果相对困难(例如，在http://infosoft.biz/SlideShowCSS.aspx上看到基本上相同的圆角图像效果)。似乎微软的WPF团队应该注意到这一点...

- Alexander Bell

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lisp · Accepted Answer

边框用于实现圆角。但是在您的情况下，如果您只是将TextBlock放在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背景更改为周围的背景颜色，要么将Border包含在另一个容器中，该容器将自动拉伸它，例如Grid的Border，并将其可见性设置为Hidden。

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

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