WPF(MVVM) Newbeecoder.UI控件库按钮样式

为了满足开发者需求，在基础按钮上再添加几个自定义按钮样式。开发者可以根据示例来设计自己所需的按钮。

在Newbeecoder.UI源码控件库中先添加5款样式，后期再添加更多样式。

第一个按钮含有图标+文字+边框、第二个只含有图标的圆形按钮、第三个左边图标+文字、第三个文字+右边图标、第四个上面图标+文字、第五个文字+右上角提示文字按钮。如下图所示：

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

C# WPF新版开源控件库：Newbeecoder.UI

 

下载Demo网址：Newbeecoder.UI源码控件库https://download.csdn.net/download/liaohaiyin/63234875

Newbeecoder.UI控件库自定义样式按钮代码如下： 

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