前言
在WPF中可以根据需要在前台绘制自己所需要的几何开状,可设置性很丰富,而且在xaml中很好的实时性,如果是设计时还可以考虑使用Blend for Visual Studio来添加元素,它的设计交互性更高。
1、形状基类Shape
为 Ellipse、Polygon 和 Rectangle 之类的形状元素提供基类。
继承:
派生:
System.Windows.Shapes.Ellipse
System.Windows.Shapes.Line
System.Windows.Shapes.Path
System.Windows.Shapes.Polygon
System.Windows.Shapes.Polyline
System.Windows.Shapes.Rectangle
2、线Line
在两个点之间绘制直线。它的几何位置,主要由X1、Y1、X2、Y2来确定,并且它们是依赖属性。
代码方式创建:
// Add a Line Element
myLine = new Line();
myLine.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
myLine.X1 = 1;
myLine.X2 = 50;
myLine.Y1 = 1;
myLine.Y2 = 50;
myLine.HorizontalAlignment = HorizontalAlignment.Left;
myLine.VerticalAlignment = VerticalAlignment.Center;
myLine.StrokeThickness = 2;
前台界面方式创建:
<Grid>
<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" StrokeDashArray="3" Stroke="Black" StrokeThickness="1"/>
<Line X1="10" Y1="140" X2="260" Y2="140" Stroke="Black" StrokeDashArray="5" StrokeThickness="6"/>
<Line X1="10" Y1="160" X2="260" Y2="160" Stroke="Black" StrokeEndLineCap="Flat" StrokeThickness="6"/>
<Line X1="10" Y1="180" X2="260" Y2="180" Stroke="Black" StrokeEndLineCap="Triangle" StrokeThickness="8"/>
<Line X1="10" Y1="200" X2="260" Y2="200" StrokeEndLineCap="Round" StrokeThickness="10">
<Line.Stroke>
<LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5">
<GradientStop Color="Blue"/>
<GradientStop Offset="1"/>
</LinearGradientBrush>
</Line.Stroke>
</Line>
</Grid>
效果:
3、Rectangle矩形
代码方式:
// Add a Rectangle Element
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;
前台方式:
<Grid Margin="10">
<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>
<!--实心填充-->
<Rectangle Grid.Column="0" Grid.Row="0" Stroke="Black" Fill="LightBlue"/>
<!--线性渐变-->
<Rectangle Grid.Column="2" Grid.Row="0">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#FFB6F8F1" Offset="0"/>
<GradientStop Color="#FF0082BD" Offset="0.25"/>
<GradientStop Color="#FF95DEFF" Offset="0.6"/>
<GradientStop Color="#FF004F72" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--径向渐变-->
<Rectangle Grid.Column="4" Grid.Row="0">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="#FFB6F8F1" Offset="0"/>
<GradientStop Color="#FF0082BD" Offset="0.25"/>
<GradientStop Color="#FF95DEFF" Offset="0.75"/>
<GradientStop Color="#FF004F72" Offset="1.5"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--图片填充-->
<Rectangle Grid.Column="0" Grid.Row="2">
<Rectangle.Fill>
<ImageBrush ImageSource="123.png" Viewport="0,0,0.3,0.15" TileMode="Tile"/>
</Rectangle.Fill>
</Rectangle>
<!--矢量图填充-->
<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="10" RadiusY="10"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
<!--无填充,用线性渐变填充连线-->
<Rectangle Grid.Column="4" Grid.Row="2" StrokeThickness="10">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="White" Offset="0.3"/>
<GradientStop Color="Blue" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
</Grid>
效果:
4、Path 类
绘制一系列相互连接的直线和曲线。
代码方式:
//Add the Path Element
myPath = new Path();
myPath.Stroke = System.Windows.Media.Brushes.Black;
myPath.Fill = System.Windows.Media.Brushes.MediumSlateBlue;
myPath.StrokeThickness = 4;
myPath.HorizontalAlignment = HorizontalAlignment.Left;
myPath.VerticalAlignment = VerticalAlignment.Center;
EllipseGeometry myEllipseGeometry = new EllipseGeometry();
myEllipseGeometry.Center = new System.Windows.Point(50,50);
myEllipseGeometry.RadiusX = 25;
myEllipseGeometry.RadiusY = 25;
myPath.Data = myEllipseGeometry;
前台:
<Path Stroke="Green" Fill="LawnGreen" StrokeThickness="2">
<Path.Data>
<PathGeometry>
<PathFigure IsClosed="True" StartPoint="0,0">
<LineSegment Point="150,0"/>
<LineSegment Point="150,30"/>
<LineSegment Point="90,30"/>
<LineSegment Point="90,150"/>
<LineSegment Point="60,150"/>
<LineSegment Point="60,30"/>
<LineSegment Point="0,30"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
效果:
你会发现它是由PathGeometry来指定它的数据是什么,而PathGeometry 类表示一个可能由弧、曲线、椭圆、直线和矩形组成的复杂形状。所以你可以画出一个十分复杂的图像(当然你要有相像力)。
画线示例:
<Grid Margin="15">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Path Stroke="Black" StrokeThickness="2" Grid.Column="0" Grid.Row="0">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0">
<ArcSegment Point="100,100" Size="50,25" SweepDirection="Clockwise" IsLargeArc="True" RotationAngle="0"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="Black" StrokeThickness="2" Grid.Column="1" Grid.Row="0">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0">
<ArcSegment Point="100,100" Size="50,25" SweepDirection="Clockwise" IsLargeArc="True" RotationAngle="0"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="Black" StrokeThickness="2" Grid.Column="2" Grid.Row="0">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0">
<ArcSegment Point="100,100" Size="50,25" SweepDirection="Clockwise" IsLargeArc="True" RotationAngle="0"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="Black" StrokeThickness="2" Grid.Column="0" Grid.Row="1">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0">
<ArcSegment Point="100,100" Size="50,25" SweepDirection="Clockwise" IsLargeArc="True" RotationAngle="45"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="Black" StrokeThickness="2" Grid.Column="1" Grid.Row="1">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0">
<ArcSegment Point="100,100" Size="60,25" SweepDirection="Clockwise" IsLargeArc="True" RotationAngle="0"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="Black" StrokeThickness="2" Grid.Column="2" Grid.Row="1">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0">
<ArcSegment Point="150,100" Size="50,25" SweepDirection="Clockwise" IsLargeArc="True" RotationAngle="0"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="Black" StrokeThickness="2" Grid.Column="0" Grid.Row="2">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0">
<ArcSegment Point="100,100" Size="50,25" SweepDirection="Clockwise" IsLargeArc="True" RotationAngle="90"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="Black" StrokeThickness="2" Grid.Column="1" Grid.Row="2">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0">
<ArcSegment Point="100,100" Size="50,60" SweepDirection="Clockwise" IsLargeArc="True" RotationAngle="0"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="Black" StrokeThickness="2" Grid.Column="2" Grid.Row="2">
<!--<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0">
<BezierSegment Point1="250,0" Point2="50,200" Point3="300,200"/>
</PathFigure>
</PathGeometry>
</Path.Data>-->
<!--二次方贝塞尔曲线-->
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,200">
<QuadraticBezierSegment Point1="150,-100" Point2="300,200"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</Grid>
<Grid>
<Path Stroke="Black" Fill="LightBlue" StrokeThickness="1">
<Path.Data>
<GeometryGroup>
<PathGeometry>
<PathFigure StartPoint="0,0">
<BezierSegment Point1="250,0" Point2="50,200" Point3="300,200"/>
</PathFigure>
</PathGeometry>
<PathGeometry>
<PathFigure StartPoint="0,0">
<BezierSegment Point1="230,0" Point2="50,200" Point3="300,200"/>
</PathFigure>
</PathGeometry>
<PathGeometry>
<PathFigure StartPoint="0,0">
<BezierSegment Point1="210,0" Point2="50,200" Point3="300,200"/>
</PathFigure>
</PathGeometry>
<PathGeometry>
<PathFigure StartPoint="0,0">
<BezierSegment Point1="190,0" Point2="50,200" Point3="300,200"/>
</PathFigure>
</PathGeometry>
<PathGeometry>
<PathFigure StartPoint="0,0">
<BezierSegment Point1="170,0" Point2="50,200" Point3="300,200"/>
</PathFigure>
</PathGeometry>
<PathGeometry>
<PathFigure StartPoint="0,0">
<BezierSegment Point1="150,0" Point2="50,200" Point3="300,200"/>
</PathFigure>
</PathGeometry>
<PathGeometry>
<PathFigure StartPoint="0,0">
<BezierSegment Point1="130,0" Point2="50,200" Point3="300,200"/>
</PathFigure>
</PathGeometry>
</GeometryGroup>
</Path.Data>
</Path>
</Grid>
5、Ellipse 类
绘制椭圆形。它的高度和高度指定一样时就会画一个整圆,不一致就是一个椭圆,为什么呢?因为椭圆和圆的区别就是如此。
代码创建:
// Add an Ellipse Element
myEllipse = new Ellipse();
myEllipse.Stroke = System.Windows.Media.Brushes.Black;
myEllipse.Fill = System.Windows.Media.Brushes.DarkBlue;
myEllipse.HorizontalAlignment = HorizontalAlignment.Left;
myEllipse.VerticalAlignment = VerticalAlignment.Center;
myEllipse.Width = 50;
myEllipse.Height = 75;
myGrid.Children.Add(myEllipse);
前台:
<Ellipse x:Name="ballR" Height="36" Width="60" Fill="Red" HorizontalAlignment="Left"/>
<Ellipse x:Name="ballG" Height="36" Width="36" Fill="LawnGreen" HorizontalAlignment="Left"/>
<Ellipse x:Name="ballB" Height="36" Width="36" StrokeThickness="5" Stroke="DeepSkyBlue" HorizontalAlignment="Left"/>
效果:
6、Polygon 类
绘制多边形,它是由一系列相互连接的线条构成的闭合形状。是一组点绘制而成。
//Add the Polygon Element
myPolygon = new Polygon();
myPolygon.Stroke = System.Windows.Media.Brushes.Black;
myPolygon.Fill = System.Windows.Media.Brushes.LightSeaGreen;
myPolygon.StrokeThickness = 2;
myPolygon.HorizontalAlignment = HorizontalAlignment.Left;
myPolygon.VerticalAlignment = VerticalAlignment.Center;
System.Windows.Point Point1 = new System.Windows.Point(1, 50);
System.Windows.Point Point2 = new System.Windows.Point(10,80);
System.Windows.Point Point3 = new System.Windows.Point(50,50);
PointCollection myPointCollection = new PointCollection();
myPointCollection.Add(Point1);
myPointCollection.Add(Point2);
myPointCollection.Add(Point3);
myPolygon.Points = myPointCollection;
myGrid.Children.Add(myPolygon);
<Polygon Points="360,44.76 276.97294,224.03418 487.00013,104.02468 236.5639,88.9593 417.01795,223.77416" StrokeThickness="2" Stroke="Red"/>
7、Polyline 类
绘制一系列相互连接的直线。
代码创建:
// Add the Polyline Element
myPolyline = new Polyline();
myPolyline.Stroke = System.Windows.Media.Brushes.SlateGray;
myPolyline.StrokeThickness = 2;
myPolyline.FillRule = FillRule.EvenOdd;
System.Windows.Point Point4 = new System.Windows.Point(1, 50);
System.Windows.Point Point5 = new System.Windows.Point(10, 80);
System.Windows.Point Point6 = new System.Windows.Point(20, 40);
PointCollection myPointCollection2 = new PointCollection();
myPointCollection2.Add(Point4);
myPointCollection2.Add(Point5);
myPointCollection2.Add(Point6);
myPolyline.Points = myPointCollection2;
myGrid.Children.Add(myPolyline);
<Polyline Points="360,44.76 276.97294,224.03418 487.00013,104.02468 236.5639,88.9593 417.01795,223.77416" Stroke="Red"/>
<Polyline Fill="LightSeaGreen" StrokeThickness="2" Stroke="Black" HorizontalAlignment="Left" VerticalAlignment="Center">
<Polyline.Points>
<Point X="1" Y="50"/>
<Point X="10" Y="80"/>
<Point X="50" Y="50"/>
</Polyline.Points>
</Polyline>