首页 > 其他分享 >一种自定义圆角按钮

一种自定义圆角按钮

时间:2023-10-10 14:12:03浏览次数:31  
标签:圆角 DependencyProperty 自定义 CornerRadiusProperty CornerRadius 按钮 ImageSource publi

效果图:

 

代码:

/// <summary>
/// 头像按钮
/// </summary>
public class AvaButton : ButtonBase
{
    public static readonly DependencyProperty CornerRadiusProperty
        = DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(AvaButton), new PropertyMetadata(null));

    public static readonly DependencyProperty ImageSourceProperty
        = DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(AvaButton), new PropertyMetadata(null));
    
    /// <summary>
    /// 圆角半径
    /// </summary>
    public CornerRadius CornerRadius
    {
        get { return (CornerRadius)GetValue(CornerRadiusProperty); }
        set { SetValue(CornerRadiusProperty, value); } 
    }

    /// <summary>
    /// 图片路径
    /// </summary>
    public ImageSource ImageSource
    {
        get { return (ImageSource)GetValue(ImageSourceProperty); }
        set { SetValue(ImageSourceProperty, value); }
    }
}

MainWindow.xaml

<Window.Resources>
    <Style x:Key="AvaButtonStyle1" TargetType="{x:Type controls:AvaButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:AvaButton}">
                    <Border CornerRadius="{TemplateBinding CornerRadius}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <Border.Background>
                            <ImageBrush ImageSource="{Binding Path=ImageSource, RelativeSource={RelativeSource Mode=TemplatedParent} }" />
                        </Border.Background>
                        <Border Background="#DE6738" Width="10" Height="10"  CornerRadius="5" VerticalAlignment="Top" HorizontalAlignment="Right">
                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </Border>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>


 <controls:AvaButton Style="{DynamicResource AvaButtonStyle1}" Content="8" FontSize="8" Foreground="White" Margin="20 30 20 10" Width="50" Height="50" BorderThickness="2" BorderBrush="White" CornerRadius="25" ImageSource="pack://application:,,,/Assets/Images/ava.png" />

 

标签:圆角,DependencyProperty,自定义,CornerRadiusProperty,CornerRadius,按钮,ImageSource,publi
From: https://www.cnblogs.com/xesx/p/17754522.html

相关文章

  • 深入理解模型视图、自定义模型
    一、深入理解模型model提供一种标准接口,供视图和委托访问数据。在Qt中,这个接口由QAbstractItemModel类进行定义。不管底层数据是如何存储的,只要是QAbstractItemModel的子类,都提供一种表格形式的层次结构。视图利用统一的转换来访问模型中的数据。但是,需要提供的是,尽管模型内部是......
  • 迷失岛第4章 函数里面带int参数与按钮的结合 与一些其他东西的运用
      这个代码 里面带参数 与按钮结合可以触发一些内容 比如按下这个按键进行计算啥的 也算是一个新方法  ContainsKey就是查找里面有没有 移除指定元素 定义GameObject在Scene中是否处于活动状态 ......
  • 注解(Annotation)简介,内置注解,元注解,自定义注解
    注解:不是程序本身,可以对程序做出解释(这一点和注释没什么区别)可以被其他程序(比如编译器)读取@Functional(这是L)(这是I)Interface  函数式接口 内置注解:java本来就有的注解@Override  重写@Deprecated 已废弃,不推荐使用的意思@SuppressWarnings 镇压警告 ......
  • 造轮子之自定义授权策略
    前面我们已经弄好了用户角色这块内容,接下来就是我们的授权策略。在asp.netcore中提供了自定义的授权策略方案,我们可以按照需求自定义我们的权限过滤。这里我的想法是,不需要在每个Controller或者Action打上AuthorizeAttribute,自动根据ControllerName和ActionName匹配授权。只需要......
  • 自定义滚动条 css
    /*自定义滚动条css*/.customScrollbar::-webkit-scrollbar{width:10px;height:10px;}.customScrollbar::-webkit-scrollbar-thumb{border-radius:8px;background-color:#47515b;}.customScrollbar::-webkit-scrollbar-thumb:hover{background-color:#5D626C;}.customScr......
  • css自定义滚动条
    .container{width:200px;height:150px;overflow:auto;/*自动显示滚动条/-ms-overflow-style:scrollbar;/在IE上显示自定义滚动条*/}/*自定义滚动条的样式*/.container::-webkit-scrollbar{width:10px;height:10px;}.container::-webkit-scrollbar-trac......
  • 【webapp】在 JSP 页面中引入标签库和使用自定义标签
    自定义标签的基本步骤:创建自定义标签库文件:首先,您需要创建一个包含自定义标签定义的标签库文件(通常以 .tld 扩展名结尾)。该文件描述了标签的名称、属性和处理逻辑。引入标签库:在JSP页面中,通过使用 <%@taglib%> 指令来引入自定义标签库。该指令告诉JSP引擎在页面中......
  • TinyMCE——自定义工具栏按钮(基础按钮、下拉框按钮、弹框按钮等)
    详细配置查看官方文档:https://www.tiny.cloud/docs/tinymce/6/custom-toolbarbuttons/  配置方式:tinymce.init({selector:'#editor',toolbar:'myCustomToolbarButton',setup:(editor)=>{editor.ui.registry.addButton('myCustomToolb......
  • PyQt 自定义信号带参数 emit
    PyQt5自定义信号带参数importsysfromPyQt5.QtCoreimportpyqtSignal,QObjectfromPyQt5.QtWidgetsimportQMainWindow,QApplicationclassmysignal(QObject):closeApp=pyqtSignal(list)classExample(QMainWindow):def__init__(self):super().......
  • vue封装搜索组件,自定义elment搜索组件
    组件案例<template><divclass="dialog-search"><el-form:inline="true"ref="ruleForm":model="formInline"class="demo-form-inlinetop-screen"><divclass="to......