《15天玩转WPF》—— 直线、矩形、椭圆的各种画法

最新推荐文章于 2024-04-02 11:15:18 发布
最新推荐文章于 2024-04-02 11:15:18 发布
阅读量4.7k 收藏 24
点赞数 10
分类专栏： WPF 高手之路 文章标签： WPF 矩形 XAML 直线 椭圆
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42100963/article/details/105265142
版权

时间：2020.4.2，《深入浅出WPF》也学到了最后一章，三百页用了将近一个月 (3.14开始） 属实有点慢，因为有个人的一些事情. .
. 前面的一些文章都是举出书中核心的知识，有点枯燥 这一章学习图形相关的知识，有点小激动 . . .
这一章学习过后，就差不多开学了，已经开始进行项目的学习与制作 . . .

文章讲解直线、矩形、椭圆的用法，让我们朴实无华的形状变的好看一点 . . .

直线

直线是非常简单的图形，它有 X1、Y1、X2、Y2这四个属性，用来确定线的起始与终点位置，它的 Stroke用来设置 画刷颜色（Brush），下面我几种不同的画线的风格 :

<Line X1="10" Y1="20" X2="260" Y2="20" Stroke="Red" StrokeThickness="10"/>

<Line X1="10" Y1="40" X2="260" Y2="40" Stroke="Orange" StrokeThickness="6"/>

<Line X1="10" Y1="60" X2="260" Y2="60" Stroke="Green" StrokeThickness="3"/>

<Line X1="10" Y1="80" X2="260" Y2="80" Stroke="Purple" StrokeThickness="2"/>

<Line X1="10" Y1="100" X2="260" Y2="100" Stroke="Black" StrokeThickness="1"/>

<Line X1="10" Y1="120" X2="260" Y2="120" Stroke="Black" StrokeThickness="1"
 	StrokeDashArray="10,20,30"/>

<Line X1="10" Y1="140" X2="260" Y2="140" Stroke="Black" StrokeThickness="1"
 	StrokeDashArray="10"/>
 	
<Line X1="10" Y1="160" X2="260" Y2="160" Stroke="Black" StrokeThickness="6"
 	StrokeEndLineCap="Round"/>

<Line X1="10" Y1="180" X2="260" Y2="180" StrokeThickness="6" StrokeEndLineCap="Round">
	<Line.Stroke>
                <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5">
                    <GradientStop Color="Blue"/>
                    <GradientStop Offset="1"/>
                </LinearGradientBrush>
	</Line.Stroke>
</Line>

StrokeDashArray 属性是用来设置虚线的，数据是一个集合类型 . . .
StrokeEndLineCap 属性是用来设置线终点的形状风格 . . .

最后一个线，我们设置它的画刷为渐变的效果，别有一番滋味 . . .

效果如下图所示：

在这里插入图片描述

矩形

矩形也有笔触（Stroke，连线），矩形的填充效果是 Fill属性，它的类型是 Brush，

常用的 Brush类型有：

  • SolidColorBrush：实心画刷，直接用颜色字符串赋值
  • LinearGradientBrush：线性渐变画刷
  • RadialGradientBrush：径向渐变画刷
  • ImageBrush：图片填充
  • DrawingBrush：矢量图 和 位图作为填充内容
  • VisualBrush：获取控件的外表作为填充内容

下面我将每一种类型的填充方法进行演示 . . .
（最后再加上一种矩形的使用方法：渐变填充边框）

VisualBrush的类型我将单独演示 . . .

首先我们将界面进行布局，然后将每一种类型的方式，分别放在不同的行列之中：

<Grid.RowDefinitions>
	 <RowDefinition Height="160"/>
	<RowDefinition Height="10"/>
	<RowDefinition Height="160"/>
</Grid.RowDefinitions>
        
<Grid.ColumnDefinitions>
	<ColumnDefinition Width="180"/>
	<ColumnDefinition Width="10"/>
	<ColumnDefinition Width="180"/>
	<ColumnDefinition Width="10"/>
	<ColumnDefinition Width="180"/>
</Grid.ColumnDefinitions>

布局如图所示：

在这里插入图片描述

我们把下面演示的六种方法的 矩形分别放在这六个单元格中，（不包含 VisualBrush 方法，下面单独演示） . . .

SolidColorBrush

直接用颜色字符串填充

<Rectangle Grid.Column="0" Grid.Row="0" Stroke="Black" Fill="LightBlue"/>

效果如下图所示：

在这里插入图片描述

LinearGradientBrush

使用渐变颜色填充

<Rectangle Grid.Column="2" Grid.Row="0">
            <Rectangle.Fill>
                <LinearGradientBrush>
                    <GradientStop Color="LightBlue"  Offset="0"/>
                    <GradientStop Color="Green" Offset="0.25"/>
                    <GradientStop Color="White" Offset="0.6"/>
                    <GradientStop Color="Beige" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
</Rectangle>

效果如下图所示：

在这里插入图片描述

RadialGradientBrush

使用径向渐变填充

<Rectangle Grid.Column="4" Grid.Row="0">
            <Rectangle.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="LightBlue"  Offset="0"/>
                    <GradientStop Color="Pink" Offset="0.25"/>
                    <GradientStop Color="White" Offset="0.6"/>
                    <GradientStop Color="Beige" Offset="1"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
</Rectangle>

效果如下图所示：

在这里插入图片描述

ImageBrush

使用图片填充

<Rectangle Grid.Column="0" Grid.Row="2">
            <Rectangle.Fill>
                <!--可见区与填充模式-->
                <ImageBrush ImageSource=".\bj.jpeg" Viewport="0,0,0.3,0.35"
                 	 TileMode="Tile"/>
            </Rectangle.Fill>
</Rectangle>

Viewport 属性是截取图片的大小， TileMode是填充的模式

效果如下图所示：

在这里插入图片描述

DrawingBrush

矢量图填充

<Rectangle Grid.Column="2" Grid.Row="2">
            <Rectangle.Fill>
                <DrawingBrush Viewport="0,0,0.2,0.2" TileMode="Tile">
                    <DrawingBrush.Drawing>
                        <GeometryDrawing Brush="LightBlue">
                            <GeometryDrawing.Geometry>
                                <EllipseGeometry RadiusX="0.2" RadiusY="0.2"/>
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
</Rectangle>

中间画出一个几何图形圆，来作为矢量图，截取大小，填充模式等等 . . .

效果如下图所示：

在这里插入图片描述

渐变框填充，Fill为null

<Rectangle Grid.Column="4" Grid.Row="2" StrokeThickness="10">
            <Rectangle.Stroke>
                <LinearGradientBrush>
                    <GradientStop Color="Yellow" Offset="0"/>
                    <GradientStop Color="LightGreen" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Stroke>
</Rectangle>

效果如下图所示：

在这里插入图片描述

.
.
.

除了 VisualBrush我们没有演示，其它的六种填充方式都已经写好了，如下图：

在这里插入图片描述

.
.
.

下面我们来看一个VisualBrush的例子。为了简单起见，我们的目标是将 Button “复制”一下他的外观，每复制一次，它的外观就透明 20% . . .

代码如下：

<Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="160"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="160"/>
        </Grid.ColumnDefinitions>

	<StackPanel x:Name="stackPanelLeft" Background="White">
            <Button x:Name="realButton" Content="OK" Height="40"/>
        </StackPanel>

	<Button Content=">>>" Grid.Column="1" Margin="5,0" Click="CloneVisual"/>
        <StackPanel x:Name="stackPanelRight" Background="White" Grid.Column="2"/>
</Grid>

当点击中间的按钮时，开始填充 stackPanelRight 中的内容，（复制透明 Button的模样）：

double o = 1.0;  // 用于表示不透明的计数器

private void CloneVisual(object sender, RoutedEventArgs e)
{
	VisualBrush vBrush = new VisualBrush(this.realButton);	// 获取 Button的样子

	// 准备一个 Rect，用于填充 stackPanelRight中的内容
	Rectangle rect = new Rectangle();	
	
	// 获取左边 Button的显示大小
	rect.Width = realButton.ActualWidth;
	rect.Height= realButton.ActualHeight;
	
	rect.Fill = vBrush;	// 将获取的 Button模样填充给 rect
	rect.Opacity = o;	// 设置 Rect的不透明度
	o -= 0.2;		// 每点击按钮一次，不透明度就变化一次
	this.stackPanelRight.Children.Add(rect);	// 将 rect放入准备好的布局之中
}

效果动态图如下所示：

在这里插入图片描述

椭圆

我们来用椭圆来画一个径向渐变的正圆，适当的为它设置一些属性，变的好看一点，

代码如下：

<Ellipse Stroke="Gray" Width="140" Height="140" Cursor="Hand" ToolTip="A Boll">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.2,0.8" RadiusX="0.75"
                 	RadiusY="0.75">
                    <RadialGradientBrush.RelativeTransform>
                        <TransformGroup>
                            <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </RadialGradientBrush.RelativeTransform>
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FF444444" Offset="0.65"/>
                    <GradientStop Color="#FF999999" Offset="1"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
</Ellipse>

其中我们设置了一些属性：

GradientOrigin：开始渐变的点在哪
RotateTransform：翻转
Radius：半径

等等 . . .

效果如下图所示：

在这里插入图片描述

这个蛋是不是比较性感呢 ？

作者：浪子花梦

浪子花梦
关注
  • 10
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
WPF 图形绘制
lvxingzhe3的博客
02-15 1万+
WPF常用 图形绘制的四种方式，Shape,Path,Brush,DrawVisual
VisualBrush画刷
sinat_31608641的博客
10-29 620
VisualBrush派生于TileBrush，TileBrush可以用来重复填充目标区域， 若要使用图像进行绘制，请使用 ImageBrush。 若要通过绘图绘制，请使用 DrawingBrush。 若要通过 Visual 进行绘制,请使用 VisualBrush。 一幅图案填充到目标区域，分别有以下两步骤： 1、从画刷的内容投射到一个小面片（Tile）...
wpf Line
最新发布
波波诸葛伟
04-02 569
这个布局示例通过Canvas提供了一个简单的图形界面，用户可以通过调整滑动条来改变一条线的位置，从而实现动态的视觉效果。这个示例展示了WPF强大的数据绑定功能和对图形元素的精确控制能力，适用于需要图形交互的应用场景。
WPF画椭圆
qq_37189288的博客
04-01 782
<Ellipse Stroke="Gray" Width="140" Height="140" Cursor="Hand" ToolTip="A Boll"> <Ellipse.Fill> <RadialGradientBrush GradientOrigin="0.2,0.8" RadiusX="0.75" RadiusY="0.75">
WPF InkCanvas绘制矩形和椭圆
01-20
前面说到了InkCanvas的基本操作，这里用一个实例来说明具体应用：绘制矩形和椭圆。 效果图 xaml代码 <Window x:Class=WPF_InkCanvas.ROI_InkCanvas xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml xmlns:d=http://schemas.microsoft.com/expression/blend/2008
WPF中使用VisualBrush的实例
三五月儿的专栏
08-26 9609
本文实现一个名为“你来我往”的小程序，该程序管理着“张三”和“李四”两位童鞋拥有的现金，一开始，两人均拥有100美元的现金，随着将现金从其中一人转移至另外一人，两人拥有的现金数在不断变化，程序可以跟踪这种变化，并正确显示每人拥有的现金数。每次最多可以转移三张纸币，纸币的金额可以是5美元、10美元或者20美元。 程序运行后的效果如图1所示，我们点击“张三”右边的“5美元”“10美元”“20美元”按
WPF 在image控件用鼠标拖拽出矩形的实现方法
08-27
主要介绍了WPF 在image控件用鼠标拖拽出矩形的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
wpf 绘制矩形 可动态调整矩形大小
11-04
WPF工程 可绘制多个矩形 绘制结束后可拖动矩形的四个角 动态改变矩形大小
WPF圆角矩形.zip
04-30
小米logo换新，程序员一行代码（border-radius:19px）实现，目前此行代码价值200万。C#/wpf实现
3D长方体绘制 WPF
11-11
WPF 绘制3D长方体，长方体上的六个面显示控件。带动画的旋转的一个Demo
WPF：理解TileBrush（ImageBrush，DrawingBrush和VisualBrush）
Waitforsniping的专栏
02-01 1908
转载地址：http://www.cnblogs.com/mgen/archive/2012/01/15/2323167.html WPF中的TileBrush是DrawingBrush，ImageBrush和VisualBrush的基类。定义着这三种Brush的公共特性。本文以ImageBrush做示例，其他类型读者可以举一反三。   TileBrush的Stretch属性默认是
WPF 放大镜（visualbrush）+水印字体
weixin_51223522的博客
02-06 344
效果如下：Visualbrush本质就是将别人的东西拿到自己的视觉树中。
WPF 中虚线绘制
wqq_9的博客
11-28 5707
这里写自定义目录标题虚线线条在线条组件上设置虚线画笔系统样式自定义样式 虚线 虚线，实际上是指通过实线和空格组成的一系列点集。在WPF中主要有两种设置方式，线条组件、画笔样式。 线条 WPF 中，线条由Line 组件展示。其中通过设置属性“StrokeDashArray” 可以实现虚线的样式，“StrokeDashCap”设置每小段线条的线头样式，“StrokeDashOffset” 设置短线开始...
C# 小白快速上手篇~WPF画线条
Creator丶小鑫的博客
05-18 3918
上一节的时间以及文本名称替换我相信大家都学会了，这节课我们要学的就有点难了，因为这是我最近开发中遇到的问题，很多同学在WPF开发中就会遇到这样一个问题，相信大家对线条都不陌生，但是在界面中显示出对应的线条那就显得无从下手了，控件中找不到，代码又不知道怎么写，那我们该怎么办呢？ 首先我们还是先创建一个WPF项目，然后我们开始显示我们要显示的不同的线条，接下来大家要记住的两行代码，对大家很中国要 ...
WPF 鼠标绘制矩形
yerebluer的博客
05-17 1329
WPF 鼠标绘制矩形
WPF形状绘图
博客
06-22 416
开发工具与关键技术：Visual Studio 2015 作者：邓李庆 撰写时间：2019年6月21日 下面讲一个形状绘图，通过WPF进行编写程序出来的图。形状绘图是一种2D绘图类，为位于System.Windows.Shape空间内。包括最常用的绘图对象有：Line直线，Rectangle矩形，Ellipse椭圆，Polygon多边形，Path路径等；图形对象有属性：Stroke：说明如何绘制的...
WPF绘制线段（直线）的方法
热门推荐
srzhz的专栏
11-03 2万+
（1）如果是绘制单根直线，那么使用Line类。 Line类继承自Shape，Shape继承自FrameworkElement，FrameworkElement继承自UIElement，所以Panel可以直接调用.Children.Add()方法添加Line。 首先在Window中添加一个Canvas，名字是canvas1，那么添加直线的代码就是 Line myLi
wpf thumb旋转
06-21
### 回答1： WPF中的thumb控件是一种小的可拖拽控件，在旋转方面也可以通过设置其旋转角度来实现。旋转时，需要使用Thumb控件的RenderTransform属性，将其设置为一个具体的旋转变换矩阵。具体而言，可以将Thumb控件放入一个RotateTransform控件中，使其具有旋转的特性，同时要注意设置Thumb控件的水平和垂直对齐方式，以避免旋转后位置错乱。除此之外，还可以通过事件绑定来实现Thumb控件的旋转，将Thumb控件的MouseDown和MouseMove事件与鼠标移动事件关联起来，通过计算移动距离和旋转角度，来实现Thumb控件的旋转功能。总之，在WPF中使用Thumb控件实现旋转功能需要注意控件属性的设置和事件的处理，这样才能实现一个完整且有效的Thumb旋转控件。 ### 回答2： 在WPF中，Thumb是一个常见的交互控件，用于调整UI元素的大小或位置。Thumb提供了许多有用的属性和方法，可以轻松处理用户的交互操作，其中一个就是Thumb的旋转。 要旋转Thumb，可以使用RotateTransform对象。首先，在Thumb的模板中定义一个RotateTransform对象： ```xml <ControlTemplate TargetType="{x:Type Thumb}"> <Grid> <Rectangle Fill="{TemplateBinding Background}" /> <Rectangle Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1" /> <Path x:Name="Arrow" Fill="White" Stretch="Uniform" Data="M 0 0 L 6 6 L 0 12 Z" /> <Grid x:Name="RotateGrid"> <Path Fill="Transparent" Data="M -6,-6 L -6,6 L 6,6 L 6,-6 Z" /> <Path Fill="Gray" Data="M -4,-2 L -4,2 L 4,2 L 4,-2 Z" /> <Path Stroke="White" StrokeThickness="2" Data="M -6,-6 L 6,6 M 6,-6 L -6,6" /> </Grid> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsDragging" Value="True"> <Setter TargetName="Arrow" Property="Fill" Value="#FF404040" /> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="Arrow" Property="Fill" Value="#FF404040" /> <Setter TargetName="RotateGrid" Property="RenderTransform"> <Setter.Value> <RotateTransform Angle="45" /> </Setter.Value> </Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> ``` 在这个模板中，我们定义了一个RotateGrid，包含三个Path对象，用于显示旋转的图标。在IsMouseOver触发器中，我们使用Setter设置RotateGrid的RenderTransform属性为RotateTransform对象，将Thumb旋转45度。 通过这种方法，我们可以方便地实现Thumb的旋转交互效果。如果需要更加复杂的旋转操作，也可以使用TransformGroup对象，同时应用多个变换效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值