wpf 自定义圆形按钮
wpf 自定义圆形按钮
效果图
默认样式
获取焦点样式
点击样式
下面是实现代码:
一个是自定义控件类,一个是控件类皮肤
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes; namespace MF.WPF.CustomControls.RoundButton
{
/// <summary>
/// 按照步骤 1a 或 1b 操作,然后执行步骤 2 以在 XAML 文件中使用此自定义控件。
///
/// 步骤 1a) 在当前项目中存在的 XAML 文件中使用该自定义控件。
/// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根
/// 元素中:
///
/// xmlns:MyNamespace="clr-namespace:MF.WPF.CustomControls.RoundButton"
///
///
/// 步骤 1b) 在其他项目中存在的 XAML 文件中使用该自定义控件。
/// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根
/// 元素中:
///
/// xmlns:MyNamespace="clr-namespace:MF.WPF.CustomControls.RoundButton;assembly=MF.WPF.CustomControls.RoundButton"
///
/// 您还需要添加一个从 XAML 文件所在的项目到此项目的项目引用,
/// 并重新生成以避免编译错误:
///
/// 在解决方案资源管理器中右击目标项目,然后依次单击
/// “添加引用”->“项目”->[浏览查找并选择此项目]
///
///
/// 步骤 2)
/// 继续操作并在 XAML 文件中使用控件。
///
/// <MyNamespace:RoundButton/>
///
/// </summary>
///
public class RoundButton : Button
{ public static readonly DependencyProperty EllipseDiameterProperty = DependencyProperty.Register("EllipseDiameter", typeof(double), typeof(RoundButton), new PropertyMetadata(22D)); public static readonly DependencyProperty EllipseStrokeThicknessProperty = DependencyProperty.Register("EllipseStrokeThickness", typeof(double), typeof(RoundButton), new PropertyMetadata(1D)); public static readonly DependencyProperty IconDataProperty = DependencyProperty.Register("IconData", typeof(Geometry), typeof(RoundButton)); public static readonly DependencyProperty IconSizeProperty = DependencyProperty.Register("IconSize", typeof(double), typeof(RoundButton), new PropertyMetadata(12D)); static RoundButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(RoundButton), new FrameworkPropertyMetadata(typeof(RoundButton)));
} /// <summary>
/// 获取或设置椭圆直径。
/// </summary>
[Description("获取或设置椭圆直径")]
[Category("Common Properties")]
public double EllipseDiameter
{
get { return (double)GetValue(EllipseDiameterProperty); }
set { SetValue(EllipseDiameterProperty, value); }
} /// <summary>
/// 获取或设置椭圆笔触粗细。
/// </summary>
[Description("获取或设置椭圆笔触粗细")]
[Category("Common Properties")]
public double EllipseStrokeThickness
{
get { return (double)GetValue(EllipseStrokeThicknessProperty); }
set { SetValue(EllipseStrokeThicknessProperty, value); }
} /// <summary>
/// 获取或设置图标路径数据。
/// </summary>
[Description("获取或设置图标路径数据")]
[Category("Common Properties")]
public Geometry IconData
{
get { return (Geometry)GetValue(IconDataProperty); }
set { SetValue(IconDataProperty, value); }
} /// <summary>
///获取或设置icon图标的高和宽。
/// </summary>
[Description("获取或设置icon图标的高和宽")]
[Category("Common Properties")]
public double IconSize
{
get { return (double)GetValue(IconSizeProperty); }
set { SetValue(IconSizeProperty, value); }
} }
}
自定义类,继承button
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MF.WPF.CustomControls.RoundButton"
> <SolidColorBrush x:Key="Accent" Color="#0072C6" />
<SolidColorBrush x:Key="ModernButtonBorder" Color="#919191" />
<SolidColorBrush x:Key="ModernButtonTextHover" Color="#d1d1d1" />
<SolidColorBrush x:Key="ModernButtonTextPressed" Color="White" />
<SolidColorBrush x:Key="ModernButtonBorderPressed" Color="White" />
<SolidColorBrush x:Key="ModernButtonIconForegroundPressed" Color="White" />
<Style TargetType="{x:Type local:RoundButton}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Padding" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:RoundButton}">
<Grid Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" >
<Ellipse x:Name="ellipse"
Stroke="{DynamicResource ModernButtonBorder}"
StrokeThickness="{TemplateBinding EllipseStrokeThickness}"
VerticalAlignment="Stretch" />
<Path x:Name="icon"
Data="{TemplateBinding IconData}"
Width="{TemplateBinding IconSize}"
Height="{TemplateBinding IconSize}"
Fill="{TemplateBinding Foreground}"
Stretch="Uniform" HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource Accent}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="{DynamicResource ModernButtonTextPressed}" />
<Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource ModernButtonBorderPressed}" />
<Setter TargetName="ellipse" Property="Fill" Value="{DynamicResource Accent}" />
<Setter TargetName="icon" Property="Fill" Value="{DynamicResource ModernButtonIconForegroundPressed}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource ModernButtonTextHover}" />
<Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource ModernButtonTextHover}" />
<Setter TargetName="icon" Property="Fill" Value="{DynamicResource ModernButtonBorder}" />
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource Accent}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary> 自定义button添加样式
使用此库是,记得在自己项目中添加样式文件 地址:/MF.WPF.CustomControls.RoundButton;component/Themes/Generic.xaml
完整引用
<Application x:Class="MF.WPF.CustomControls.RoundButton.Test.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MF.WPF.CustomControls.RoundButton.Test"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/MF.WPF.CustomControls.RoundButton;component/Themes/Generic.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
关于失量图标可参考此网站
http://modernuiicons.com/
直接动态库下载
下载源代和测试用例
End
wpf 自定义圆形按钮的更多相关文章
- WPF自定义圆形按钮样式资源文件
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...
- WPF 自定义柱状图 BarChart
WPF 自定义柱状图 当前的Telerik控件.DevExpress控件在图表控件方面做得不错,但是有时项目中需要特定的样式,不是只通过修改图表的模板和样式就能实现的. 或者说,通过修改当前的第三方控 ...
- WPF自定义窗口基类
WPF自定义窗口基类时,窗口基类只定义.cs文件,xaml文件不定义.继承自定义窗口的类xaml文件的根节点就不再是<Window>,而是自定义窗口类名(若自定义窗口与继承者不在同一个命名 ...
- WPF 自定义 MessageBox (相对完善版)
WPF 自定义 MessageBox (相对完善版) 基于WPF的自定义 MessageBox. 众所周知WPF界面美观.大多数WPF元素都可以简单的修改其样式,从而达到程序的风格统一.可是当 ...
- WPF自定义Window样式(2)
1. 引言 在上一篇中,介绍了如何建立自定义窗体.接下来,我们需要考虑将该自定义窗体基类放到类库中去,只有放到类库中,我们才能在其他地方去方便的引用该基类. 2. 创建类库 接上一篇的项目,先添加一个 ...
- WPF自定义Window样式(1)
1. 引言 WPF是制作界面的一大利器.最近在做一个项目,用的就是WPF.既然使用了WPF了,那么理所当然的,需要自定义窗体样式.所使用的代码是在网上查到的,遗憾的是,整理完毕后,再找那篇帖子却怎么也 ...
- WPF自学入门(九)WPF自定义窗口基类
今天简单记录一个知识点:WPF自定义窗口基类,常用winform的人知道,winform的窗体继承是很好用的,写一个基础窗体,直接在后台代码改写继承窗体名.但如果是WPF要继承窗体,我个人感觉没有理解 ...
- WPF自定义TabControl样式
WPF自定义TabControl,TabControl美化 XAML代码: <TabControl x:Class="SunCreate.Common.Controls.TabCont ...
- WPF 自定义ComboBox样式,自定义多选控件
原文:WPF 自定义ComboBox样式,自定义多选控件 一.ComboBox基本样式 ComboBox有两种状态,可编辑和不可编辑状态.通过设置IsEditable属性可以切换控件状态. 先看基本样 ...
随机推荐
- Windows上帝模式,上帝应该就是这样使用Windows的
Windows上帝模式(Windows Master Control Panel)由来已久,最早是从Win7优化大湿里看到的一个选项,开启后在桌面生成一个图标,点进去后里面包含了几乎全部Windows ...
- jQuery 绑定事件到动态创建的元素上
在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...
- tomcat 5.5 动态加载类
转载于:http://www.itxuexiwang.com/a/javadianzishu/tomcat/2016/0225/161.html?1456480735 开发使用的是tomcat5.5. ...
- Android 使用Font Awesome 显示文字图标
Android 使用Font Awesome 显示文字图标 简单几步就可以完成 简单的效果图: 1. 创建 assets 文件夹 在Android Studio 上的创建步骤为: 在 src/main ...
- Html5+asp.net mvc 图片压缩上传
在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...
- jeasyUI的treegrid批量删除多行(转载)
看上去,JavaScript的变量类型,也可以分为值类型和引用类型.赋值操作中,值类型,各自独立,互不干涉:引用类型,指针而已,大家指向同一个对象. 为什么这样说呢? 我是从jeasyUI的treeg ...
- Yii2的深入学习--自动加载机制
Yii2 的自动加载分两部分,一部分是 Composer 的自动加载机制,另一部分是 Yii2 框架自身的自动加载机制. Composer自动加载 对于库的自动加载信息,Composer 生成了一个 ...
- Request.UrlReferrer 使用
最近有一个功能是反馈统计,然后在反馈建议里面添加是从哪个页面点击过来的,一开始打算做成&url=这种方法加在链接里面然后页面接受参数,后来知道了request.UrlReferrer 知道他可 ...
- Android调用手机摄像头使用MediaRecorder录像并播放
最近在项目开发中需要调用系统的摄像头录像并播放. 在开发中遇到了两个问题,记录下: (1)开发过程中出现摄像头占用,启动失败,报错.但是我已经在onDestory()中关闭了资源. 报错原因:打开程序 ...
- Linux - Screen
GNU's Screen homepage Screen是由GNU计划开发的用于命令行终端切换的自由软件,可以看作是窗口管理器的命令行界面版本. 可以通过该软件同时连接多个本地或远程的命令行会话,并在 ...