欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

一个好看的WPF开源控件库——PanuonUI自定义样式控件库

程序员文章站 2024-03-24 08:59:22
...

PanuonUI

这是一个开源项目,版权归本喵所有。该开源项目遵循Apache2.0许可协议,简单点说就是不限制使用途径(商业也可以用),但不允许抄袭。
GitHub传送门:https://github.com/Ruris/PanuonUI

本开源库目前仍处于开发中,代码请自行克隆研究。本系列的博客是解说自定义依赖属性的。该库依旧在更新中,用的爽的话别忘了Star一下哈。
目前已有的控件:
(截止2018.5.10,共有7个)
ScrollViewer
Window、MessageBox
Button、TextBox、CheckBox、RadiuButton

正在制作:PasswordBox、BarChart
项目内的控件浏览器程序使用了Caliburn.Micro作为解耦工具,看不懂也不会影响使用。
除此之外,项目还使用了FontAwesome字体(嵌入在示例项目中)。

(0)PUWindow 窗体控件

这是一个融合了遮罩层、动画渐入渐出的窗体控件。
PanuonUI Browser是一个派生自PUWindow的窗体。
如下图的示例所示,通过点击按钮打开一个PUMessageBox控件(该控件同样继承自PUWindow,并且调用该控件的窗口也必须为PUWindow,否则会抛出异常)。在使用PUMessageBox的时候不需要设置遮罩层,调用ShowDialog的时候它会自动打开父窗体的遮罩层。
一个好看的WPF开源控件库——PanuonUI自定义样式控件库
通常情况下,我建议关闭主窗体的启动动画,或者打开把主窗体的ShowDelay属性设为True。在上面的GIF中看到的就是主窗体ShowDelay为True的状态,启动时页面是白色的,动画执行完才会显示内容。这样可以保证启动动画不会卡顿。
你可以像下面这样使用它:

<pu:PUWindow 
    ...
    xmlns:pu="clr-namespace:Panuon.UI;assembly=Panuon.UI"
    ...
    Title="HelloWorld!" Height="450" Width="800" AnimationStyle="Gradual" ShowDelay="True">
    <pu:PUWindow.Icon>
        <TextBlock Text="" FontSize="20" FontFamily="{StaticResource FontAwesome}"></TextBlock>
    </pu:PUWindow.Icon>

</pu:PUWindow>

AnimationStyle:表示动画类型,AnimationStyles枚举类型,包括Scale(缩放,默认的)、Gradual(渐变画刷,示例例中使用的,类似于QQ启动时)、Fade(淡入淡出)。
AnimateInAnimateOut:表示开/关启动关闭动画,bool类型,默认值都为True(开启)。
ShowDelay:表示延迟显示内容,bool类型,默认值为False(不延迟显示)。
NavbarHeightNavButtonHeightNavButtonWidthNavButtonBackground:表示控制栏的高度、控制栏按钮的高度、控制栏按钮的宽度、控制栏的背景色。前三者为double类型,默认值分别为30、30、40;背景色为SolidColorBrush类型,默认值为White。
Header:WPF的Title属性会同时作用于任务栏名称和左上角的名称。当你希望他们不同时,可以通过单独设定Header属性来指定左上角的标题。如果不设置(Header的默认值是null),左上角标题仍会与任务栏名称共用Title属性。
Icon:表示显示在左上角标题前的图标,object类型,因此你可以将其设定为任何元素(比如图片)。
BorderCornerRadius:圆角大小,CornerRadius类型,可以像Thickness一样进行设置,默认值为0。
ShowCover:显示遮罩层,bool类型,默认值为False。将其设置为true,将会动画渐入遮罩层。
HideNavButtons:隐藏右上角的三个按钮,bool类型,默认值为False。如果你只是想禁用最大化和最小化按钮,只需要修改ResizeMode属性即可。

(1)按钮篇

一个好看的WPF开源控件库——PanuonUI自定义样式控件库

这些控件实际上是同一种控件,只是通过设置属性改变了效果而已。我添加的自定义依赖属性有三个。
ButtonStyle:
按钮样式,ButtonStyles枚举类型,包括General(默认值),Hollow和Outline
BorderCornerRadius:
圆角大小,CornerRadius类型,可以像Thickness一样进行设置,默认值为0
CoverBrush:
鼠标悬浮时的遮罩层颜色,SolidColorBrush类型,默认值为白色(General)、灰黑色(Hollow和Outline)

(2)输入框

一个好看的WPF开源控件库——PanuonUI自定义样式控件库
TextBoxStyle:
输入框样式,TextBoxStyles枚举类型,包括General(默认的)和IconGroup两个
BorderCornerRadius:
圆角大小,CornerRadius类型,默认值为0
ShadowColor:
输入框**时的阴影颜色,Color类型,默认值为灰色。
WaterMark:
输入框的水印,String类型,默认值为空。
Icon:
IconGroup样式下输入框前面的图标,string类型,仅支持FontAwesome字体。
IconWidth:
IconGroup样式下输入框前面的图标宽度,double类型,默认值30。

(3)CheckBox复选框

一个好看的WPF开源控件库——PanuonUI自定义样式控件库
CheckBoxStyle:
复选框样式,CheckBoxStyles枚举类型,包括General(默认值),Switch和Branch
BorderCornerRadius:
圆角大小,CornerRadius类型,可以像Thickness一样进行设置,默认值为0 (Switch样式的CornerRadius是自动计算的,不需要手动输入)
InnerHeight和InnerWidth:
内部选择框的长和宽,double类型,默认值为20(Switch样式的默认值分别为25和30)
CoverBrush:
鼠标悬浮时的遮罩层颜色,SolidColorBrush类型,默认值为灰黑色(Swtich样式的背景色是由Background设置的,此属性对其无效。)

(4)RadioButton单选按钮

一个好看的WPF开源控件库——PanuonUI自定义样式控件库
RadioButtonStyle:
单选按钮样式,RadioButtonStyles枚举类型,包括General(默认值),Switch和Branch
BorderCornerRadius:
圆角大小,CornerRadius类型,默认值为10(Switch样式的CornerRadius是自动计算的,不需要手动输入)
InnerHeight和InnerWidth:
内部选择框的长和宽,double类型,默认值为20(Switch样式的默认值分别为25和30)
CoverBrush:
鼠标悬浮时的遮罩层颜色,SolidColorBrush类型,默认值为灰黑色(Swtich样式的背景色是由Background设置的,此属性对其无效。)