Şekil çizme

Üç nokta, dikdörtgen, çokgen ve yol gibi şekiller çizmeyi öğrenin. Path sınıfı, XAML kullanıcı arabiriminde oldukça karmaşık vektör tabanlı çizim dilini görselleştirmenin yoludur; örneğin Bezier eğrileri çizebilirsiniz.

• Önemli API'ler: Yol sınıfı, Microsoft.UI.Xaml.Shapes ad alanı, Microsoft.UI.Xaml.Media ad alanı

İki sınıf kümesi XAML kullanıcı arabiriminde bir alan bölgesi tanımlar: Şekil sınıfları ve Geometri sınıfları. Bu sınıflar arasındaki temel fark, bir Şeklin kendisiyle ilişkilendirilmiş bir fırçaya sahip olması ve ekrana işlenebiliyor olmasıdır ve Geometri yalnızca bir alan bölgesi tanımlar ve başka bir kullanıcı arabirimi özelliğine bilgi katkıda bulunmaya yardımcı olmadığı sürece işlenmez. Bir Şekli, sınırı Geometri tarafından tanımlanan bir UIElement olarak düşünebilirsiniz. Bu konu genellikle Şekil sınıflarını kapsar.

Şekil sınıfları Çizgi, Elips, Dikdörtgen, Poligon, Çok Çizgi ve Yol'dur. Yol , rastgele bir geometri tanımlayabildiği için ilginçtir ve Geometri sınıfı burada yer alır çünkü yol bölümlerini tanımlamanın bir yolu budur.

Şekiller için Dolgu ve Kontur

Bir Şeklin uygulama tuvalinde işlenmesi için fırçayı onunla ilişkilendirmeniz gerekir. ŞeklinFill özelliğini istediğiniz Fırça olarak ayarlayın. Fırçalar hakkında daha fazla bilgi için bkz. Fırçaları kullanma.

Bir Şekil, şeklin çevresine çizilmiş bir çizgi olan bir Vuruşa da sahip olabilir. Vuruş ayrıca görünümünü tanımlayan bir Fırça gerektirir ve StrokeThickness için sıfır olmayan bir değere sahip olmalıdır. StrokeThickness , şekil kenarı çevresinde çevrenin kalınlığını tanımlayan bir özelliktir. Vuruş için bir Fırça değeri belirtmezseniz veya StrokeThickness değerini 0 olarak ayarlarsanız, şeklin etrafındaki kenarlık çizılmaz.

Elips

Elips, eğri çevresi olan bir şekildir. Temel bir Elips oluşturmak için Genişlik, Yükseklik ve dolgu için bir Fırça belirtin.

Sonraki örnek, Genişliği 200 ve Yüksekliği 200 olan bir Elips oluşturur ve Dolgusu olarak SteelBlue renkli SolidColorBrush kullanır.

<Ellipse Fill="SteelBlue" Height="200" Width="200" />

var ellipse1 = new Ellipse();
ellipse1.Fill = new SolidColorBrush(Colors.SteelBlue);
ellipse1.Width = 200;
ellipse1.Height = 200;

// When you create a XAML element in code, you have to add
// it to the XAML visual tree. This example assumes you have
// a panel named 'layoutRoot' in your XAML file, like this:
// <Grid x:Name="layoutRoot>
layoutRoot.Children.Add(ellipse1);

İşte işlenen Elipse.

Bu durumda, Ellipse çoğu kişinin daire olarak kabul ettiği şekildir, ancak XAML'de daire şeklini böyle tanımlarsınız: Ellipse kullanın ve Width ile Height eşit olmalıdır.

Bir Elipse kullanıcı arabirimi düzeninde konumlandırıldığında, boyutunun bu Genişlik ve Yükseklik'e sahip bir dikdörtgenle aynı olduğu varsayılır; çevre dışındaki alanın işlemesi yoktur, ancak yine de düzen yuvası boyutunun bir parçasıdır.

6 Elips öğesi kümesi ProgressRing denetiminin denetim şablonunun bir parçasıdır ve 2 eşmerkezli Elips öğesi RadioButton öğesinin parçasıdır.

Dikdörtgen

Dikdörtgen, karşı tarafları eşit olan dört taraflı bir şekildir. Temel bir Dikdörtgen oluşturmak için Genişlik, Yükseklik ve Dolgu belirtin.

Dikdörtgenin köşelerini yuvarlayabilirsiniz. Yuvarlatılmış köşeler oluşturmak için RadiusX ve RadiusY özellikleri için bir değer belirtin. Bu özellikler, köşelerin eğrisini tanımlayan elipsin x ekseni ve y eksenini belirtir. İzin verilen en yüksek RadiusX değeri , ikiye bölünen Genişlik değeridir ve radiusy'nin izin verilen maksimum değeri yükseklik ikiye bölünür.

Sonraki örnek, Genişliği 200 ve Yüksekliği 100 olan bir Dikdörtgen oluşturur. Dolgusu için SolidColorBrushMavi değerini ve Vuruşu için SolidColorBrush'ınSiyah değerini kullanır. StrokeThickness değerini 3 olarak ayarladık. RadiusX özelliğini 50, RadiusY özelliğini de 10 olarak ayarlıyoruz ve bu da Dikdörtgen'e yuvarlatılmış köşeler sağlar.

<Rectangle Fill="Blue"
           Width="200"
           Height="100"
           Stroke="Black"
           StrokeThickness="3"
           RadiusX="50"
           RadiusY="10" />

var rectangle1 = new Rectangle();
rectangle1.Fill = new SolidColorBrush(Colors.Blue);
rectangle1.Width = 200;
rectangle1.Height = 100;
rectangle1.Stroke = new SolidColorBrush(Colors.Black);
rectangle1.StrokeThickness = 3;
rectangle1.RadiusX = 50;
rectangle1.RadiusY = 10;

// When you create a XAML element in code, you have to add
// it to the XAML visual tree. This example assumes you have
// a panel named 'layoutRoot' in your XAML file, like this:
// <Grid x:Name="layoutRoot>
layoutRoot.Children.Add(rectangle1);

İşlenen Dikdörtgen aşağıdadır.

UI tanımları için Dikdörtgen yerine Kenarlık kullanmanın daha uygun olabileceği bazı senaryolar vardır. Amacınız diğer içeriğin çevresinde bir dikdörtgen şekil oluşturmaksa, Kenarlık'ı kullanmak daha iyi olabilir çünkü içeriğe çocuk elemanlar ekleyebilir ve Rectangle gibi yükseklik ve genişlik için sabit boyutlar kullanmak yerine bu içeriğe otomatik olarak uyum sağlar. Kenarlık özelliğini ayarlarsanız, CornerRadius için köşeleri yuvarlatma seçeneği de vardır.

Öte yandan, dikdörtgen muhtemelen denetim bileşimi için daha iyi bir seçimdir. Dikdörtgen şekli birçok denetim şablonunda görülür çünkü odaklanabilir denetimler için "FocusVisual" parçası olarak kullanılır. Denetim "Odaklanmış" görsel durumunda olduğunda, bu dikdörtgen görünür hale gelir, diğer durumlarda gizlenir.

Poligon

Çokgen, rastgele sayıda nokta tarafından tanımlanan sınıra sahip bir şekildir. Sınır, bir noktadan diğerine bir çizgi bağlanarak ve son nokta ilk noktaya bağlanarak oluşturulur. Points özelliği, sınırı oluşturan nokta koleksiyonunu tanımlar. XAML'de noktaları virgülle ayrılmış bir listeyle tanımlarsınız. Kod arkasında, noktaları tanımlamak için PointCollection kullanırsınız ve her noktayı koleksiyona bir Point değeri olarak eklersiniz.

Hem başlangıç noktası hem de bitiş noktası aynı Nokta değeri olarak belirtecek şekilde noktaları açıkça bildirmeniz gerekmez. Çokgen için işleme mantığı, kapalı bir şekil tanımladığınız varsayılır ve bitiş noktasını örtük olarak başlangıç noktasına bağlar.

Sonraki örnek, 4 noktasının (10,200), (60,140), (130,140), ve (180,200) olarak ayarlandığı Çokgeni oluşturur. Dolgusu için SolidColorBrushLightBlue değerini kullanır ve Kontur değeri olmadığından çevre ana hattı yoktur.

<Polygon Fill="LightBlue"
         Points="10,200,60,140,130,140,180,200" />

var polygon1 = new Polygon();
polygon1.Fill = new SolidColorBrush(Colors.LightBlue);

var points = new PointCollection();
points.Add(new Windows.Foundation.Point(10, 200));
points.Add(new Windows.Foundation.Point(60, 140));
points.Add(new Windows.Foundation.Point(130, 140));
points.Add(new Windows.Foundation.Point(180, 200));
polygon1.Points = points;

// When you create a XAML element in code, you have to add
// it to the XAML visual tree. This example assumes you have
// a panel named 'layoutRoot' in your XAML file, like this:
// <Grid x:Name="layoutRoot>
layoutRoot.Children.Add(polygon1);

İşte görüntülenen Çokgen.

İpucu

Nokta değeri genellikle şekillerin köşelerini bildirme dışında senaryolar için XAML'de bir tür olarak kullanılır. Örneğin Nokta, dokunma olaylarının olay verilerinin bir parçasıdır, böylece bir koordinat alanında dokunma eyleminin nerede gerçekleştiğini tam olarak öğrenebilirsiniz. Point ve XAML veya kodda kullanma hakkında daha fazla bilgi için Point için API başvuru konusuna bakın.

Satır

Çizgi, koordinat alanında iki nokta arasına çizilmiş bir çizgidir. Satır, iç alanı olmadığından Dolgu için sağlanan değerleri yoksayar. Çizgi için, Stroke ve StrokeThickness özellikleri için değerleri belirttiğinizden emin olun, çünkü aksi takdirde Çizgi işlenmez.

Çizgi şekli belirtmek için Nokta değerlerini kullanmaz, bunun yerine X1, Y1, X2 ve Y2 için ayrı Çift değerleri kullanırsınız. Bu, yatay veya dikey çizgiler için en düşük işaretlemeyi sağlar. Örneğin, <Line Stroke="Red" X2="400"/> 400 piksel uzunluğunda bir yatay çizgi tanımlar. Varsayılan olarak diğer X,Y özellikleri 0'dır, bu nedenle noktalar açısından bu XAML (0,0)'den (400,0)'ye bir çizgi çizer. Ardından, (0,0) dışında bir noktada başlamasını istiyorsanız, tüm Çizgiyi taşımak için TranslateTransform kullanabilirsiniz.

<Line Stroke="Red" X2="400"/>

var line1 = new Line();
line1.Stroke = new SolidColorBrush(Colors.Red);
line1.X2 = 400;

// When you create a XAML element in code, you have to add
// it to the XAML visual tree. This example assumes you have
// a panel named 'layoutRoot' in your XAML file, like this:
// <Grid x:Name="layoutRoot>
layoutRoot.Children.Add(line1);

Çoklu Çizgi

Polyline, şeklin sınırının bir nokta kümesi tarafından tanımlandığı Çokgen'e benzer, ancak Polyline'daki son nokta ilk noktaya bağlı değildir.

Uyarı

Çok Çizgi için noktalar kümesinde açıkça aynı başlangıç noktası ve bitiş noktasına sahip olabilirsiniz, ancak bu durumda büyük olasılıkla bunun yerine çokgen kullanmış olabilirsiniz.

Bir PolylineFill belirtirseniz, Fill şeklin iç alanını boyar, Noktaların başlangıç noktası ve bitiş noktası Polyline için ayarlanmış olsa bile kesişmese de. Dolgu belirtmezseniz, Çoklu Çizgi, ardışık çizgilerin başlangıç ve bitiş noktalarının kesiştiği birkaç ayrı Çizgi öğesi belirtmiş olmanız durumundaki çizimle benzer şekilde işlenir.

Çokgende olduğu gibi Points özelliği de sınırı oluşturan nokta koleksiyonunu tanımlar. XAML'de noktaları virgülle ayrılmış bir listeyle tanımlarsınız. Arka planda kod, noktaları tanımlamak için PointCollection kullanılır ve her noktayı koleksiyona Point yapısı olarak eklersiniz.

Bu örnek, (10,200), (60,140), (130,140) ve (180,200) olarak ayarlanan dört noktalı bir Çok Çizgi oluşturur. Kontur tanımlanır, ancak Dolgu tanımlanmaz.

<Polyline Stroke="Black"
          StrokeThickness="4"
          Points="10,200,60,140,130,140,180,200" />

var polyline1 = new Polyline();
polyline1.Stroke = new SolidColorBrush(Colors.Black);
polyline1.StrokeThickness = 4;

var points = new PointCollection();
points.Add(new Windows.Foundation.Point(10, 200));
points.Add(new Windows.Foundation.Point(60, 140));
points.Add(new Windows.Foundation.Point(130, 140));
points.Add(new Windows.Foundation.Point(180, 200));
polyline1.Points = points;

// When you create a XAML element in code, you have to add
// it to the XAML visual tree. This example assumes you have
// a panel named 'layoutRoot' in your XAML file, like this:
// <Grid x:Name="layoutRoot>
layoutRoot.Children.Add(polyline1);

İşte oluşturulan Poliçizgi. İlk ve son noktaların, bir Polygon'da oldukları gibi Stroke ana hattı ile bağlanmadıklarına dikkat edin.

Yol

Path, rastgele bir geometri tanımlamak için kullanabileceğiniz en çok yönlü Şekildir. Ancak bu çok yönlülük karmaşıklık da beraberinde geliyor. Şimdi XAML'de temel yol oluşturmayı inceleyelim.

Bir yolun geometrisini Data özelliğiyle tanımlarsınız. Veri ayarlamaya yönelik iki teknik vardır:

• XAML'deki Veriler için bir dize değeri ayarlayabilirsiniz. Bu formda Path.Data değeri grafikler için bir serileştirme biçimi tüketiyor. Genellikle bu değeri ilk oluşturulduktan sonra dize biçiminde metin biçiminde düzenlemezsiniz. Bunun yerine, bir tasarımda çalışmanızı veya bir yüzey üzerinde metafor çizmenizi sağlayan tasarım araçlarını kullanırsınız. Ardından çıkışı kaydeder veya dışarı aktarırsınız ve bu size Path.Data bilgileriyle bir XAML dosyası veya XAML dize parçası verir.
• Data özelliğini tek bir Geometry nesnesine ayarlayabilirsiniz. Bu işlem kodda veya XAML'de yapılabilir. Bu tek Geometry genellikle nesne modelinin amaçları doğrultusunda birden çok geometri tanımını tek bir nesneye birleştirebilen bir kapsayıcı işlevi gören bir GeometryGroup'tır. Bunu yapmanın en yaygın nedeni, PathFigure için Segment değerleri olarak tanımlanabilen bir veya daha fazla eğri ve karmaşık şekil kullanmak istemenizdir; örneğin BezierSegment.

Bu örnek, Visual Studio için Blend kullanarak yalnızca birkaç vektör şekli oluşturmanın ve ardından sonucun XAML olarak kaydedilmesinin sonucunda ortaya çıkan bir Yolu gösterir. Toplam Yol , bezier eğri segmenti ve çizgi kesiminden oluşur. Örnek temel olarak Path.Data serileştirme biçiminde hangi öğelerin bulunduğuna ve sayıların neleri temsil ettiğinize ilişkin bazı örnekler vermeye yöneliktir.

Bu Veriler , yol için mutlak bir başlangıç noktası oluşturan "M" ile gösterilen move komutuyla başlar.

İlk segment, (100,200) konumunda başlayan, (400,175) konumunda biten ve (100,25) ile (400,350) denetim noktaları kullanılarak çizilen bir kübik Bezier eğrisidir. Bu kesim, Data öznitelik dizesindeki "C" komutuyla gösterilir.

İkinci kesim, önceki alt yol uç noktasından yeni bir uç noktaya (400,175)(280,175)çizilmiş bir çizgi belirten "H" mutlak yatay çizgi komutuyla başlar. Bu bir yatay çizgi komutu olduğundan, belirtilen değer bir x koordinatıdır.

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

İşlenen Yol aşağıdadır.

Sonraki örnekte ele aldığımız diğer tekniğin kullanımı gösterilmektedir: PathGeometry ile GeometryGroup. Bu örnek, PathGeometry'nin parçası olarak kullanılabilecek katkıda bulunan geometri türlerinden bazılarını işler: PathFigure ve PathFigure.Segments içinde bir segment olabilecek çeşitli öğeler.

<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
    <Path.Data>
        <GeometryGroup>
            <RectangleGeometry Rect="50,5 100,10" />
            <RectangleGeometry Rect="5,5 95,180" />
            <EllipseGeometry Center="100, 100" RadiusX="20" RadiusY="30"/>
            <RectangleGeometry Rect="50,175 100,10" />
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigureCollection>
                        <PathFigure IsClosed="true" StartPoint="50,50">
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <BezierSegment Point1="75,300" Point2="125,100" Point3="150,50"/>
                                    <BezierSegment Point1="125,300" Point2="75,100"  Point3="50,50"/>
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathFigureCollection>
                </PathGeometry.Figures>
            </PathGeometry>
        </GeometryGroup>
    </Path.Data>
</Path>

var path1 = new Microsoft.UI.Xaml.Shapes.Path();
path1.Fill = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 204, 204, 255));
path1.Stroke = new SolidColorBrush(Colors.Black);
path1.StrokeThickness = 1;

var geometryGroup1 = new GeometryGroup();
var rectangleGeometry1 = new RectangleGeometry();
rectangleGeometry1.Rect = new Rect(50, 5, 100, 10);
var rectangleGeometry2 = new RectangleGeometry();
rectangleGeometry2.Rect = new Rect(5, 5, 95, 180);
geometryGroup1.Children.Add(rectangleGeometry1);
geometryGroup1.Children.Add(rectangleGeometry2);

var ellipseGeometry1 = new EllipseGeometry();
ellipseGeometry1.Center = new Point(100, 100);
ellipseGeometry1.RadiusX = 20;
ellipseGeometry1.RadiusY = 30;
geometryGroup1.Children.Add(ellipseGeometry1);

var pathGeometry1 = new PathGeometry();
var pathFigureCollection1 = new PathFigureCollection();
var pathFigure1 = new PathFigure();
pathFigure1.IsClosed = true;
pathFigure1.StartPoint = new Windows.Foundation.Point(50, 50);
pathFigureCollection1.Add(pathFigure1);
pathGeometry1.Figures = pathFigureCollection1;

var pathSegmentCollection1 = new PathSegmentCollection();
var pathSegment1 = new BezierSegment();
pathSegment1.Point1 = new Point(75, 300);
pathSegment1.Point2 = new Point(125, 100);
pathSegment1.Point3 = new Point(150, 50);
pathSegmentCollection1.Add(pathSegment1);

var pathSegment2 = new BezierSegment();
pathSegment2.Point1 = new Point(125, 300);
pathSegment2.Point2 = new Point(75, 100);
pathSegment2.Point3 = new Point(50, 50);
pathSegmentCollection1.Add(pathSegment2);
pathFigure1.Segments = pathSegmentCollection1;

geometryGroup1.Children.Add(pathGeometry1);
path1.Data = geometryGroup1;

// When you create a XAML element in code, you have to add
// it to the XAML visual tree. This example assumes you have
// a panel named 'layoutRoot' in your XAML file, like this:
// <Grid x:Name="layoutRoot">
layoutRoot.Children.Add(path1);

İşlenen Yol aşağıdadır.

PathGeometry kullanmak, Path.Data dizesini doldurmaktan daha okunabilir olabilir. Öte yandan , Path.Data Ölçeklenebilir Vektör Grafikleri (SVG) görüntü yolu tanımlarıyla uyumlu bir söz dizimi kullanır, bu nedenle SVG'den grafik taşıma veya Blend gibi bir araçtan çıkış olarak yararlı olabilir.

UWP ve WinUI 2

Önemli

Bu makaledeki bilgiler ve örnekler, Windows Uygulama SDK'sı ve WinUI 3kullanan uygulamalar için iyileştirilmiştir, ancak genellikle WinUI 2kullanan UWP uygulamaları için geçerlidir. Platforma özgü bilgiler ve örnekler için UWP API başvurusuna bakın.

Bu bölüm, denetimi bir UWP veya WinUI 2 uygulamasında kullanmak için ihtiyacınız olan bilgileri içerir.

Bu şekillerin API'leri Windows.UI.Xaml.Shapes ad alanında bulunur.

• UWP API'leri:Path sınıfı, Windows.UI.Xaml.Shapes ad alanı, Windows.UI.Xaml.Media ad alanı