WPF Genel Bakışı İçinde Şekiller ve Temel Çizimler

Bu konu, nesneleri nasıl çizeceğiniz hakkında genel bakış sunar Shape . , ShapeUIElement Ekrana bir şekil çizmenizi sağlayan bir türüdür. UI öğeleri olduklarından, Shape nesneler Panel öğeler ve çoğu denetim içinde kullanılabilir.

Windows Presentation Foundation (WPF), grafik ve işleme hizmetlerine birkaç farklı erişim katmanı sunar. üst katmanda, Shape nesnelerin kullanımı kolaydır ve düzen ve Windows Presentation Foundation (WPF) olay sistemine katılım gibi birçok yararlı özellik sağlar.

Şekil nesneleri

WPF, bir dizi kullanıma kullanım için çok sayıda Shape nesne sağlar. Tüm şekil nesneleri Shape sınıfından devralınır. Kullanılabilir şekil nesneleri,,,, EllipseLine ve içerir PathPolygonPolylineRectangle . Shape nesneler aşağıdaki ortak özellikleri paylaşır.

  • Stroke: Şeklin anahattının nasıl boyanacağını açıklar.

  • StrokeThickness: Şeklin anahattının kalınlığını açıklar.

  • Fill: Şeklin iç kısmının nasıl boyanacağını açıklar.

  • Cihazdan bağımsız piksellerde ölçülen koordinatları ve köşeleri belirtmek için veri özellikleri.

Öğesinden türetildiklerinden UIElement , şekil nesneleri panolar ve çoğu denetim içinde kullanılabilir. CanvasPanel, alt nesnelerinin mutlak konumunu desteklediğinden karmaşık çizimler oluşturmak için özellikle iyi bir seçimdir.

LineSınıfı iki noktaya çizgi çizmenizi sağlar. Aşağıdaki örnek, çizgi koordinatları ve vuruş özelliklerini belirtmek için çeşitli yollar gösterir.

<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
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);

// 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
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)

Aşağıdaki görüntüde işlenen gösterilmektedir Line .

Line illustration

LineSınıfı bir özellik sağlamasına rağmen Fill , bir alanı olmadığından, bu özelliğin etkisi yoktur Line .

Diğer bir yaygın şekil Ellipse . EllipseŞeklin Width ve özelliklerini tanımlayarak oluşturun Height . Bir daire çizmek için, EllipseWidth ve Height değerlerini eşit olan bir değer belirtin.

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

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;
        }
    }
}

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

Aşağıdaki görüntüde, işlenmiş bir örnek gösterilmektedir Ellipse .

Ellipse illustration

Yolları ve geometrileri kullanma

PathSınıfı eğrileri ve karmaşık şekilleri çizmenizi sağlar. Bu eğriler ve şekiller nesneler kullanılarak açıklanmıştır Geometry . Bir kullanmak için Path , oluşturup Geometry nesnenin özelliğini ayarlamak için bunu kullanırsınız PathData .

GeometryAralarından seçim yapabileceğiniz çeşitli nesneler vardır. LineGeometry, RectangleGeometry Ve EllipseGeometry sınıfları görece basit şekilleri anlatmaktadır. Daha karmaşık şekiller oluşturmak veya Eğriler oluşturmak için bir kullanın PathGeometry .

PathGeometry ve PathSegments

PathGeometry nesneler bir veya daha fazla nesneden oluşur PathFigure ; her biri PathFigure farklı bir "şekil" veya şekli temsil eder. Her biri PathFigure bir veya daha fazla nesneden oluşur PathSegment ve her biri şekil veya şeklin bağlı bir bölümünü temsil eder. Segment türleri şunları içerir: LineSegment , BezierSegment , ve ArcSegment .

Aşağıdaki örnekte, bir Path ikinci dereceden Bezier eğrisi çizmek için kullanılır.

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

Aşağıdaki görüntüde işlenmiş şekil gösterilmektedir.

Path illustration

Ve diğer sınıflar hakkında daha fazla bilgi için PathGeometryGeometry bkz. PathGeometry.

XAML kısaltılmış sözdizimi

Extensible Application Markup Language (XAML) ' de, betimleyen özel bir kısaltılmış sözdizimi de kullanabilirsiniz Path . Aşağıdaki örnekte, karmaşık bir şekil çizmek için kısaltılmış sözdizimi kullanılır.

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

Aşağıdaki görüntüde işlenen gösterilmektedir Path .

Path illustration

DataÖznitelik dizesi, ' nin koordinat sistemindeki yol için bir başlangıç noktası kuran M ile gösterilen "MoveTo" komutuyla başlar Canvas . Path veri parametreleri büyük/küçük harfe duyarlıdır. Büyük harf, yeni geçerli nokta için mutlak bir konum gösterir. Küçük harf m, göreli koordinatları gösterir. İlk kesim, (100.200) ve bitiş saati (400.175) ile başlayan üçüncü dereceden Bezier eğrisdir ve iki denetim noktası (100, 25) ve (400.350) kullanılarak çizilir. Bu segment, öznitelik dizesindeki C komutuyla belirtilir Data . Yine, büyük harf C mutlak bir yolu belirtir; küçük harfli c, göreli bir yol gösterir.

İkinci kesim, önceki alt yolun uç noktasından (400.175) yeni bir uç noktaya (280.175) çizilmiş bir çizgi belirten mutlak yatay "lineto" komutu H ile başlar. Yatay bir "lineto" komutu olduğundan, belirtilen değer bir xkoordinatı.

Tüm yol sözdizimi için bkz Data . Data.

Şekilleri boyama

Brush nesneler, bir şeklin ve ' ın boyamak için kullanılır StrokeFill . Aşağıdaki örnekte, öğesinin konturu ve dolgusu Ellipse belirtilmiştir. Fırça özelliklerinin geçerli girişinin bir anahtar sözcük veya onaltılık renk değeri olabileceğini unutmayın. Kullanılabilir renk anahtar sözcükleri hakkında daha fazla bilgi için bkz Colors . ad alanındaki sınıfının özellikleri System.Windows.Media .

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

Aşağıdaki görüntüde işlenen gösterilmektedir Ellipse .

An ellipse

Alternatif olarak, SolidColorBrush şekli düz bir renkle boyamak için açıkça bir nesne oluşturmak üzere özellik öğesi sözdizimini kullanabilirsiniz.

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

Aşağıdaki çizimde, işlenmiş şekil gösterilmektedir.

SolidColorBrush illustration

Ayrıca, bir şeklin konturunu veya degradelerini, resimleri, desenleri ve daha fazlasını boyayabilir. Daha fazla bilgi için bkz. düz renklerle boyama ve degradelere genel bakış.

Uzatılabilir şekiller

Line,, Path , PolygonPolyline Ve Rectangle sınıflarının hepsi bir Stretch özelliğine sahiptir. Bu özellik bir Shape nesnenin içeriğinin (çizilecek şekil) nesnenin düzen alanını doldurmak için nasıl uzatılacağını belirler Shape . ShapeNesnenin düzen alanı, Shape bir açık Width ve Height ayar ya da kendi ayarları nedeniyle, Düzen sistemi tarafından ayrılan alan miktarıdır HorizontalAlignmentVerticalAlignment . Windows Presentation Foundation düzen hakkında daha fazla bilgi için bkz. düzene genel bakış.

Esnetme özelliği aşağıdaki değerlerden birini alır:

  • None: Shape Nesnenin içerikleri genişletilmedi.

  • Fill: Shape Nesnenin içerikleri, düzen alanını dolduracak şekilde uzatılır. En boy oranı korunmaz.

  • Uniform: Shape Nesnenin içerikleri, orijinal en boy oranını korurken düzen alanını doldurmak için mümkün olduğunca uzatılır.

  • UniformToFill: Shape Nesnenin içerikleri, özgün en boy oranını korurken düzen alanını tamamen doldurmak üzere uzatılır.

Bir Shape nesnenin içerikleri uzatıldığında Shape nesnenin ana hattının uzatmadan sonra boyanmış olduğunu unutmayın.

Aşağıdaki örnekte, (0, 0) ile ( Polygon 1, 1) arasında çok küçük bir üçgen çizmek için kullanılır. PolygonNesne Width ve Height 100 olarak ayarlanır ve Esnetme özelliği Fill olarak ayarlanır. Sonuç olarak, Polygon nesnenin içerikleri (üçgeni) daha büyük alanı dolduracak şekilde uzatılır.

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

Şekilleri dönüştürme

TransformSınıfı, şekilleri iki boyutlu bir düzlemde dönüştürmek için yollar sağlar. Farklı dönüştürme türleri arasında döndürme ( RotateTransform ), ölçek ( ScaleTransform ), eğriltme ( SkewTransform ) ve çeviri ( TranslateTransform ) bulunur.

Bir şekle uygulanacak ortak bir dönüşüm bir dönüşdir. Bir şekli döndürmek için, oluşturun RotateTransform ve değerini belirtin Angle . Bir Angle 45, öğe 45 derece saat yönünde döner; bir 90 açı, öğe 90 derece saat yönünde döner ve bu şekilde devam eder. CenterXCenterY Öğesinin döndürüldüğü noktayı denetlemek isterseniz ve özelliklerini ayarlayın. Bu özellik değerleri, dönüştürülmekte olan öğenin koordinat alanında ifade edilir. CenterX ve CenterY varsayılan değerleri sıfır olmalıdır. Son olarak, RotateTransform öğesini öğesine uygulayın. Dönüşümün düzeni etkilemesini istemiyorsanız şeklin RenderTransform özelliğini ayarlayın.

Aşağıdaki örnekte, şeklin RotateTransform sol üst köşesinden (0, 0) bir şekil 45 derece döndürmek için kullanılır.

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

Sonraki örnekte, başka bir şekil 45 derece döndürülür, ancak bu zaman nokta (25, 50) ile döndürülür.

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

Aşağıdaki çizimde, iki dönüştürme uygulamanın sonuçları gösterilmektedir.

45 degree rotations with different center points

Önceki örneklerde, her şekil nesnesine tek bir dönüşüm uygulandı. Bir şekle (veya başka bir kullanıcı arabirimi öğesine) birden çok dönüşüm uygulamak için bir kullanın TransformGroup .

Ayrıca bkz.