添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
鬼畜的太阳  ·  selenium ...·  1 年前    · 
严肃的苹果  ·  HTML5 新元素 | 菜鸟教程·  2 年前    · 
求醉的冲锋衣  ·  如何将None转换为R NULL·  2 年前    · 
备案 控制台
学习
实践
活动
专区
工具
TVP
写文章
专栏首页 CSharp编程 Newbeecoder.UI开源控件库自定义按钮样式
2 0

海报分享

原创

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

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

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

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

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

视频内容

下载Demo网址: https://download.csdn.net/download/liaohaiyin/63234875

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

<StackPanel Orientation="Horizontal">
    <NbButton Style="{DynamicResource NormalButtonStyle}" Height="60">
            <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">