带有圆角的WPF超链接图像

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

到目前为止，现有用于超链接的图像代码（没有圆角）在工作（见下文）：

超链接的图像（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人应该注意...

来源

2013-05-13 Alex Bell

边框用于圆角。但在你的情况下，如果你只是把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

来源

2013-05-13 12:18:30 lisp

感谢您的答复，我会接受这个答案，但你可以解释说，轻微的背景“颜色泄漏”到图像区域，即使模式“拉伸=”UniformToFill“（或任何其他设置）？如果有一种方法来解决它？Rgds， – 2013-05-13 13:36:39

@AlexBell我希望我正确理解你的问题（见编辑）顺便说一句 - 这兄弟的边界作为一个不透明的据我所知，蒙版通常用于图像的圆角。 – lisp 2013-05-13 14:12:22

将边框背景设置为周围（容器）的颜色就足够了。答案已被接受，谢谢和问候， – 2013-05-13 16:39:42

带有圆角的WPF超链接图像

回答

相关问题