帶有圓角的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超鏈接圖像

回答

相關問題