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发布的答案，只需稍加修复：边框背景颜色应与周围颜色相匹配，以避免轻微的“颜色泄漏”。感谢作者！

在一个单独的 note 上：与使用HTML5 / CSS3相比，使用WPF / XAML实现这种简单效果相对困难是一个令人大开眼界的经验（参见示例，基本上对圆角图像的影响相同： 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

时，这也解决了这个问题

带圆角的WPF超链接图像

1 个答案: