值得收藏轻量级UI控件库

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

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

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

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

视频内容

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

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

代码语言：html复制

<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为同一个名称。

代码语言：html复制

<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"/>

调用复选框样式代码：

代码语言：html复制

<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"/>

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

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

代码语言：html复制

<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中增加这两项功能。

代码语言：html复制

<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"即可

代码语言：html复制

 <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控件库还有更多功能就没有详细介绍，我直接给出下载网址：