为了满足开发者需求,在基础按钮上再添加几个自定义按钮样式。开发者可以根据示例来设计自己所需的按钮。
在Newbeecoder.UI源码控件库中先添加5款样式,后期再添加更多样式。
第一个按钮含有图标 文字 边框、第二个只含有图标的圆形按钮、第三个左边图标 文字、第三个文字 右边图标、第四个上面图标 文字、第五个文字 右上角提示文字按钮。如下图所示:
为了方便用户了解软件功能,先视频简单演示下控件库界面和程序框架。
下载Demo网址:https://download.csdn.net/download/liaohaiyin/63234875
Newbeecoder.UI控件库自定义样式按钮代码如下:
代码语言:html复制<StackPanel Orientation="Horizontal">
<NbButton Style="{DynamicResource NormalButtonStyle}" Height="60">
<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}" 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 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 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" FontSize="{Binding Path=Font.H6Size, Source={x:Static NbTheme.Current}}"/>
</Grid>
</NbButton>
</StackPanel>