前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >值得收藏轻量级UI控件库

值得收藏轻量级UI控件库

原创
作者头像
用户7152477
发布2022-01-12 11:26:44
1.1K0
发布2022-01-12 11:26:44
举报
文章被收录于专栏:CSharp编程CSharp编程

程序开发者使用第三方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控件库还有更多功能就没有详细介绍,我直接给出下载网址:

https://download.csdn.net/download/liaohaiyin/63234875

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

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

二、自定义特性

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

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

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

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

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

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

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

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

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • https://download.csdn.net/download/liaohaiyin/63234875
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档