WPF中的图形对象

无所谓จุ๊บ

于 2024-08-09 16:00:00 发布

阅读量1.7k

点赞数 40

分类专栏： C# 文章标签： wpf c# 开发语言

本文链接：https://blog.csdn.net/weixin_45114627/article/details/141026726

版权

C# 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

前言

在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>