WPF自定义控件如何实现(wpf,开发技术)

方式一：基于现有控件进行扩展，如基于button进行扩展，UI可直接用xmal进行编辑设计，逻辑用xaml.cs进行编辑

方法二：直接创建wpf自定义控件

本文用方法二开展自定义控件！！！

1.自定义控件的内容在代码cs文件中，自定义控件继承自Control，ui界面可在Genric.xaml中定义。

2.在Generic.xaml中定义控件界面

<StyleTargetType="{x:Typectrl:DevButton}"><SetterProperty="Template"><Setter.Value><ControlTemplateTargetType="{x:Typectrl:DevButton}"><BorderBackground="{TemplateBindingBackground}"BorderBrush="{TemplateBindingBorderBrush}"BorderThickness="{TemplateBindingBorderThickness}"><Grid><Grid.ColumnDefinitions><ColumnDefinitionWidth="0.1*"MaxWidth="5"/><ColumnDefinition/></Grid.ColumnDefinitions>//自定义控件中的组成，需要定义x:name,后台代码需要用到，button中的DevName是后台cs中定义的依赖属性<RectangleMargin="1"x:Name="statusLed"/><ButtonGrid.Column="1"x:Name="devBtn"Content="{TemplateBindingDevName}"/></Grid></Border></ControlTemplate></Setter.Value></Setter></Style>

上述界面中定义了两个控件，组成本自定义控件的外观显示。一个rectangle，用颜色对状态进行显示，一个button，是本自定义控件的主要内容，需要显示设备名称，Click事件/Command需要触发任务。

3.后台处理

3.1 定义自定义属性DevName

publicstringDevName{get{return(string)GetValue(DevNameProperty);}set{SetValue(DevNameProperty,value);}}publicstaticreadonlyDependencyPropertyDevNameProperty=DependencyProperty.Register("DevName",typeof(string),typeof(DevButton),newFrameworkPropertyMetadata("",newPropertyChangedCallback(OnDevNameChanged)));privatestaticvoidOnDevNameChanged(DependencyObjectsender,DependencyPropertyChangedEventArgse){DevButtonctrl=senderasDevButton;ctrl.DevName=e.NewValue.ToString();}

3.2 定义与前端界面UI元素对应的信息

privateRectanglestatusLed;privateButtondevBtn;publicoverridevoidOnApplyTemplate(){//备用方法Template.FindName(DownButtonKey,this)asButton;statusLed=GetTemplateChild("statusLed")asRectangle;devBtn=GetTemplateChild("devBtn")asButton;devBtn.Click+=DevBtn_Click;base.OnApplyTemplate();}

依据控件名称查找模板中的控件，并注册button的click事件

3.3 定义事件

privatevoidDevBtn_Click(objectsender,RoutedEventArgse){MessageBox.Show(DevName);}

自定义控件主要就是上述几步。总体代码如下：

usingSystem;usingSystem.Collections.Generic;usingSystem.Globalization;usingSystem.Linq;usingSystem.Text;usingSystem.Threading.Tasks;usingSystem.Windows;usingSystem.Windows.Controls;usingSystem.Windows.Data;usingSystem.Windows.Documents;usingSystem.Windows.Input;usingSystem.Windows.Media;usingSystem.Windows.Media.Imaging;usingSystem.Windows.Navigation;usingSystem.Windows.Shapes;namespaceWpfApp2{///<summary>///Author:yut2022-12-21///Function:自定义控件，用于设备的启停控制，同时显示设备的运行状态///<summary>publicclassDevButton:Control{publicDevButton(){SetCurrentValue(WidthProperty,100d);SetCurrentValue(HeightProperty,25d);SetCurrentValue(BackgroundProperty,Brushes.Yellow);}staticDevButton(){DefaultStyleKeyProperty.OverrideMetadata(typeof(DevButton),newFrameworkPropertyMetadata(typeof(DevButton)));}privateRectanglestatusLed;privateButtondevBtn;publicoverridevoidOnApplyTemplate(){statusLed=GetTemplateChild("statusLed")asRectangle;devBtn=GetTemplateChild("devBtn")asButton;devBtn.Click+=DevBtn_Click;base.OnApplyTemplate();}#region自定义属性publicintDevId{get{return(int)GetValue(DevIdProperty);}set{SetValue(DevIdProperty,value);}}publicstaticreadonlyDependencyPropertyDevIdProperty=DependencyProperty.Register("DevId",typeof(int),typeof(DevButton),newFrameworkPropertyMetadata(-1,newPropertyChangedCallback(OnDevIdChanged)));privatestaticvoidOnDevIdChanged(DependencyObjectsender,DependencyPropertyChangedEventArgse){DevButtonctrl=(DevButton)sender;ctrl.DevId=(int)e.NewValue;}publicstringDevName{get{return(string)GetValue(DevNameProperty);}set{SetValue(DevNameProperty,value);}}publicstaticreadonlyDependencyPropertyDevNameProperty=DependencyProperty.Register("DevName",typeof(string),typeof(DevButton),newFrameworkPropertyMetadata("",newPropertyChangedCallback(OnDevNameChanged)));privatestaticvoidOnDevNameChanged(DependencyObjectsender,DependencyPropertyChangedEventArgse){DevButtonctrl=senderasDevButton;ctrl.DevName=e.NewValue.ToString();}publicintDevStatus{get{return(int)GetValue(DevStatusProperty);}set{SetValue(DevStatusProperty,value);}}publicstaticreadonlyDependencyPropertyDevStatusProperty=DependencyProperty.Register("DevStatus",typeof(int),typeof(DevButton),newFrameworkPropertyMetadata(-1,newPropertyChangedCallback(OnDevStatusChanged)));privatestaticvoidOnDevStatusChanged(DependencyObjectsender,DependencyPropertyChangedEventArgse){DevButtonctrl=(DevButton)sender;ctrl.DevStatus=(int)e.NewValue;ctrl.StatusBrush=(ctrl.DevStatus>0)?Brushes.Green:Brushes.LightGray;}publicBrushStatusBrush{get{return(Brush)GetValue(StatusBrushProperty);}set{SetValue(StatusBrushProperty,value);}}publicstaticreadonlyDependencyPropertyStatusBrushProperty=DependencyProperty.Register("StatusBrush",typeof(Brush),typeof(DevButton),newFrameworkPropertyMetadata(Brushes.LightGray));#endregionprivatevoidDevBtn_Click(objectsender,RoutedEventArgse){MessageBox.Show(DevName);}}}

<ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:ctrl="clr-namespace:WpfApp2"><StyleTargetType="{x:Typectrl:DevButton}"><SetterProperty="Template"><Setter.Value><ControlTemplateTargetType="{x:Typectrl:DevButton}"><BorderBackground="{TemplateBindingBackground}"BorderBrush="{TemplateBindingBorderBrush}"BorderThickness="{TemplateBindingBorderThickness}"><Grid><Grid.ColumnDefinitions><ColumnDefinitionWidth="0.1*"MaxWidth="5"/><ColumnDefinition/></Grid.ColumnDefinitions><!--Fill="{TemplateBindingDevStatus,Converter={StaticResourceIntToBrushes}}"--><RectangleMargin="1"x:Name="statusLed"Fill="{TemplateBindingStatusBrush}"/><ButtonGrid.Column="1"x:Name="devBtn"Content="{TemplateBindingDevName}"/></Grid></Border></ControlTemplate></Setter.Value></Setter></Style></ResourceDictionary>

<Windowx:Class="WpfApp2.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:WpfApp2"mc:Ignorable="d"Title="MainWindow"Height="450"Width="800"><Grid><StackPanel><TextBlockText="******************"/><local:DevButtonDevName="电机"DevStatus="2"/><TextBlockText="******************"/></StackPanel></Grid></Window>

运行效果如下：