WPF用户控件在MainWindow调用实例

直接放代码吧

用户控件前端代码

<UserControl x:Class="WpfApp5.QCUserImage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Name="QCuserImage" >
    <Border BorderThickness="2" BorderBrush="White" CornerRadius="50" VerticalAlignment="Center">
        <Ellipse Width="65" Height="65">
            <Ellipse.Fill>
                <ImageBrush ImageSource="{Binding ElementName=QCuserImage,Path=Image}"/>
            </Ellipse.Fill>
        </Ellipse>
    </Border>
</UserControl>

用户控件后端代码

using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfApp5
{
    public partial class QCUserImage : UserControl
    {
        public QCUserImage()
        {
            InitializeComponent();
        }
        public ImageSource Image 
        {
            get { return (ImageSource)GetValue(ImageProperty); }
            set { SetValue(ImageProperty, value); }
        }

        public static readonly DependencyProperty ImageProperty = DependencyProperty.Register("Image",typeof(ImageSource), typeof(QCUserImage));
    }
}

MainWindow前端代码

<Window
    x:Class="WpfApp5.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:uc="clr-namespace:WpfApp5"
    Title="MainWindow"
    Width="1200"
    Height="830"
    mc:Ignorable="d">
<Grid>
    <uc:QCUserImage Margin="0 0 220 100" Height="69"  Width="69" Image="https://www.sswgal.com/wp-content/uploads/2022/04/%E5%B0%8F%E4%B8%91-150x150.jpg"/>
</Grid>