最近看了一些科技感UI设计,其中很多的按钮都不是常见的圆角边,而是斜角边。查了一下,wpf中好像没有现成的斜角border,网上也没搜到现成的,于是自己写了点时间做了一个,写的较简单,有一些bug(主要是没有去管一些极值情况),但也基本可用了。

下面与大家分享一下代码:

先上效果:

前台代码:

    <Window.Resources>
<Style TargetType="{x:Type local:BeveledBorder}">
<Setter Property="Background" Value="#90000000" />
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Margin" Value="2" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#90FF0000"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<UniformGrid Rows="1" VerticalAlignment="Center" MinHeight="50"> <local:BeveledBorder CornerRadius="10,0,10,0">
<TextBlock Text="123" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</local:BeveledBorder> <local:BeveledBorder CornerRadius="10,10,10,10"/> <local:BeveledBorder CornerRadius="10,20,10,20"/> <local:BeveledBorder CornerRadius="0,15,0,15"/> <local:BeveledBorder Width="40" Height="40"
CornerRadius="10,10,10,10"/> </UniformGrid>

后台类:

    /// <summary>
/// 斜角Border
/// </summary>
class BeveledBorder : Decorator
{
public Brush BorderBrush
{
get { return (Brush)GetValue(BorderBrushProperty); }
set { SetValue(BorderBrushProperty, value); }
} public static readonly DependencyProperty BorderBrushProperty =
Border.BorderBrushProperty.AddOwner(typeof(BeveledBorder), new PropertyMetadata(Brushes.Transparent, CommonPropertyChanged)); public Thickness BorderThickness
{
get { return (Thickness)GetValue(BorderThicknessProperty); }
set { SetValue(BorderThicknessProperty, value); }
} public static readonly DependencyProperty BorderThicknessProperty =
Border.BorderThicknessProperty.AddOwner(typeof(BeveledBorder), new PropertyMetadata(new Thickness(), CommonPropertyChanged)); public Brush Background
{
get { return (Brush)GetValue(BackgroundProperty); }
set { SetValue(BackgroundProperty, value); }
} public static readonly DependencyProperty BackgroundProperty =
Control.BackgroundProperty.AddOwner(typeof(BeveledBorder), new PropertyMetadata(Brushes.Transparent, CommonPropertyChanged)); public CornerRadius CornerRadius
{
get { return (CornerRadius)GetValue(CornerRadiusProperty); }
set { SetValue(CornerRadiusProperty, value); }
} public static readonly DependencyProperty CornerRadiusProperty =
Border.CornerRadiusProperty.AddOwner(typeof(BeveledBorder), new PropertyMetadata(new CornerRadius(), CommonPropertyChanged)); private static void CommonPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
(d as BeveledBorder)._isrendersizechanged = true;
(d as BeveledBorder).InvalidateVisual();
} protected override void OnRender(DrawingContext drawingContext)
{
base.OnRender(drawingContext); if (_isrendersizechanged)
{
_isrendersizechanged = false;
UpdateGeometry(RenderSize);
} Pen pTop = new Pen(BorderBrush, BorderThickness.Top);
drawingContext.DrawGeometry(Background, pTop, _currenGeometry);
} protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
{
base.OnRenderSizeChanged(sizeInfo);
_isrendersizechanged = true;
} private void UpdateGeometry(Size nsize)
{
if (_currenGeometry == null)
{
_currenGeometry = new PathGeometry();
_currenGeometry.Figures.Add(new PathFigure());
_currenGeometry.Figures[].IsClosed = true;
}
else
{
_currenGeometry.Figures[].Segments.Clear();
} if (CornerRadius == null)
{
  
_currenGeometry.Figures[0].StartPoint = new Point(0, 0);

            _currenGeometry.Figures[0].Segments.Add(ToLineSegment(new Point(nsize.Width, 0)));
                  _currenGeometry.Figures[0].Segments.Add(ToLineSegment(new Point(nsize.Width, nsize.Height)));
                  _currenGeometry.Figures[0].Segments.Add(ToLineSegment(new Point(0, nsize.Height)));

            }
else
{
_currenGeometry.Figures[].StartPoint = new Point(CornerRadius.TopLeft, ); if (CornerRadius.TopRight <= )
{
_currenGeometry.Figures[].Segments.Add(ToLineSegment(new Point(nsize.Width, )));
}
else
{
_currenGeometry.Figures[].Segments.Add(ToLineSegment(new Point(nsize.Width - CornerRadius.TopRight, )));
_currenGeometry.Figures[].Segments.Add(ToLineSegment(new Point(nsize.Width, CornerRadius.TopRight)));
} if (CornerRadius.BottomRight <= )
{
_currenGeometry.Figures[].Segments.Add(ToLineSegment(new Point(nsize.Width, nsize.Height)));
}
else
{
_currenGeometry.Figures[].Segments.Add(ToLineSegment(new Point(nsize.Width, nsize.Height - CornerRadius.BottomRight)));
_currenGeometry.Figures[].Segments.Add(ToLineSegment(new Point(nsize.Width - CornerRadius.BottomRight, nsize.Height)));
} if (CornerRadius.BottomLeft <= )
{
_currenGeometry.Figures[].Segments.Add(ToLineSegment(new Point(, nsize.Height)));
}
else
{
_currenGeometry.Figures[].Segments.Add(ToLineSegment(new Point(CornerRadius.BottomLeft, nsize.Height)));
_currenGeometry.Figures[].Segments.Add(ToLineSegment(new Point(, nsize.Height - CornerRadius.BottomLeft)));
} if (CornerRadius.TopLeft > )
{
_currenGeometry.Figures[].Segments.Add(ToLineSegment(new Point(, CornerRadius.TopLeft)));
}
}
} private LineSegment ToLineSegment(Point pt)
{
return new LineSegment(pt, true);
} private PathGeometry _currenGeometry = null;
private bool _isrendersizechanged = true;
}

WPF 斜角border的更多相关文章

  1. WPF 通过Border来画边框

    WPF有自己的表格控件DataGrid.ListBox等,如果只是简单的需求,可以通过Border控件来画边框. 比如我们需要给上面的控件加上边框. <Window x:Class=" ...

  2. WPF 采用Border创建圆角

    通过设置可以创建圆角border的CornerRadius属性其边框呈现圆角样式 代码: <Border Height="50" Background="Red&q ...

  3. WPF使用border画框

    以前的界面中使用的框大都是由美工做好的,但是这样就遇到几个问题: 框只是换一个颜色,就需要多做出一张图,资源包中也要多一个图片资源: 文字的数量会改变,用一张固定的图进行拉伸,边角处会变得越来越不尽如 ...

  4. WPF参考

    web 调用本地exe 程序,传入参数https://www.cnblogs.com/anjou/p/10045177.html WPF常用控件样式https://www.cnblogs.com/s0 ...

  5. WPF绘制自定义窗口

    原文:WPF绘制自定义窗口 WPF是制作界面的一大利器,下面就用WPF模拟一下360的软件管理界面,360软件管理界面如下: 界面不难,主要有如下几个要素: 窗体的圆角 自定义标题栏及按钮 自定义状态 ...

  6. WPF学习:3.Border & Brush

    上一章<WPF学习:2.Layout-Panels-Countainers>主要介绍了布局,容器和面板.这一章主要开始介绍Border(边界)和Brush(画刷). 代码地址:http:/ ...

  7. 【C#】WPF的xaml中定义的Trigger为什么有时候会不管用,如Border的MouseOver之类的

    原文:[C#]WPF的xaml中定义的Trigger为什么有时候会不管用,如Border的MouseOver之类的 初学WPF,知道一些控件可以通过定义Style的Trigger改变要显示的样式,但是 ...

  8. WPF入门教程系列十——布局之Border与ViewBox(五)

    九. Border Border 是一个装饰的控件,此控件绘制边框及背景,在 Border 中只能有一个子控件,若要显示多个子控件,需要将一个附加的 Panel 控件放置在父 Border 中.然后可 ...

  9. WPF控件---Border应用

    内容模型:Border 只能具有一个子元素.若要显示多个子元素, 需要将一个容器元素放置在父元素Border中. <Grid> <Border BorderBrush="B ...

随机推荐

  1. [Hbase]Hbase章3 Hbase单点故障

    很长一段时间以来,一个region同一时间只能在一台RS(Region Server)中打开.如果一个region同时在多个RS上打开,就是multi-assign问题,会导致数据不一致甚至丢数据的情 ...

  2. maven下的jar项目打包的方法

    1.先对pom项目进行install: RunAs->maven install,如果出现如下错误: Failed to execute goal org.apache.maven.plugin ...

  3. 通过脚本命令cacls提升某个用户都某路径的操作权限

    摘要----项目需要对服务器上的某个路径下的目录,修改权限:给Users用户组的用户添加修改写入权限. 原理----通过批处理脚本实现,命令使用 icacls 修改ACL 来达到修改权限的目的. 操作 ...

  4. ECLIPSE使用HG插件去上载 GOOGLE.CODE下的代码

    ECLIPSE使用HG插件去上载 GOOGLE.CODE下的代码 www.MyException.Cn   发布于:2012-09-10 22:20:12   浏览:112次 0   ECLIPSE使 ...

  5. Git及其二次开发

    Git And TFS: 将 Visual Studio 用于 Git:http://msdn.microsoft.com/zh-cn/library/hh850437.aspx TFVC 和 Git ...

  6. spring学习九 spring aop详解

    本文来自于:https://www.cnblogs.com/jingzhishen/p/4980551.html AOP(Aspect-Oriented Programming,面向方面编程),可以说 ...

  7. WPF禁止拖拽窗口到边缘自动最大化

    近期有个需求,可以通过拖拽改变窗口大小,但是不允许窗口最大化.最小化.拖到边缘的时候也不能自动最大化. 要想禁止拖拽窗口到边缘自动最大化,只要改注册表即可,但是系统所有应用都会被禁止. 1.运行reg ...

  8. 2019.01.08 bzoj3809: Gty的二逼妹子序列(莫队+权值分块)

    传送门 题意:多组询问,问区间[l,r]中权值在[a,b]间的数的种类数. 看了一眼大家应该都知道要莫队了吧. 然后很容易想到用树状数组优化修改和查询做到O(mnlogamax)O(m\sqrt nl ...

  9. 2018.12.08 codeforces 914D. Bash and a Tough Math Puzzle(线段树)

    传送门 线段树辣鸡题. 题意简述:给出一个序列,支持修改其中一个数,以及在允许自行修改某个数的情况下询问区间[l,r][l,r][l,r]的gcdgcdgcd是否可能等于一个给定的数. 看完题就感觉是 ...

  10. java常用设计模式十:模板模式

    一.定义 定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 如果上面的话不好理解,请看下面的例子 二.示例 1)定义一个模 ...