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

最新推荐文章于 2024-07-02 19:18:39 发布

浪子花梦

最新推荐文章于 2024-07-02 19:18:39 发布

阅读量5k

点赞数 10

分类专栏： WPF 高手之路文章标签： WPF 矩形 XAML 直线椭圆

本文链接：https://blog.csdn.net/weixin_42100963/article/details/105265142

版权

WPF 高手之路专栏收录该内容

15 篇文章 72 订阅

订阅专栏

时间：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
点赞
踩
25

收藏

觉得还不错? 一键收藏
2
评论
《15天玩转WPF》—— 直线、矩形、椭圆的各种画法

时间：2020.4.2，《深入浅出WPF》也学到了最后一章，三百页用了将近一个月 (3.14开始）属实有点慢，因为有个人的一些事情. .. 前面的一些文章都是举出书中核心的知识，有点枯燥这一章学习图形相关的知识，有点小激动 . . .这一章学习过后，就差不多开学了，已经开始进行项目的学习与制作 . . .文章讲解直线、矩形、椭圆的用法，让我们朴实无华的形状变的好看一点 . . ....
复制链接

扫一扫

专栏目录