Alakzatok rajzolása

Megtudhatja, hogyan rajzolhat alakzatokat, például három pontot, téglalapot, sokszöget és elérési utat. A Path osztály egy meglehetősen összetett vektoralapú rajznyelv megjelenítésének módja XAML felhasználói felületen; Például Bezier-görbéket rajzolhat.

• Fontos API-k: Elérési út osztály, Microsoft.UI.Xaml.Shapes névtér, Microsoft.UI.Xaml.Media névtér

Két osztálycsoport definiálja a térrégiót az XAML felhasználói felületén: Alakzatosztályok és geometriai osztályok. Az osztályok közötti fő különbség az, hogy egy alakzathoz egy ecset van társítva, és megjeleníthető a képernyőn, és a geometria egyszerűen meghatároz egy térterületet, és csak akkor jelenik meg, ha segít információkat hozzáadni egy másik felhasználói felületi tulajdonsághoz. Az alakzatok olyan UIElement-nek tekinthetők, amelynek határait geometria határozza meg. Ez a témakör elsősorban az alakzatosztályokat ismerteti.

Az alakzat osztályok a Vonal, Ellipszis, Téglalap, Sokszög, Poliline és Útvonal. Az elérési út azért érdekes, mert tetszőleges geometriát definiálhat, és a Geometria osztály is itt szerepel, mert ez az egyik módja az elérési út részeinek definiálásának.

Alakzatok kitöltése és körvonala

Ahhoz, hogy egy alakzatot megjelenítsen az alkalmazásvászonon, hozzá kell rendelnie egy ecsetet . Állítsa be az Kitöltés tulajdonságát az Alakzat esetében a kívánt Ecsetre. Az kefékről további információt az Ecsetek használata című témakörben talál.

Az alakzatokkörvonalat is tartalmazhatnak, amely egy vonal, amely az alakzat szegélye körül húzódik. A Stroke-hoz szükség van egy ecsetre is, amely meghatározza annak megjelenését, és a StrokeThickness értékének nem nulla értékűnek kell lennie. A StrokeThickness egy tulajdonság, amely meghatározza a szegély vastagságát az alakzat széle körül. Ha nem ad meg ecsetértéket a Stroke-hoz, vagy ha a StrokeThickness értéket 0 értékre állítja, akkor az alakzat körüli szegély nem lesz rajzolva.

Ellipszis

Az ellipszis egy ívelt szegélyű alakzat. Alapszintű Ellipszis létrehozásához adja meg a Szélességet, Magasságot, és azt, hogy milyen ecsetet használjon a Kitöltéshez.

A következő példa egy 200 egység széles és 200 egység magas Ellipszis-t hoz létre, amelyhez egy SteelBlue színű SolidColorBrush-t használ kitöltésként.

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

Itt van a renderelt ellipszis.

Ebben az esetben az Ellipszis az, amit a legtöbben körnek tekintenek, de így deklarálhat egy kör alakzatot XAML-ben: használjon Ellipszis-t egyenlő szélességgel és magassággal.

Ha egy ellipszis egy felhasználói felületi elrendezésben van elhelyezve, a mérete megegyezik az adott szélességű és magasságú téglalapéval; a kerületen kívüli terület nem rendelkezik rendereléssel, de továbbra is része az elrendezési pont méretének.

A ProgressRing vezérlő vezérlősablonja 6 Ellipszis elemből áll, és 2 koncentrikus Ellipszis elemi egy RadioButton részei.

Téglalap

A téglalap egy négyoldalas alakzat, amelynek ellentétes oldalai egyenlőek. Alapszintű téglalap létrehozásához adja meg a szélességet, a magasságot és a kitöltést.

A téglalap sarkait lekerekítheti. Lekerekített sarkok létrehozásához adja meg a RadiusX és a RadiusY tulajdonságok értékét. Ezek a tulajdonságok meghatározzák az ellipszis x tengelyét és y tengelyét, amely a sarkok görbéjét definiálja. A RadiusX maximális megengedett értéke a Szélesség osztva kettővel, a RadiusY maximális megengedett értéke pedig a kettővel elosztott magasság.

A következő példa egy 200 szélességű és 100 magasságútéglalapot hoz létre. A Kitöltéshez a SolidColorBrushkék értékét, a Stroke-hoz pedig a SolidColorBrushfekete értékét használja. Beállítottuk a StrokeThickness értékét 3-ra. A RadiusX tulajdonságot 50-esre, a RadiusY tulajdonságot pedig 10-es értékre állítjuk, ami a téglalap lekerekített sarkait adja.

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

Itt látható a renderelt téglalap.

Vannak olyan forgatókönyvek a felhasználói felületi definíciókhoz, amelyekben téglalap helyett célszerűbb lehet szegélyt használni. Ha az a szándéka, hogy téglalap alakzatot hozzon létre más tartalmak köré, érdemesebb lehet Szegélyt használni, mivel ez gyermektartalmat is tartalmazhat, és automatikusan méreteződik a tartalom köré. Ezzel szemben a Téglalap rögzített méreteket használ a magassághoz és a szélességhez. A szegély is rendelkezhet lekerekített sarkokkal, ha beállítja a CornerRadius tulajdonságot.

Másrészt a Rectangle valószínűleg jobb választás vezérlők összeállításához. A téglalapalakzatok számos vezérlősablonban láthatók, mivel a fókuszba helyezhető vezérlők "FocusVisual" részeként használják. Ha a vezérlőelem "Szűrt" vizualizációs állapotban van, ez a téglalap láthatóvá válik, más állapotokban pedig rejtett.

Polygon

A sokszög egy tetszőleges számú pont által meghatározott határral rendelkező alakzat. A határ egy vonal egyik pontról a másikra való csatlakoztatásával jön létre, az utolsó pont pedig az első ponthoz csatlakozik. A Pontok tulajdonság határozza meg a határt alkotó pontok gyűjteményét. Az XAML-ben vesszővel tagolt listával definiálja a pontokat. A mögöttes kódban pointCollection használatával definiálja a pontokat, és minden egyes pontot pontértékként ad hozzá a gyűjteményhez.

Nem kell explicit módon deklarálnia a pontokat, hogy a kezdőpont és a végpont is ugyanazzal a pontértékel legyen megadva. A sokszög renderelési logikája feltételezi, hogy zárt alakzatot definiál, és implicit módon csatlakoztatja a végpontot a kezdőponthoz.

A következő példa létrehoz egy sokszöget , amelynek 4 pontja a következő: (10,200), (60,140), (130,140)és (180,200). A Kitöltésheza SolidColorBrushLightBlue értékét használja, és nincs értéke a Stroke-nak, így nincs szegélyvonala.

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

Itt van a renderelt Polygon.

Jótanács

A pontértéket gyakran használják típusként az XAML-ben az alakzatok csúcsainak deklarálásától eltérő helyzetekben. A Pont például az érintéses események eseményadatainak része, így pontosan tudja, hol történt az érintéses művelet egy koordináta-térben. A Pointról és annak XAML-ben vagy kódban való használatáról további információt a Point API-referenciatémakörében talál.

Sor

A vonal egyszerűen egy vonal, amely a koordinátatér két pontja között húzódik. A sorok figyelmen kívül hagyják a Kitöltéshez megadott értékeket, mert nincs belső térterülete. Vonal esetén mindenképpen adjon meg értékeket a Stroke és a StrokeThickness tulajdonsághoz, mert ellenkező esetben a vonal nem jelenik meg.

Nem pontértékeket használ vonalalakzat megadásához, hanem különálló dupla értékeket használ az X1, Y1, X2 és Y2 értékhez. Ez minimális korrektúrát tesz lehetővé vízszintes vagy függőleges vonalak esetében. Definiál például <Line Stroke="Red" X2="400"/> egy 400 képpont hosszú vízszintes vonalat. A többi X,Y tulajdonság alapértelmezés szerint 0, így ez az XAML egy vonalat rajzol a (0,0) pontból a (400,0) pontig. Ezután a TranslateTransform használatával áthelyezheti a teljes sort, ha azt szeretné, hogy a kezdőpontja ne a (0,0) legyen.

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

Többszögvonal

A poliline hasonló a sokszöghöz , mert az alakzat határát pontkészlet határozza meg, kivéve, hogy a vonallánc utolsó pontja nem kapcsolódik az első ponthoz.

Megjegyzés:

A Polivonalhoz beállított pontokban explicit módon azonos kezdő- és végpont szerepelhet, de ebben az esetben valószínűleg inkább egy sokszöget használhatna.

Ha megad egy kitöltést egy polilinához, a kitöltés az alakzat belső részét festi be, még akkor is, ha a polilinához beállított pontok kezdő- és végpontja nem találkozik. Ha nem ad meg kitöltést, akkor a törtvonal hasonló ahhoz, amit akkor jelenne meg, ha több önálló vonal elemet adott volna meg, amelyeknél az egymást követő vonalak kezdőpontjai és végpontjai metszettek.

A Sokszögekhez hasonlóan a Pontok tulajdonság határozza meg a határt alkotó pontok gyűjteményét. Az XAML-ben vesszővel tagolt listával definiálja a pontokat. A háttérkódban egy PointCollection használatával definiálja a pontokat, és minden egyes pontot Point struktúraként ad hozzá a gyűjteményhez.

Ez a példa létrehoz egy poliline-t , amelynek négy pontja a következőre (10,200)van állítva: , (60,140), (130,140)és (180,200). A határvonal definiálva van, azonban a kitöltés nem.

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

Itt van a renderelt poliline. Figyelje meg, hogy az első és az utolsó pontot nem köti össze a körvonal , mivel sokszögben vannak.

Útvonal

Az elérési út a legsokoldalúbb alakzat , mivel tetszőleges geometria meghatározására használható. De ezzel a sokoldalúsággal összetettség jön létre. Most nézzük meg, hogyan hozhat létre alapszintű elérési utat az XAML-ben.

Egy elérési út geometriája az Data tulajdonsággal határozható meg. Az adatok beállításának két módszere van:

• Az XAML-ben megadhat egy sztringértéket az adatokhoz . Ebben a formátumban a Path.Data érték szerializálási formátumot használ a grafikus elemekhez. Általában nem szerkeszti ezt az értéket szövegként, miután először létrehozták. Ehelyett olyan tervezőeszközöket használ, amelyek lehetővé teszik, hogy egy tervezési vagy rajzi metaforaként dolgozzon egy felületen. Ezután menti vagy exportálja a kimenetet, és ez egy XAML-fájlt vagy XAML-sztringtöredéket biztosít Path.Data-adatokkal .
• Az Adat tulajdonságot egyetlen geometriai objektumra állíthatja be. Ez kódban vagy XAML-ben is elvégezhető. Ez az egyetlen geometria általában egy GeometryGroup, amely tárolóként működik, amely több geometriai definíciót képes egyetlen objektumba egyesíteni az objektummodell céljaira. Ennek leggyakoribb oka az, hogy egy vagy több görbét és összetett alakzatot szeretne használni, amelyek aPathFigure szegmensértékeiként definiálhatók, például a BezierSegment.

Ez a példa egy olyan elérési utat mutat be, amely abból eredhetett, hogy a Blend for Visual Studio csak néhány vektoralakzatot hozott létre, majd az eredményt XAML-ként mentette. A teljes elérési út egy Bezier-görbeszegmensből és egy vonalszegmensből áll. A példa elsősorban arra szolgál, hogy példákat adjon a Path.Data szerializálási formátumában található elemekre és a számokra.

Ez az adat az "M" jellel jelölt áthelyezési paranccsal kezdődik, amely abszolút kezdőpontot hoz létre az elérési úthoz.

Az első szegmens egy köb alakú Bezier-görbe, amely (100,200)-nél kezdődik és (400,175)-nél ér véget, és amelyet a (100,25) és (400,350) vezérlőpontokkal rajzolunk meg. Ezt a szegmenst az Adatattribútum-sztring "C" parancsa jelzi.

A második szegmens egy "H" abszolút vízszintes vonalparancsgal kezdődik, amely az előző részútvégpontból (400,175) egy új végpontra (280,175)rajzolt vonalat határoz meg. Mivel ez egy vízszintes sorparancs, a megadott érték egy x-koordináta.

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

Itt található a renderelt elérési út.

A következő példa a tárgyalt másik technika, a GeometryGroup egy PathGeometry-vel való használatát mutatja be. Ez a példa a PathGeometry: PathFigure és a PathFigure.Segments szegmenseként használható, hozzájáruló geometriatípusok némelyikét gyakorolja.

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

Itt található a renderelt elérési út.

A PathGeometry használata olvashatóbb lehet, mint egy Path.Data sztring feltöltése. Másrészt a Path.Data a Méretezhető vektorgrafika (SVG) képútvonal-definíciókkal kompatibilis szintaxist használ, így hasznos lehet a grafikus elemek SVG-ből történő portolásához, vagy egy olyan eszköz kimeneteként, mint a Blend.