带圆角的WPF超链接图像

带圆角的WPF超链接图像,wpf,xaml,hyperlink,wpf-controls,rounded-corners,Wpf,Xaml,Hyperlink,Wpf Controls,Rounded Corners,问题:如何在WPF/XAML中创建圆角超链接图像 到目前为止,超链接图像(无圆角)的现有代码正在运行(见下文): 超链接图像(WPF XAML) 圆角图像控制(无超链接)的实现方式如下: 圆角图像(WPF/XAML): lnkImg.RequestNavigate += (s, e) => {Process.Start(e.Uri.ToString()); }; <Border Name="brdRounded" BorderThickness="0" CornerRadius="

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

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

超链接图像(WPF XAML)

圆角图像控制(无超链接)的实现方式如下:

圆角图像(WPF/XAML):

lnkImg.RequestNavigate += (s, e) => {Process.Start(e.Uri.ToString()); };
<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),可能是结合了上述技术。感谢和问候

注意:我已经接受了user@lisp发布的答案,只是做了一个小小的修改:边框背景颜色应该与周围的颜色相匹配,以避免轻微的“颜色泄漏”。作者的荣誉


另一方面:与HTML5/CSS3相比,使用WPF/XAML实现如此简单的效果相对困难,这是一次令人大开眼界的体验(例如,请参见:上的圆角图像基本相同的效果)。微软的WPF人员似乎应该注意一下……

边框用于圆角。但在您的情况下,如果您只是将TextBlock放在边框内,您将无法获得所需的效果。 在这里,使用边框使拐角透明。网格的使用使得边框精确地延伸到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 Visibility="Hidden">
    <Border Name="CornersMask" Background="White" CornerRadius="20"/>
</Border>


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

谢谢你的回答,我接受这个答案,但是你能解释一下,即使在模式“Stretch=”UniformToFill“(或任何其他设置)下,轻微的背景“颜色漏入”图像区域吗?如果有办法解决它?Rgds,@AlexBell我希望我正确地理解了你的问题(参见编辑)。顺便说一句-据我所知,这个用作不透明遮罩的同级边框经常用于图像的圆角。将边框背景设置为周围(容器)颜色就足够了。答案是可以接受的,谢谢并致以问候,@Evgeny我不知道,但我希望非常好的不透明度遮罩被广泛使用,我从来没有收到过任何效率方面的投诉。WPF通常在图形效果方面非常出色。
<Border Visibility="Hidden">
    <Border Name="CornersMask" Background="White" CornerRadius="20"/>
</Border>