مشاركة عبر

الأشكال و الرسم الأساسي في نظرة عامة WPF

  • مقالة

يوفر هذا الموضوع نظرة عامة حول كيفية الرسم بواسطة كائنات Shape . Shape هو نوع من UIElement التي تمكنك من رسم شكل على الشاشة. لأنها عناصر واجهة المستخدم، يمكن استخدام كائنات Shape داخل عناصر Panel و معظم عناصر التحكم.

Windows Presentation Foundation (WPF) يقدم طبقات عديدة من الوصول إلى الرسومات و تقديم الخدمات. في الطبقة العلوية، يسهل استخدام كائنات Shape وتوفير العديد من المميزات المفيدة مثل المشاركة في والتخطيط نظام الأحداث Windows Presentation Foundation (WPF) .

يشتمل هذا الموضوع على الأقسام التالية.

  • كائنات الأشكال
  • استخدام المسارات و Geometries
  • أشكال الرسومات
  • الأشكال القابلة للتوسيع
  • تحويل الأشكال
  • موضوعات ذات صلة

كائنات الأشكال

WPF يوف عدد من كائناتShape جاهزة الاستخدام . ترث كافة كائنات الشكل فئة Shape. تتضمن كائنات الأشكال المتوفرة Ellipse ، Line ، Path ، Polygon ، Polyline ، و تتشارك كائنات Rectangle.Shape الخصائص الشائعة التالية.

  • Stroke: يصف كيفية تلوين مخطط الشكل.

  • StrokeThickness: يصف سمك مخطط الشكل.

  • Fill: يصف كيفية تلوين داخل الشكل.

  • خصائص البيانات التى تحدد الإحداثيات و الذروات، المقاسة في بكسل بشكل مستقل عن الجهاز .

لأنها تشتق من UIElement ، يمكن استخدام كائنات الشكل داخل لوحات و معظم عناصر التحكم. لوحةCanvas هى خيار جيد بشكل خاص لإنشاء رسومات معقدة لأنه يعتمد الموضع المطلق للكائنات التابعة.

تمكنك فئةLineمنرسم خط بين نقطتين. يظهر المثال التالي عدة طرق لتحديد إحداثيات سطر و خصائص الضغط.

<Canvas Height="300" Width="300">

  <!-- Draws a diagonal line from (10,10) to (50,50). -->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    Stroke="Black"
    StrokeThickness="4" />

  <!-- Draws a diagonal line from (10,10) to (50,50)
       and moves it 100 pixels to the right. -->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    StrokeThickness="4"
    Canvas.Left="100">
    <Line.Stroke>
      <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
        <RadialGradientBrush.GradientStops>
          <GradientStop Color="Red" Offset="0" />
          <GradientStop Color="Blue" Offset="0.25" />
        </RadialGradientBrush.GradientStops>
      </RadialGradientBrush>
    </Line.Stroke>
  </Line>

  <!-- Draws a horizontal line from (10,60) to (150,60). -->
  <Line
     X1="10" Y1="60"
     X2="150" Y2="60"
     Stroke="Black"
     StrokeThickness="4"/>

</Canvas>


' Add a Line Element
Dim myLine As New Line()
myLine.Stroke = 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
myGrid.Children.Add(myLine)


// 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;
myGrid.Children.Add(myLine);


// Add a Line Element
myLine = gcnew Line();
myLine->Stroke = 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;
myGrid->Children->Add(myLine);

يُظهر الرسم التىLine المقدم .

توضيح الخط

على الرغم من أن فئة Line توفر خاصية Fill، تعيينها ليس له أي تأثير لأن Line لا يحتوي على مساحة.

شكل آخر شائع هوEllipse. إنشاء Ellipse بواسطة تعريف Width للشكل و خصائص Height. لرسم دائرة ، حدد Ellipseالذى له قيم Width Height متساوية.

        <Ellipse
        Fill="Yellow"
        Height="100"
        Width="200"
        StrokeThickness="2"
        Stroke="Black"/>



Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes

Namespace SDKSample
    Partial Public Class SetBackgroundColorOfShapeExample
        Inherits Page
        Public Sub New()
            ' Create a StackPanel to contain the shape.
            Dim myStackPanel As New StackPanel()

            ' Create a red Ellipse.
            Dim myEllipse As New Ellipse()

            ' Create a SolidColorBrush with a red color to fill the 
            ' Ellipse with.
            Dim mySolidColorBrush As New SolidColorBrush()

            ' Describes the brush's color using RGB values. 
            ' Each value has a range of 0-255.
            mySolidColorBrush.Color = Color.FromArgb(255, 255, 255, 0)
            myEllipse.Fill = mySolidColorBrush
            myEllipse.StrokeThickness = 2
            myEllipse.Stroke = Brushes.Black

            ' Set the width and height of the Ellipse.
            myEllipse.Width = 200
            myEllipse.Height = 100

            ' Add the Ellipse to the StackPanel.
            myStackPanel.Children.Add(myEllipse)

            Me.Content = myStackPanel
        End Sub

    End Class
End Namespace

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

namespace SDKSample
{
    public partial class SetBackgroundColorOfShapeExample : Page
    {
        public SetBackgroundColorOfShapeExample()
        {
            // Create a StackPanel to contain the shape.
            StackPanel myStackPanel = new StackPanel();

            // Create a red Ellipse.
            Ellipse myEllipse = new Ellipse();

            // Create a SolidColorBrush with a red color to fill the 
            // Ellipse with.
            SolidColorBrush mySolidColorBrush = new SolidColorBrush();

            // Describes the brush's color using RGB values. 
            // Each value has a range of 0-255.
            mySolidColorBrush.Color = Color.FromArgb(255, 255, 255, 0);
            myEllipse.Fill = mySolidColorBrush;
            myEllipse.StrokeThickness = 2;
            myEllipse.Stroke = Brushes.Black;

            // Set the width and height of the Ellipse.
            myEllipse.Width = 200;
            myEllipse.Height = 100;

            // Add the Ellipse to the StackPanel.
            myStackPanel.Children.Add(myEllipse);

            this.Content = myStackPanel;
        }

    }
}

يظهر الشكل التالى مثال عن Ellipse المقدم.

توضيح القطع الناقص

استخدام المسارات و Geometries

تمكنك فئة Path من رسم المنحنيات و الأشكال المعقدة. هذه الأشكال والمنحنيات موضح باستخدام كائنات Geometry. لاستخدامPath, قم بإنشاء Geometry و قم باستخدامه لبتعيين خاصية Path التابعة إلى الكائن Data.

توجد مجموعة متنوعة من كائنات Geometry لتختار من بينها. تصف فئات LineGeometry ، RectangleGeometry ، و EllipseGeometry الأشكال البسيطة نسبياً. لإنشاء أشكال أكثر تعقيداً أو لإنشاء منحنيات ، استخدام PathGeometry.

PathGeometry و PathSegments

يتم احتواء كائناتPathGeometry بواحد أو أكثر من كائناتPathFigure; كلPathFigure يمثل "رقم" مختلف أو "شكل". تتكون كل PathFigure نفسها من كائن PathSegment أو أكثر، كل منهم يمثل جزء متصل من الرسم أو الشكل. أنواع الأجزاء تتضمن التالي: LineSegment ، BezierSegment و ArcSegment

في المثال التالي يُستخدم Pathلرسم منحنى بيزيه التربيعي.

<Path Stroke="Black" StrokeThickness="1">
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigureCollection>
          <PathFigure StartPoint="10,100">
            <PathFigure.Segments>
              <PathSegmentCollection>
                <QuadraticBezierSegment Point1="200,200" Point2="300,100" />
              </PathSegmentCollection>
            </PathFigure.Segments>
          </PathFigure>
        </PathFigureCollection>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

يُظهر الرسم التى الشكل المقدم .

توضيح المسار

للحصول على مزيد من المعلومات حول PathGeometry و كائنات Geometry الأخرى، راجع نظرة عامة على هندسة.

بناء جمل XAML المختصر

في Extensible Application Markup Language (XAML) ، يمكنك أيضاً استخدام بناء جملة خاص مختصرلتصف Path. في المثال التالي، يستخدم بناء الجملة المختصر لرسم شكل مركب.

<Path Stroke="DarkGoldenRod" StrokeThickness="3" 
Data="M 100,200 C 100,25 400,350 400,175 H 280" />

يُظهر الرسم التىPath المقدم .

توضيح المسار

Dataيبدأ سلسلة السمة باستخدام الأمر "moveto"، المشار إليها مع M، يؤسس يؤشر بدء للمسار في إحداثيات الالنظام من Canvas. Pathمعلمات بيانات حساسة. الحرف الكبير M يشير إلى موقع مطلق للنقطة الحالية الجديدة. قد يشير الحرف الصغير m إلى إحداثيات نسبية. المقطع الأول هو مكعب منحنى بيزييهBezier بدءاً من(100,200) و النهايات في (400,175) مرسومة باستخدام نقطتى التحكم (100,25) و (400,350). تتم الإشارة إلى هذا مقطع بواسطة الأمر C في سلسلة السمة Data . مرة أخرى، الحرف الاستهلالي C يشير إلى مسار مطلق; الصغير c سيشير إلى مسار نسبي.

يبدأ المقطع الثاني بأمر أفقي مطلق "lineto" H الذى يحدد خط مرسوم من نقطة النهاية للمسر الفرعى السابق (400,175) إلى نقطة النهاية (280,175) الجديدة. لأنه أمر "lineto" أفقي، القيمة المحددة هى إحداثيات x .

للحصول على بناء جملة المسار الكامل راجع Data و مرجع كيفية القيام بما يلي: إنشاء شكل باستخدام PathGeometry.

أشكال الرسومات

تستخدم كائنات Brush لرسم Stroke و Fill للشكل. في المثال التالي ضغطة و تعبئة Ellipse محددة. لاحظ هذا الإدخال الصالح لـ خصائص الفرشاة يمكن أن تكون كلمة أساسية أو قبمة لون سداسي عشري. لمزيد من المعلومات حول كلمات اللون الأساسية المتوفرة راجع خصائص Colors الفئة في مساحة الاسم System.Windows.Media .

<Canvas Background="LightGray"> 
   <Ellipse
      Canvas.Top="50"
      Canvas.Left="50"
      Fill="#FFFFFF00"
      Height="75"
      Width="75"
      StrokeThickness="5"
      Stroke="#FF0000FF"/>
</Canvas>

يُظهر الرسم التىEllipse المقدم .

قطع ناقص

بدلاً من ذلك، يمكن استخدام خاصية بناء جملة "عنصر" لإنشاءكائن SolidColorBrushبشكل صريح لرسم الشكل بلون خالص.

<!-- This polygon shape uses pre-defined color values for its Stroke and
     Fill properties. 
     The SolidColorBrush's Opacity property affects the fill color in 
     this case by making it slightly transparent (opacity of 0.4) so 
     that it blends with any underlying color. -->
   
<Polygon
    Points="300,200 400,125 400,275 300,200"
    Stroke="Purple" 
    StrokeThickness="2">
    <Polygon.Fill>
       <SolidColorBrush Color="Blue" Opacity="0.4"/>
    </Polygon.Fill>
</Polygon>

يُظهر التوضيح التالى الشكل المقدم .

توضيح SolidColorBrush

يمكن أيضاً لرسم ضغطة شكل ما أو التعبئة مع التدرجات الصور ، ولبأنماط، و أكثر. لمزيد من المعلومات، راجع نظرة عامة على الطلاء بالألوان الصلدة و تدرجاتها.

الأشكال القابلة للتوسيع

Line ، Path ، Polygon ، Polyline ، و Rectangle تحتوي كافة الفئات خاصية Stretch . تحدد هذه الخاصية كيفية تمدد محتويات الكائنShape (الشكل الذى سيرسم) لتعبئة مساحة التخطيط الكائن Shape . تخطيط مساحة كائنShapeهى مقدار المساحة Shapeالتى يتم تخصيصها من قبل نظام التخطيط، إما لوجود Widthصريحة و إعدادHeight أو بسبب HorizontalAlignmentالخاصة به و إعدادات VerticalAlignment . للحصول على معلومات إضافية حول التخطيط في البنية الأساسية لعرض برامج Windows راجع نظرة عامة حول تخطيط النظام.

تأخذ خاصية التمدد إحدى القيم التالية:

  • محتوى الكائنNone:Shape لا يتم تمديدها.

  • ‎ يتم تمديد محتويات الكائنFill: محتويات كائن Shape تمدد لتعبئة مساحة التخطيط به. لا يتم الاحتفاظ بنسبة العرض إلى الارتفاع.

  • Uniform:Shape يتم تمديد محتويات الكائن قدر الإمكان لملء مساحة التخطيط الخاصة به مع الاحتفاظ بنسبة العرض إلى الارتفاع الأصلية.

  • UniformToFill: يتم تمديد محتويات الكائنShape لملء مساحة التخطيط الخاص به بالكامل مع الاحتفاظ بنسبة العرض إلى الارتفاع الأصلية.

لاحظ أن ، عندما يتم تمديد محتويات الكائن Shape يتم تلوين مخطط الكائن Shape بعد تمديدها.

في المثال التالي Polygon يُستخدم لرسم مثلث صغير جدًا من (0,0) الى (0,1) الى (1,1). Polygon الكائن Width و Height يتم تعيينهما إلى 100، و تعين خاصية التمديد لتعبئته. كنتيجة ، يتم تمديد محتويات الكائن Polygon (المثلث) لتعبئة مساحة أكبر.

...
<Polygon
  Points="0,0 0,1 1,1"
  Fill="Blue"
  Width="100"
  Height="100"
  Stretch="Fill"
  Stroke="Black"
  StrokeThickness="2" />
...

...
PointCollection myPointCollection = new PointCollection();
myPointCollection.Add(new Point(0,0));
myPointCollection.Add(new Point(0,1));
myPointCollection.Add(new Point(1,1));

Polygon myPolygon = new Polygon();
myPolygon.Points = myPointCollection;
myPolygon.Fill = Brushes.Blue;
myPolygon.Width = 100;
myPolygon.Height = 100;
myPolygon.Stretch = Stretch.Fill;
myPolygon.Stroke = Brushes.Black;
myPolygon.StrokeThickness = 2;
...

تحويل الأشكال

توفر الفئةTransform الوسائل لتحويل الأشكال في المسطح ثنائي الأبعاد. تتضمن أنواع مختلفة من تحويل التدوير ( RotateTransform) ، مقياس ( ScaleTransform) ، انحراف ( SkewTransform) ، و ترجمة ( TranslateTransform).

تحويل شائع ليطبق للشكل هو استدارة. لتدوير شكل ما، قم بإنشاء RotateTransform وتحديد Angle به . Angle من 45 يدير العنصر 45 درجة باتجاه عقارب الساعة; زاوية 90 تدير العنصر 90 درجة باتجاه عقارب الساعة; و هكذا. عين CenterX و خصائص CenterY إذا كنت تريد التحكم فى النقطة التى حولها يدار العنصر. يتم التعبير عن قيم هذه خاصية على مسافة إحداثي العنصر الذي يتم تحويلها. CenterXوCenterYقيم افتراضية للصفر. وأخيراً، قم بتطبيق RotateTransform الى عنصر. إذا كنت لا تريد للتحويل أن يؤثر على التخطيط، قم بتعيين خاصية RenderTransform للشكل.

في المثال التالي، يُستخدم RotateTransform لتدوير الشكل 45 درجة حول الزاوية العلوية اليسرى (0,0).

<!-- Rotates the Polyline 45 degrees about the point (0,0). -->
<Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" 
  Stroke="Blue" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50">
  <Polyline.RenderTransform>
    <RotateTransform CenterX="0" CenterY="0" Angle="45" />
  </Polyline.RenderTransform>
</Polyline>

في المثال التالي،تم تدوير شكل آخر 45 درجة لكن هذه المرة الدوران حول النقطة (25,50).

<!-- Rotates the Polyline 45 degrees about its center. -->
<Polyline 
  Points="25,25 0,50 25,75 50,50 25,25 25,0" 
  Stroke="Blue" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50"
  RenderTransformOrigin="0.5,0.5">
  <Polyline.RenderTransform>
    <RotateTransform Angle="45" />
  </Polyline.RenderTransform>
</Polyline>

يبين الرسم التوضيحي التالي نتائج تطبيق التحويلين.

استدارات 45 درجة بنقاط مركز مختلفة

في الأمثلة السابقة، تم تطبيق تحويل واحد إلى كل كائن من الأشكال. لتطبيق تحويلات متعددة الى شكل (أو أي عنصر واجهة المستخدم) ، استخدم TransformGroup.

راجع أيضًا:

المبادئ

أمثلية الأداء: الرسومات ثنائية الأبعاد و التصوير

نظرة عامة على الطلاء بالألوان الصلدة و تدرجاتها

نظرة عامة على هندسة

الشروع في استخدام WPF

نظرة عامة حول الحركة