WPF Гиперссылка с закругленными углами

Question

Вопрос: Как создать гиперссылку Изображение с закругленными углами в WPF/XAML?

До сих пор существующий код для гиперссылке изображения (без скругленных углов) работают (см ниже):

гиперссылки Image (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 в Microsoft должны принять к сведению ...

Answer 1

Граница используется для закругленных углов. Но в вашем случае, если вы просто поместите 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 Visibility="Hidden"> 
    <Border Name="CornersMask" Background="White" CornerRadius="20"/> 
</Border> 

Это также решает проблему, когда окружающий фон не SolidColorBrush