WPF 控件专题 Rectangle详解

1、Rectangle介绍

    绘制矩形；作用域为：System.Windows.Shapes；继承Shape。

    Shape的继承链关系：

**************************************************************************************************************

2、Rectangle 常用属性
    Width/Height：宽度/高度。
    
    Fill：Brush对象，填充画刷，给绘制的形状内部填充画刷（颜色）
    
    RadiusX/RadiusY：获取或设置用于使矩形的角变圆的椭圆的 x 轴/ y 轴半径，默认值为0。
    
    RenderedGeometry： 获取一个表示最终呈现的形状的System.Windows.Media.Geometry 对象。
    
    RenderTransform：获取或设置影响此元素的呈现位置的转换信息，翻转设置。
    
    RenderTransformOrigin：获取或设置由RenderTransform声明的任何可能呈现转换的中心点，相对于元素的边界。
    
    Stretch：获取或设置Stretch枚举值，该值描述形状如何填充为其分配的空间。

    Stroke：Brush对象，用于指定Shape边框绘制的方式，又可以理解为边框画刷，给绘制的形状轮廓加上画刷（颜色）

    StrokeThickness：获取或设置Shape边框的宽度。

**************************************************************************************************************

3、具体示例

    后台创建矩形代码如下

Rectangle myRect = new System.Windows.Shapes.Rectangle();
myRect.Stroke = System.Windows.Media.Brushes.Black;
myRect.Fill = System.Windows.Media.Brushes.SkyBlue;
myRect.HorizontalAlignment = HorizontalAlignment.Left;
myRect.VerticalAlignment = VerticalAlignment.Center;
myRect.Height = 50;
myRect.Width = 50;
myGrid.Children.Add(myRect);

    XAML设置矩形

<WrapPanel x:Name="myGrid">
	<!--绘制一个矩形，宽度100、高度100、笔触（Stroke）为Red、填充色为Teal、边框大小为2、水平居左、垂直居中-->
	<Rectangle Margin="10" Width="100" Height="100" HorizontalAlignment="Left" VerticalAlignment="Center" Fill="Teal" 
			   Stroke="Red" StrokeThickness="2"/>
	<!--绘制一个矩形，宽度100、高度100、笔触（Stroke）为Red、填充色为Teal、边框大小为2、圆角X轴半径为50、圆角Y轴半径为20-->
	<Rectangle Margin="10" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="Teal"
			   Stroke="Red" StrokeThickness="2" Stretch="Fill" RadiusX="50" RadiusY="20" />
	<!--使用线性渐变绘制区域，设置Stroke 的大小，控制成空心矩形-->
	<Rectangle Margin="10" StrokeThickness="10" Width="100" Height="100">
		<Rectangle.Stroke>
			<LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
				<GradientStop  Color="YellowGreen" Offset="1.5"/>
			</LinearGradientBrush>
		</Rectangle.Stroke>
	</Rectangle>
	<!--Fill 填充，使用线性渐变绘制区域，GradientSto：  描述渐变中过渡点的位置和颜色-->
	<Rectangle  Margin="10" Width="100" Height="100">
		<Rectangle.Fill>
			<LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
				<GradientStop  Color="#11fd62" Offset="0.1"/>
				<GradientStop  Color="#ff7788" Offset="0.4"/>
				<GradientStop  Color="#99ff88" Offset="0.6"/>
				<GradientStop  Color="#778899" Offset="0.8"/>
			</LinearGradientBrush>
		</Rectangle.Fill>
	</Rectangle>
	<!--绘制矩形，宽度100、高度100、填充背景色为透明、边框（矩形轮廓）颜色为OrangeRed、虚线点阵之间的间隔为5-->
	<Rectangle Width="100" Height="100" Margin="10" Fill="Transparent" Stroke="OrangeRed" StrokeDashArray="5"/>
	<!--使用RectangleGeometry绘制矩形，配合Path使用-->
	<Path Stroke ="OrangeRed" StrokeThickness ="4">
		<Path.Data>
			<RectangleGeometry Rect="10,10,150,80"/>
		</Path.Data>
	</Path >   
</WrapPanel>

4、运行效果图

**************************************************************************************************************

5、总结和扩展

    Rectangle多用于后台绘制，图像标记区域、分隔条。

**************************************************************************************************************