做电力产品的外贸网站,对我单位网站进行改版,wordpress 中文编辑器,网络规划设计师报名入口文章目录 相关连接前言需要实现的效果附加属性添加附加属性#xff0c;以Test修改FontSize为例依赖属性使用触发器使用直接操控 结论 控件模板#xff0c;在HandyControl的基础上面进行修改参考HandyControl的源码控件模板原型控件模板 控件模板触发器完整样式简单使用 结论 … 文章目录 相关连接前言需要实现的效果附加属性添加附加属性以Test修改FontSize为例依赖属性使用触发器使用直接操控 结论 控件模板在HandyControl的基础上面进行修改参考HandyControl的源码控件模板原型控件模板 控件模板触发器完整样式简单使用 结论 相关连接 WPF控件模板(6) WPF 附加属性 WPF教程附加属性 前言
今天说服了领导用WPF开发前端原因就是开发相对来说比较方便写小项目就不用前后端分离什么的了。反正就是有个机会写WPF了真开心。我已经写了一年的Uniapp了
需要实现的效果
就是想写一个简单的变色控件。
附加属性
如果想知道附加属性就得先了解依赖属性。详细的可以看我这篇文章 WPF 用户控件依赖属性赋值 添加附加属性以Test修改FontSize为例
知道了依赖属性之后我解释一下附加属性是什么意思。附加属性就是为了方便在原有的控件基础上面进行细微的修改。我们先保证编译通过
附加属性的快捷键是propa
简单给TextBox添加一个附加属性 public partial class TextBlockExtension{public static int GetTest(DependencyObject obj){return (int)obj.GetValue(TestProperty);}public static void SetTest(DependencyObject obj, int value){obj.SetValue(TestProperty, value);}// Using a DependencyProperty as the backing store for Test. This enables animation, styling, binding, etc...public static readonly DependencyProperty TestProperty DependencyProperty.RegisterAttached(Test, typeof(int), typeof(TextBox), new PropertyMetadata(10));}这样我们就能编译通过了。
TextBlock Text用户 wpfEx:TextBlockExtension.Test2/依赖属性使用
依赖属性有两种使用方法
触发器使用
样式定义 !--一个简单的FontSize修改--Style x:KeyUserSelectionTargetTypeTextBlock!--因为Triggers只有等于判断所以这里简单写了一下--Style.TriggersTrigger PropertywpfEx:TextBlockExtension.TestValue10Setter PropertyFontSizeValue10 //TriggerTrigger PropertywpfEx:TextBlockExtension.TestValue20Setter PropertyFontSizeValue20 //Trigger/Style.Triggers/Style简单使用 TextBlock Text用户wpfEx:TextBlockExtension.Test10 Style{StaticResource UserSelection}/TextBlockTextBlock Text用户wpfEx:TextBlockExtension.Test20Style{StaticResource UserSelection}/TextBlock直接操控
附加属性修改
//如果想直接操控元素得在PropertyMetadata进行操控。记得设置初始值
public static readonly DependencyProperty TestProperty DependencyProperty.RegisterAttached(Test, typeof(int), typeof(TextBox), new PropertyMetadata(10,(s, e) {//s是控件本身var mdp s as TextBlock;//如果控件是该元素的父组件类似于Grid和DockPanel就使用Parent来寻找这里不展开//var mdpParent (s as FrameworkElement).Parent as TextBlock;if (mdp ! null e.NewValue ! null){mdp.FontSize (int)e.NewValue;}}));!--如果想要预览生效需要重新编译一下--
TextBlock Text用户wpfEx:TextBlockExtension.Test15/TextBlock
TextBlock Text用户wpfEx:TextBlockExtension.Test20
/TextBlock
!--因为我们设置了默认值为10所以这里是10--
TextBlock Text用户
/TextBlock
!--优先级还是依赖属性高所以这里是30而不是默认值10--
TextBlock Text用户 FontSize30
/TextBlock结论
附加属性和依赖属性差不多就是声明麻烦一点。因为Get,Set是需要额外写的。
控件模板在HandyControl的基础上面进行修改
控件模板一般用于按钮我们只要会按钮的控件模板就可以了。 WPF控件模板(6) 参考HandyControl的源码 HandyControl 页面 HandyControl的Button有IconButton的样式源码。看一下还是挺有收获的。 参考样式代码 Style x:KeyButtonDashedBaseStyle BasedOn{StaticResource ButtonBaseStyle} TargetTypeButtonSetter PropertyBackground ValueTransparent/Setter PropertyTemplateSetter.ValueControlTemplate TargetTypeButtonhc:DashedBorder BorderDashArray3,2 BorderThickness{TemplateBinding BorderThickness} BorderBrush{TemplateBinding BorderBrush} BackgroundTransparent CornerRadius{Binding Path(hc:BorderElement.CornerRadius),RelativeSource{RelativeSource TemplatedParent}}StackPanel OrientationHorizontal HorizontalAlignment{TemplateBinding HorizontalContentAlignment} VerticalAlignment{TemplateBinding VerticalContentAlignment} Margin{TemplateBinding Padding}Path x:NamePathMain Width{TemplateBinding hc:IconElement.Width} Height{TemplateBinding hc:IconElement.Height} Fill{TemplateBinding Foreground} SnapsToDevicePixelsTrue StretchUniform Data{TemplateBinding hc:IconElement.Geometry}/ContentPresenter x:NameContentPresenterMain RecognizesAccessKeyTrue VerticalAlignmentCenter Margin6,0,0,0 SnapsToDevicePixels{TemplateBinding SnapsToDevicePixels}//StackPanel/hc:DashedBorderControlTemplate.TriggersTrigger PropertyContent Value{x:Null}Setter PropertyVisibility ValueCollapsed TargetNameContentPresenterMain//TriggerTrigger Propertyhc:IconElement.Geometry Value{x:Null}Setter PropertyVisibility ValueCollapsed TargetNamePathMain/Setter PropertyMargin Value0 TargetNameContentPresenterMain//Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter/Style控件模板原型
我们想写一个控件模板如果不是很熟练我们就先把控件模板的原型写出来这样更利于理解。 DockPanel!--这里仿照HandyControl使用Gemotery。IconPacks怎么转Gemotery可以看我的文章--Border DockPanel.DockTopWidth50Height50CornerRadius25BackgroundDeepSkyBluePath Data{wpfEx:MaterialGeometry KindBellRing}HorizontalAlignmentStretchVerticalAlignmentStretchSnapsToDevicePixelsTrueStretchUniformWidth25Height25FillWhite //BorderTextBlock TextTIM登录HorizontalAlignmentCenter //DockPanel控件模板
Style x:KeyUserSelectionTargetTypeRadioButtonBasedOn{StaticResource {x:Type RadioButton}}Setter PropertyTemplateSetter.Value!--先按照之前的样式粘贴一下--ControlTemplate TargetTypeRadioButtonDockPanelBorder DockPanel.DockTopWidth50Height50CornerRadius25BackgroundDeepSkyBluePath Data{wpfEx:MaterialGeometry KindBellRing}HorizontalAlignmentStretchVerticalAlignmentStretchSnapsToDevicePixelsTrueStretchUniformWidth25Height25FillWhite //BorderContentPresenter x:NameContentPresenterMainRecognizesAccessKeyTrueVerticalAlignmentCenterMargin6,0,0,0SnapsToDevicePixels{TemplateBinding SnapsToDevicePixels} //DockPanel/ControlTemplate/Setter.Value/Setter
/Style 然后里面能绑定的就绑定。也是照着HandyControl改的。注意这里的Banding用的是TemplateBinding 修改好的效果
!--一个简单的FontSize修改--
Style x:KeyUserSelectionTargetTypeRadioButtonBasedOn{StaticResource {x:Type RadioButton}}Setter PropertyTemplateSetter.Value!--先按照之前的样式粘贴一下--ControlTemplate TargetTypeRadioButtonDockPanelBorder DockPanel.DockTopWidth{TemplateBinding hc:IconElement.Width}Height{TemplateBinding hc:IconElement.Height}CornerRadius25Background{TemplateBinding Foreground}Path Data{TemplateBinding hc:IconElement.Geometry}HorizontalAlignmentStretchVerticalAlignmentStretchSnapsToDevicePixelsTrueStretchUniformWidth25Height25Fill{TemplateBinding Background} //BorderContentPresenter x:NameContentPresenterMainRecognizesAccessKeyTrueVerticalAlignmentCenterMargin6,0,0,0SnapsToDevicePixels{TemplateBinding SnapsToDevicePixels} //DockPanel/ControlTemplate/Setter.Value/Setter
/Style
简单使用
RadioButton ContentTIM登录GroupNameUserSelectStyle{StaticResource UserSelection}ForegroundDeepSkyBlueBackgroundWhitehc:IconElement.Geometry{wpfEx:MaterialGeometry KindAbTesting} / 控件模板触发器
完整样式
ResourceDictionary xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:wpfExclr-namespace:BluetoothWPF.WpfExtensionsxmlns:hchttps://handyorg.github.io/handycontrolxmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml!--一个简单的FontSize修改--Style x:KeyUserSelectionTargetTypeRadioButtonBasedOn{StaticResource {x:Type RadioButton}}Setter PropertyForegroundValueGray /Setter PropertyTemplateSetter.Value!--先按照之前的样式粘贴一下--ControlTemplate TargetTypeRadioButtonDockPanelBorder DockPanel.DockTopWidth70Height70CornerRadius35x:NameBackgroundPath Data{TemplateBinding hc:IconElement.Geometry}x:NameIconHorizontalAlignmentStretchVerticalAlignmentStretchSnapsToDevicePixelsTrueStretchUniformWidth35Height35FillGray //BorderContentPresenter x:NameContentPresenterMainRecognizesAccessKeyTrueVerticalAlignmentCenterHorizontalAlignmentCenterMargin6,0,0,0SnapsToDevicePixels{TemplateBinding SnapsToDevicePixels} //DockPanelControlTemplate.TriggersTrigger PropertyIsMouseOverValueTrueSetter TargetNameBackgroundPropertyBackgroundValue{Binding RelativeSource{RelativeSource TemplatedParent},PathBackground} /Setter TargetNameIconPropertyFillValueWhite //TriggerTrigger PropertyIsFocusedValueTrueSetter TargetNameBackgroundPropertyBackgroundValue{Binding RelativeSource{RelativeSource TemplatedParent},PathBackground} /Setter TargetNameIconPropertyFillValueWhite //Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter/StyleStyle TargetTypeRadioButtonx:KeyUserSelectioin_AdminBasedOn{StaticResource UserSelection}Setter PropertyHorizontalAlignmentValueRight /Setter PropertyMarginValue0 0 10 0 /Setter PropertyBackgroundValueDeepSkyBlue /Setter Propertyhc:IconElement.GeometryValue{wpfEx:MaterialGeometry KindAccountLock} /Setter PropertyContentValue管理员登录 //StyleStyle TargetTypeRadioButtonx:KeyUserSelectioin_UserBasedOn{StaticResource UserSelection}Setter PropertyHorizontalAlignmentValueLeft /Setter PropertyMarginValue10 0 0 0 /Setter PropertyBackgroundValueGreen /Setter Propertyhc:IconElement.GeometryValue{wpfEx:MaterialGeometry KindAccount} /Setter PropertyContentValue用户 //Style
/ResourceDictionary简单使用
RadioButton Style{StaticResource UserSelectioin_Admin} /
RadioButton Style{StaticResource UserSelectioin_User} /结论
HandyControl的源码看了真的是打开眼界但是WPF的Xaml有一个无法在内部简单计算的问题。比如我想WitdhHeight CornerRadius*2。我可能就要写个触发器了。我后面回去测试一下有没有方法可以在Xaml里面简单计算的。
