WPF : Rounded-Corners Images

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="Black">
    <!-- Rounded yellow border -->
    <Border BorderThickness="3" BorderBrush="Yellow" CornerRadius="10" Padding="2"
        HorizontalAlignment="Center" VerticalAlignment="Center">
      <Grid>
         <!-- Rounded mask (stretches to fill Grid) -->
         <Border Name="mask" Background="White" CornerRadius="7"/>
         <!-- Main content container -->
         <StackPanel>
             <!-- Use a VisualBrush of 'mask' as the opacity mask -->
             <StackPanel.OpacityMask>
                 <VisualBrush Visual="{Binding ElementName=mask}"/>
             </StackPanel.OpacityMask>
             <!-- Any content -->
             <Image Source="http://chriscavanagh.files.wordpress.com/2006/12/chriss-blog-banner.jpg"/>
             <Rectangle Height="50" Fill="Red"/>
             <Rectangle Height="50" Fill="White"/>
             <Rectangle Height="50" Fill="Blue"/>
         </StackPanel>
      </Grid>
    </Border>
</Page>

此XAML来自WPF – Easy rounded corners for anything，但不适用于我=(

<Border Canvas.Left="55"
        Canvas.Top="30"
        Width="100"
        Height="Auto"
        Margin="12,12,8,0"
        VerticalAlignment="Top"
        BorderBrush="#FF3B5998"
        BorderThickness=".5"
        CornerRadius="18">
    <Border.Effect>
        <DropShadowEffect BlurRadius="5"
                          Opacity=".5"
                          ShadowDepth="3" />
    </Border.Effect>
    <Border Name="ReceiverColor"
            BorderBrush="#FF96B2E4"
            BorderThickness="6"
            CornerRadius="15">
        <Border Name="Mask"
                BorderBrush="#FF3B5998"
                BorderThickness=".5"
                CornerRadius="13">
                <StackPanel>
                    <StackPanel.OpacityMask>
                        <VisualBrush Visual="{Binding ElementName=Mask}" />
                    </StackPanel.OpacityMask>
                    <Image Name="Receiver" />
                </StackPanel>
        </Border>
    </Border>
</Border>

---编辑---
我将边框大小设置为自动，并将图像源从链接更改为图像
当窗口加载的边框大小变为图像大小但未显示图像时!!!

最佳答案

您忘记了构成蒙版和图像同级的网格，并将图像嵌套在蒙版中。而您忘记设置 mask 的背景。

这有效:

<Grid>
    <Border Canvas.Left="55"
            Canvas.Top="30"
            Width="100"
            Height="Auto"
            Margin="12,12,8,0"
            VerticalAlignment="Top"
            BorderBrush="#FF3B5998"
            BorderThickness=".5"
            CornerRadius="18">
        <Border.Effect>
            <DropShadowEffect BlurRadius="5"
                              Opacity=".5"
                              ShadowDepth="3" />
        </Border.Effect>
        <Border Name="ReceiverColor"
                BorderBrush="#FF96B2E4"
                BorderThickness="6"
                CornerRadius="15">
            <Grid>
                <Border Name="Mask"
                        Background="White"
                        BorderBrush="#FF3B5998"
                        BorderThickness=".5"
                        CornerRadius="13">
                </Border>
                <StackPanel>
                    <Image Name="Receiver"
                           Source="/Images/test.jpg" />
                    <StackPanel.OpacityMask>
                        <VisualBrush Visual="{Binding ElementName=Mask}" />
                    </StackPanel.OpacityMask>
                </StackPanel>
            </Grid>
        </Border>
    </Border>
</Grid>

关于WPF : Rounded-Corners Images，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6081800/