好用的轻量级UI控件库

程序开发者使用第三方UI库更多是为了方便且省事把控件植入到项目中去，不用去研究UI控件实现细节，同时还有基础属性设置改变其样式。这样更快速开发项目，节省不少时间。

Newbeecoder.UI控件库也是基于这个架构理念开发的，在Windows平台上用wpf开发项目具有天然的优势。

本篇文章主要分两部分介绍第三方Newbeecoder.UI库，第一部分介绍UI库使用方式，第二部分简单介绍下开源控件库框架和代码结构。

为了方便用户了解软件功能，先视频简单演示下控件库界面和程序框架。

开源框架Newbeecoder.UI

Demo下载：

Newbeecoder.UI开源项目https://share.weiyun.com/py6W1dcK

一、Newbeecoder.UI控件库中有四种类型Button：基础按钮（NbButton）、重复按钮（NbRepeatButton）、多选按钮（NbToggleButton ）、单选按钮（NbRadioButton）。

在wpf界面中调用普通按钮样式、假如要改成重复按钮或多选按钮，只需要把名称NbRepeatButton替换即可，Style名称保持不变。

<NbButton Style="{DynamicResource NormalButtonStyle}" Margin="5" Content="一般按钮"/>
<NbButton Style="{DynamicResource DefaultButtonStyle}" Margin="5" Content="默认按钮"/>
<NbButton Style="{DynamicResource SuccessButtonStyle}" Margin="5" Content="成功按钮"/>
<NbButton Style="{DynamicResource InfoButtonStyle}" Margin="5" Content="信息按钮"/>
<NbButton Style="{DynamicResource WarningButtonStyle}" Margin="5" Content="警告按钮"/>
<NbButton Style="{DynamicResource DangerButtonStyle}" Margin="5" Content="危险按钮"/>

二、Newbeecoder.UI中选项框使用也非常方便，UI库选项框有三种，方形单选框，圆形单选框，多选框。

单选框调用样式代码，注意需要设置GroupName为同一个名称。

<NbRadioBox Style="{DynamicResource DefaultRadioBoxStyle}" Margin="5" Content="A. 0" GroupName="Ans1"/>
<NbRadioBox Style="{DynamicResource DefaultRadioBoxStyle}" Margin="5" Content="B. 1" GroupName="Ans1"/>
<NbRadioBox Style="{DynamicResource DefaultRadioBoxStyle}" Margin="5" Content="C. 2" GroupName="Ans1"/>
<NbRadioBox Style="{DynamicResource DefaultRadioBoxStyle}" Margin="5" Content="D. 4" GroupName="Ans1"/>

调用复选框样式代码：

<NbCheckBox Style="{DynamicResource DefaultCheckBoxStyle}" Margin="5" Content="A. -1"/>
<NbCheckBox Style="{DynamicResource DefaultCheckBoxStyle}" Margin="5" Content="B. -2"/>
<NbCheckBox Style="{DynamicResource DefaultCheckBoxStyle}" Margin="5" Content="C. 1"/>
<NbCheckBox Style="{DynamicResource DefaultCheckBoxStyle}" Margin="5" Content="D. 2"/>

三、有多种输入框样式，所有输入框样式默认都使用一个样式。

根据开发需求在使用中灵活使用输入框参数设置。调用示例如下：

<TextBlock Text="常规：" Margin="5"/>
<NbTextBox Style="{DynamicResource DefaultTextBoxStyle}" Margin="5"/>
<NbTextBox Style="{DynamicResource DefaultTextBoxStyle}" Margin="5" Placeholder="带有提示文字的输入框"/>
<NbTextBox Style="{DynamicResource DefaultTextBoxStyle}" Margin="5" Placeholder="多行模式" AcceptsReturn="True"/>
<TextBlock Text="禁用：" Margin="5"/>
<NbTextBox Style="{DynamicResource DefaultTextBoxStyle}" Margin="5" Text="内容" IsEnabled="False"/>
<TextBlock Text="只读：" Margin="5"/>
<NbTextBox Style="{DynamicResource DefaultTextBoxStyle}" Margin="5" Text="内容" IsReadOnly="True"/>
<TextBlock Text="整数：" Margin="5"/>
<NbTextBox Style="{DynamicResource DefaultTextBoxStyle}" Margin="5" InputMode="Int"/>
<NbTextBox Style="{DynamicResource DefaultTextBoxStyle}" Margin="5" InputMode="Int" MinInt="5" MaxInt="10" Placeholder="限制范围[5,10]输入"/>
<TextBlock Text="数字：" Margin="5"/>
<NbTextBox Style="{DynamicResource DefaultTextBoxStyle}" Margin="5" InputMode="Number"/>
<NbTextBox Style="{DynamicResource DefaultTextBoxStyle}" Margin="5" InputMode="Number" MinNumber="5.01" MaxNumber="10.09" NumberDecimals="2" Placeholder="限制范围[5.01,10.09]输入，限制小数位数2"/>
<TextBlock Text="密码：" Margin="5"/>
<NbTextBox Style="{DynamicResource DefaultTextBoxStyle}" Margin="5" InputMode="Password" Placeholder="请输入密码"/>
<TextBlock Text="IP输入：" Margin="5"/>
<NbIpBox Width="180" HorizontalAlignment="Left"/>

四、VS自带的下拉框能满足基本要求，但下拉框没有搜索和清除功能，所以在Newbeecoder.UI中增加这两项功能。

<TextBlock Text="可编辑" Margin="5"/>
<NbComboBox Style="{DynamicResource DefaultComboBoxStyle}" Margin="5" IsEditable="True" EnabledSearchItems="True" EnabledSearchIgnoreCase="True" ShowClearButton="False">
    <NbComboBoxItem Content="橘子"/>
    <NbComboBoxItem Content="苹果"/>
    <NbComboBoxItem Content="香蕉"/>
    <NbComboBoxItem Content="草莓"/>
    <NbComboBoxItem Content="梨子"/>
</NbComboBox>
<TextBlock Text="不可编辑" Margin="5"/>
<NbComboBox Style="{DynamicResource DefaultComboBoxStyle}" Margin="5" IsEditable="False" EnabledSearchItems="True" EnabledSearchIgnoreCase="True" ShowClearButton="False">
    <NbComboBoxItem Content="橘子"/>
    <NbComboBoxItem Content="苹果"/>
    <NbComboBoxItem Content="香蕉" IsSelected="True"/>
    <NbComboBoxItem Content="草莓"/>
    <NbComboBoxItem Content="梨子"/>
</NbComboBox>
<TextBlock Text="带清除按钮" Margin="5"/>
<NbComboBox Style="{DynamicResource DefaultComboBoxStyle}" Margin="5" IsEditable="False" EnabledSearchItems="True" EnabledSearchIgnoreCase="True" ShowClearButton="True">
    <NbComboBoxItem Content="橘子"/>
    <NbComboBoxItem Content="苹果"/>
    <NbComboBoxItem Content="香蕉" IsSelected="True"/>
    <NbComboBoxItem Content="草莓"/>
    <NbComboBoxItem Content="梨子"/>
</NbComboBox>
<TextBlock Text="禁用" Margin="5"/>
<NbComboBox Style="{DynamicResource DefaultComboBoxStyle}" Margin="5" IsEditable="False" EnabledSearchItems="True" EnabledSearchIgnoreCase="True" ShowClearButton="True" IsEnabled="False">
    <NbComboBoxItem Content="橘子"/>
    <NbComboBoxItem Content="苹果"/>
    <NbComboBoxItem Content="香蕉" IsSelected="True"/>
    <NbComboBoxItem Content="草莓"/>
    <NbComboBoxItem Content="梨子"/>
</NbComboBox>

五、日期时间控件在WPF只能选择日期，没有选择时间功能，为了满足用户需求，在日期控件加入选择日期+时间

在日期时间控件设置DateTimePickerMode模式，比如要显示日期+时间设置DateTimePickerMode="DateTime"即可

 <TextBlock Text="日期" Margin="5"/>
<NbDateTimePicker Style="{DynamicResource DefaultDateTimePickerStyle}" Margin="5" DateTimePickerMode="Date" Width="180" MaxDate="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{}{0:dd/MM/yyyy}'}"/>
<TextBlock Text="日期时间" Margin="5"/>
<NbDateTimePicker Style="{DynamicResource DefaultDateTimePickerStyle}" Margin="5" DateTimePickerMode="DateTime" Width="180" MaxDate="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{}{0:dd/MM/yyyy}'}"/>
<TextBlock Text="时间" Margin="5"/>
<NbDateTimePicker Style="{DynamicResource DefaultDateTimePickerStyle}" Margin="5" DateTimePickerMode="Time" Width="180"/>
<TextBlock Text="日历" Margin="5"/>
<NbCalendar BorderBrush="{Binding Path=Color.Brush_Border1, Source={x:Static NbTheme.Current}}" BorderThickness="1" Height="300" Width="300"/>

Newbeecoder.UI控件库还有更多功能就没有详细介绍，我直接给出下载网址：通过Demo演示程序了解。

Newbeecoder.UI控件库https://download.csdn.net/download/liaohaiyin/63234875

第二部分介绍下开源控件库框架和代码结构。主要包含有装饰器类、自定义特性、控件类、自定义控件、转换器、核心类、事件类、资源样式，主题样式、控件参数。

一、装饰器类给控件添加遮罩层。

二、自定义特性

三、控件扩展类以Nb开头，扩展类有丰富的注释，方便用户快速了解代码实现。

四、自定义控件定义了某些控件样式

五、转换器集成各种转换类。

六、核心扩展类主要是算法和逻辑、以及扩展方法。方便开发者使用和扩展。

七、事件类主要是自定义事件

八、控件样式是把控件样式封装在资源文件中，开发者需要重构样式时，在样式中修改即可。控件样式以Nb开头。

九、主题样式是扩展控件有更多的风格，用户添加不同风格控件，可以在指定的资源文件中增加所需控件风格。

十、系统参数是控件库中使用颜色，字体，控件大小需要的属性。

还有更多控件就没有做详细介绍，在使用Newbeecoder.UI控件库有需要技术技术可以私信我。