为了满足用户对Newbeecoder.UI库更多功能需求,在控件库中加入自定义按钮样式、输入框带图标、多选下拉框,日期时间和日历控件、不确定进度条、标准选项卡、绘制曲线图。
1、自定义样式按钮增加7种常用样式按钮,分别有带左图形+右文字,圆形文字按钮,上图形+下文字,圆形图形按钮等样式。
自定义按钮样式调用代码:
<StackPanel Orientation="Horizontal">
<NbButton Style="{DynamicResource NormalButtonStyle}" Height="60" Margin="5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<NbIcon Grid.Column="0" Data="{DynamicResource Icon-App}" Width="16" Height="16" Foreground="{Binding Path=Color.Brush_Danger1, Source={x:Static NbTheme.Current}}"/>
<StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0">
<TextBlock Text="一般按钮" Foreground="{Binding Path=Color.Brush_Success1, Source={x:Static NbTheme.Current}}" FontSize="{Binding Path=Font.H3Size, Source={x:Static NbTheme.Current}}" HorizontalAlignment="Center"/>
<TextBlock Text="Newbeecoder.UI控件库" Foreground="{Binding Path=Color.Brush_Text4, Source={x:Static NbTheme.Current}}" FontSize="{Binding Path=Font.H6Size, Source={x:Static NbTheme.Current}}" HorizontalAlignment="Center"/>
</StackPanel>
<Border Grid.Column="2" Margin="10,0,0,0" Width="5" BorderThickness="1" BorderBrush="{Binding Path=Color.Brush_Border1, Source={x:Static NbTheme.Current}}" Background="{Binding Path=Color.Brush_Border3, Source={x:Static NbTheme.Current}}" Effect="{Binding Path=Color.Shadow_Border1, Source={x:Static NbTheme.Current}}" CornerRadius="{Binding Path=Size.CornerRadius, Source={x:Static NbTheme.Current}}">
<Border Background="{Binding Path=Color.Brush_Danger1, Source={x:Static NbTheme.Current}}" CornerRadius="{Binding Path=Size.CornerRadius, Source={x:Static NbTheme.Current}}" Height="30" VerticalAlignment="Bottom"/>
</Border>
</Grid>
</NbButton>
<NbButton Style="{DynamicResource EllipseDefaultButtonStyle}" Margin="5" Content="默认按钮"/>
<NbButton Style="{DynamicResource WarningButtonStyle}" Height="60" MinWidth="60" Margin="5">
<StackPanel Orientation="Vertical">
<NbIcon Data="{DynamicResource Icon-App}" Width="16" Height="16"/>
<TextBlock Text="警告按钮" Margin="0,5,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
</NbButton>
<NbButton Style="{DynamicResource EllipseDefaultButtonStyle}" MinWidth="40" Margin="5">
<NbIcon Data="{DynamicResource Icon-App}" Width="16" Height="16"/>
</NbButton>
<NbButton Style="{DynamicResource SuccessButtonStyle}" Margin="5">
<StackPanel Orientation="Horizontal">
<NbIcon Data="{DynamicResource Icon-App}" Width="16" Height="16"/>
<TextBlock Text="成功按钮" Margin="5,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
</NbButton>
<NbButton Style="{DynamicResource InfoButtonStyle}" Margin="5">
<StackPanel Orientation="Horizontal">
<TextBlock Text="信息按钮" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<NbIcon Data="{DynamicResource Icon-App}" Margin="5,0,0,0" Width="16" Height="16"/>
</StackPanel>
</NbButton>
<NbButton Style="{DynamicResource DangerButtonStyle}" Margin="5">
<Grid>
<TextBlock Text="危险按钮" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<NbLabel Style="{DynamicResource DangerLabelStyle}" Width="23" CornerRadius="23" Height="23" Content="9" HorizontalAlignment="Right" VerticalAlignment="Top" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Margin="-20,-20" IsHitTestVisible="False" FontSize="{Binding Path=Font.H6Size, Source={x:Static NbTheme.Current}}"/>
</Grid>
</NbButton>
</StackPanel>
2、输入框带图标功能
<NbTextBox Style="{DynamicResource DefaultTextBoxStyle}" Margin="5" InputMode="Int" NbData="{DynamicResource Icon-Number}"/>
3、多选下拉框在下拉列表选中复选项进行多选,同时支持清除内容和下拉列表项实现模糊搜索项。
多选下拉框调用案例。
<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
<TextBlock Text="可搜索" Margin="5"/>
<NbMultiComboBox Style="{DynamicResource DefaultMultiComboBoxStyle}" Margin="5" EnabledSearchItems="True" EnabledSearchIgnoreCase="True" ShowClearButton="False">
<NbMultiComboBoxItem Content="橘子"/>
<NbMultiComboBoxItem Content="苹果"/>
<NbMultiComboBoxItem Content="香蕉"/>
<NbMultiComboBoxItem Content="草莓"/>
<NbMultiComboBoxItem Content="梨子"/>
</NbMultiComboBox>
<TextBlock Text="带清除按钮" Margin="5"/>
<NbMultiComboBox Style="{DynamicResource DefaultMultiComboBoxStyle}" Margin="5" EnabledSearchItems="True" EnabledSearchIgnoreCase="True" ShowClearButton="True">
<NbMultiComboBoxItem Content="橘子"/>
<NbMultiComboBoxItem Content="苹果"/>
<NbMultiComboBoxItem Content="香蕉" IsSelected="True"/>
<NbMultiComboBoxItem Content="草莓"/>
<NbMultiComboBoxItem Content="梨子"/>
</NbMultiComboBox>
<TextBlock Text="禁用" Margin="5"/>
<NbMultiComboBox Style="{DynamicResource DefaultMultiComboBoxStyle}" Margin="5" EnabledSearchItems="True" EnabledSearchIgnoreCase="True" ShowClearButton="True" IsEnabled="False">
<NbMultiComboBoxItem Content="橘子"/>
<NbMultiComboBoxItem Content="苹果"/>
<NbMultiComboBoxItem Content="香蕉" IsSelected="True"/>
<NbMultiComboBoxItem Content="草莓"/>
<NbMultiComboBoxItem Content="梨子"/>
</NbMultiComboBox>
</StackPanel>
4、日期时间和日历控件包括日期、日期时间、时间及日历控件。
<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
<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"/>
</StackPanel>
5、不确定进度条
6、标准选项卡是常规选择项,无关闭按钮及选中时的主题颜色,还修改圆角等样式。
<NbTabControl Style="{DynamicResource NormalTabControlStyle}" Margin="5" ItemPanelMinHeight="32" BorderThickness="0,1,0,0" ItemPanelMargin="4,0,128,0">
<NbTabItem Style="{DynamicResource NormalTabItemStyle}" Header="选项卡一"/>
<NbTabItem Style="{DynamicResource NormalTabItemStyle}" Header="选项卡二"/>
<NbTabItem Style="{DynamicResource NormalTabItemStyle}" Header="选项卡三"/>
</NbTabControl>
7、绘制曲线图是新增画线功能,目前只加入折曲图和曲线图。
以后还会加入更多常用控件让开发者快速使用开源控件库带来便捷。
Demo下载:
Newbeecoder.UI开源项目https://share.weiyun.com/py6W1dcK
C# WPF新版开源控件库:Newbeecoder.UI