WPF Image设置为圆形,并有叠加控件

<Window x:Class="_87Image圆形并有上层控件叠加.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_87Image圆形并有上层控件叠加"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Canvas>
            <Image Source="/profilePhoto.jpeg" Width="100" Height="100" Panel.ZIndex="0">
                <Image.Clip>
                    <EllipseGeometry RadiusX="50" RadiusY="50" Center="50,50"/>
                </Image.Clip>
            </Image>
            <TextBlock Text="小小米" Canvas.Top="90" Canvas.Left="30" Panel.ZIndex="1" VerticalAlignment="Center"></TextBlock>
        </Canvas>        
    </Grid>
</Window>

程序效果图如下:
WPF Image设置为圆形,并有叠加控件_第1张图片
注:
Panel.ZIndex 值越大,就会显示在最上层
WPF Image设置为圆形,并有叠加控件_第2张图片
WPF Image设置为圆形,并有叠加控件_第3张图片
WPF Image设置为圆形,并有叠加控件_第4张图片

你可能感兴趣的:(WPF,控件,wpf)