WPF Blend 自定义控件

最新推荐文章于 2025-09-10 16:21:02 发布

原创最新推荐文章于 2025-09-10 16:21:02 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

C#知识点专栏收录该内容

96 篇文章

订阅专栏

本文介绍如何利用WPF Blend进行自定义控件的设计，包括步骤1：使用Blend进行界面设计，步骤2：为控件添加专属属性以增强功能，以及步骤3：在MainWindow中成功调用并应用自定义控件。

部署运行你感兴趣的模型镜像

在这里插入图片描述

#1.使用Blend 设计控件

<UserControl x:Class="WpfApp25.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp25"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <local:StatusColorConverter x:Key="statusColorConverter"></local:StatusColorConverter>
    </UserControl.Resources>
    <Grid>
        <Ellipse HorizontalAlignment="Left" Height="100" Stroke="#FFF5F2F2" VerticalAlignment="Top" Width="100" StrokeThickness="5"
      Fill="{Binding StatusP, Converter={StaticResource statusColorConverter},UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:UserControl1}}}">
        </Ellipse>
    </Grid>
</UserControl>

#2.给控件添加自定义属性

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp25
{

    public enum Status { Normal, Good, Bad }

    public class StatusColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is Status && value != null)
            {
                Status status = (Status)value;
                var color = Colors.Gray;
                switch (status)
                {
                    case Status.Good:
                        color = Colors.Green; break;
                    case Status.Bad:
                        color = Colors.Red; break;
                }
                return  new LinearGradientBrush(color,Colors.White,100.0);
            }

            return null;

        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }


    public partial class UserControl1 : UserControl
    {
        public Status StatusP
        {
            get { return (Status)GetValue(StatusPProperty); }
            set { SetValue(StatusPProperty, value); }
        }
        public static readonly DependencyProperty StatusPProperty =
            DependencyProperty.Register("StatusP", typeof(Status), typeof(UserControl1), new PropertyMetadata(Status.Normal));
        public UserControl1()
        {
            InitializeComponent();
            StatusP = Status.Bad;
        }
    }
}

#3.MainWindow添加调用

<Window x:Class="WpfApp25.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:WpfApp25"
 
        mc:Ignorable="d"
        Title="MainWindow" Height="522" Width="814">
    <Grid x:Name="xgrid" Background="#FFDCD3D3">
        <local:UserControl1 x:Name="xbtn"  Margin="110,190,577,129" ></local:UserControl1>

        <Button  Click="Button_Click" Content="Normal" HorizontalAlignment="Left" Height="73.443" Margin="341.846,150.596,0,0" VerticalAlignment="Top" Width="233.679"/>
        <Button  Click="Button_Click1" Content="Green" HorizontalAlignment="Left" Height="73" Margin="342,365,0,0" VerticalAlignment="Top" Width="234"/>
        <Button  Click="Button_Click2" Content="Red" HorizontalAlignment="Left" Height="73" Margin="342,255,0,0" VerticalAlignment="Top" Width="234"/>
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp25
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            xbtn.StatusP = Status.Normal;
        }

        private void Button_Click1(object sender, RoutedEventArgs e)
        {
            xbtn.StatusP = Status.Good;
        }

        private void Button_Click2(object sender, RoutedEventArgs e)
        {
            xbtn.StatusP = Status.Bad;
        }
    }
}