前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Newbeecoder.UI开源控件库自定义按钮样式

Newbeecoder.UI开源控件库自定义按钮样式

原创
作者头像
用户7152477
发布2022-01-18 17:52:24
8090
发布2022-01-18 17:52:24
举报
文章被收录于专栏:CSharp编程CSharp编程

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

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

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档