Kreslení obrazců

Naučte se kreslit obrazce, jako jsou elipsy, obdélníky, mnohoúhelníky a dráhy. Třída Path je způsob, jak vizualizovat poměrně složitý vektorový jazyk výkresu v uživatelském rozhraní XAML; Můžete například kreslit bezierové křivky.

• Důležitá rozhraní API: Třída Path, Obor názvů Microsoft.UI.Xaml.Shapes, Obor názvů Microsoft.UI.Xaml.Media

Dvě sady tříd definují oblast prostoru v uživatelském rozhraní XAML: třídy obrazců a třídy geometrie . Hlavním rozdílem mezi těmito třídami je, že obrazec má přidružený štětec a lze ho vykreslit na obrazovku, a geometrie jednoduše definuje oblast prostoru a nevykreslí se, pokud nepomáže přispívat informace do jiné vlastnosti uživatelského rozhraní. Obrazec si můžete představit jako UIElement s jeho hranicí definovanou geometrií. Toto téma se věnuje hlavně třídám obrazců .

Třídy Obrazce jsou Line, Ellipse, Rectangle, Polygon, Polyline a Path. Cesta je zajímavá, protože může definovat libovolnou geometrii a třída geometrie je zde zapojena, protože to je jeden způsob, jak definovat části cesty.

Výplň a tah pro obrazce

Aby se obrazec vykreslil na plátno aplikace, musíte k němu přidružit štětec . Nastavte vlastnost Výplňobrazce na požadovaný štětec . Další informace o štětkách najdete v tématu Použití štětců.

Obrazec může mít také okraj, což je čára nakreslená kolem obvodu obrazce. Tah také vyžaduje štětec, který definuje jeho vzhled a měl by mít nenulovou hodnotu pro StrokeThickness. StrokeThickness je vlastnost, která definuje tloušťku obvodu kolem okraje obrazce. Pokud pro štětce nezadáte hodnotu tahu nebo nastavíte StrokeThickness na 0, nebude ohraničení kolem obrazce nakresleno.

Elipsa

Elipsa je tvar s zakřivenou obvodem. Pokud chcete vytvořit základní elipsu, zadejte šířku, výšku a štětec pro výplň.

V dalším příkladu se vytvoří elipsa s šířkou 200 a výškou 200 a jako výplň použije SteelBlue colored SolidColorBrush.

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

Tady je vykreslená elipsa.

V tomto případě je elipsa to, co by většina lidí považovala za kruh, ale to je způsob, jakým deklarujete obrazec kruhu v XAML: použijte elipsu se stejnou šířkou a výškou.

Pokud je elipsa umístěna v rozložení uživatelského rozhraní, jeho velikost se předpokládá, že bude stejná jako obdélník s danou šířkou a výškou; oblast mimo obvod nemá vykreslení, ale stále je součástí velikosti slotu rozložení.

Sada 6 elipsových prvků je součástí šablony ovládacího prvku ProgressRing a 2 soustředné elipsové prvky jsou součástí RadioButton.

Obdélník

Obdélník je čtyřstranný obrazec s protilehlými stranami, které jsou rovny. Pokud chcete vytvořit základní obdélník, zadejte šířku, výšku a výplň.

Rohy obdélníku můžete zaokrouhlit. Chcete-li vytvořit zaoblené rohy, zadejte hodnotu pro vlastnosti RadiusX a RadiusY . Tyto vlastnosti určují osu x a osu y elipsy, která definuje zakřivení rohů. Maximální povolená hodnota radiusX je Šířka dělená dvěma a maximální povolená hodnota RadiusY je Výška dělená dvěma.

Další příklad vytvoří obdélník s šířkou 200 a výškou 100. Používá modrou hodnotu SolidColorBrush pro výplň a černou hodnotu SolidColorBrush pro svůj tah. Nastavili jsme StrokeThickness na 3. Vlastnost RadiusX nastavíme na 50 a radiusY vlastnost na 10, což dává obdélník zaoblené rohy.

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

Tady je vykreslený obdélník.

Existují některé scénáře pro definice uživatelského rozhraní, kdy místo použití obdélníku může být vhodnější ohraničení . Pokud máte v úmyslu vytvořit obdélníkový tvar kolem jiného obsahu, může být lepší použít Border, protože může mít podřízený obsah a automaticky se přizpůsobí kolem něj, než použití pevných rozměrů pro výšku a šířku, jako Obdélník. A Border má také možnost mít zaoblené rohy, pokud nastavíte CornerRadius vlastnost.

Na druhou stranu je obdélník pravděpodobně lepší volbou pro skládání ovládacích prvků. Obdélníkový obrazec se zobrazuje v mnoha šablonách ovládacích prvků, protože se používá jako část "FocusVisual" pro ovládací prvky s fokusem. Kdykoli je ovládací prvek ve vizuálním stavu Zaměřený, je tento obdélník viditelný, v jiných stavech je skrytý.

Polygon

Mnohoúhelník je obrazec s hranicí definovanou libovolným počtem bodů. Hranice se vytvoří propojením čáry z jednoho bodu na další, přičemž poslední bod je připojený k prvnímu bodu. Vlastnost Points definuje kolekci bodů, které tvoří hranici. V JAZYCE XAML definujete body se seznamem odděleným čárkami. V kódu použijete PointCollection k definování bodů a každý jednotlivý bod přidáte jako hodnotu point do kolekce.

Nemusíte explicitně deklarovat body tak, aby počáteční i koncový bod byly zadány jako stejná hodnota bodu . Logika vykreslování polygonu předpokládá, že definujete uzavřený obrazec a implicitně propojí koncový bod s počátečním bodem.

Další příklad vytvoří Mnohoúhelník se 4 body nastavenými na (10,200), (60,140), (130,140)a (180,200). Pro výplň používá hodnotu LightBlueSolidColorBrush a nemá pro tah žádnou hodnotu, takže nemá obrys obvodu.

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

Tady je vykreslený mnohoúhelník.

Návod

Hodnota bodu se často používá jako typ v JAZYCE XAML pro jiné scénáře než deklarování vrcholů obrazců. Bod je například součástí dat události pro dotykové události, takže můžete přesně zjistit, kde v souřadnicovém prostoru došlo k akci dotykového ovládání. Další informace o pointu a jeho použití v XAML nebo kódu najdete v referenčním tématu rozhraní API pro Point.

Řádek

Čára je jednoduše čára nakreslená mezi dvěma body v souřadnicovém prostoru. Čára ignoruje jakoukoli hodnotu zadanou pro výplň, protože neobsahuje žádné vnitřní místo. U čáry nezapomeňte zadat hodnoty vlastností Tah a StrokeThickness , protože jinak se čára nevykreslí.

K zadání obrazce čáry nepoužíváte bodové hodnoty, místo toho použijete samostatné dvojité hodnoty pro X1, Y1, X2 a Y2. To umožňuje minimální označení pro horizontální nebo vertikální linky. Definuje například <Line Stroke="Red" X2="400"/> vodorovnou čáru o délce 400 pixelů. Ostatní vlastnosti X,Y jsou ve výchozím nastavení 0, takže z hlediska bodů by tento XAML nakreslil čáru od (0,0) .(400,0) Pokud byste chtěli, aby začínal v jiném bodě než (0,0), můžete pak pomocí funkce TranslateTransform přesunout celý řádek.

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

Lomená čára

Polyline je podobný mnohoúhelníku v tom, že hranice obrazce je definována sadou bodů, s výjimkou toho, že poslední bod Polyline není připojen k prvnímu bodu.

Poznámka:

V sadě Bodů pro spojnicu můžete explicitně mít stejný počáteční bod a koncový bod, ale v takovém případě byste pravděpodobně místo toho mohli použít mnohoúhelník .

Pokud zadáte výplň pro Polyline, výplň vykreslí vnitřní prostor obrazce, i když počáteční a koncový bod bodů nastavené pro Polyline se neprotínají. Pokud nezadáte výplň, je křivka podobná tomu, co by se vykreslilo, pokud jste zadali několik jednotlivých prvků čáry, kde se počáteční a koncové body po sobě jdoucích čar protínají.

Stejně jako u polygonu definuje vlastnost Points kolekci bodů, které tvoří hranici. V JAZYCE XAML definujete body se seznamem odděleným čárkami. V kódu na pozadí použijete PointCollection k definování bodů a každý jednotlivý bod přidáte jako strukturu Point do kolekce.

Tento příklad vytvoří Polyline se čtyřmi body nastavenými na (10,200), (60,140), (130,140) a (180,200). Tah je definovaný, ale výplň není.

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

Tady je vykreslená polylinie. Všimněte si, že první a poslední body nejsou spojeny obrysem tahu , protože jsou v mnohoúhelníku.

Cesta

Cesta je nejuniverzálnější tvar, protože ji můžete použít k definování libovolné geometrie. Ale s touto všestranností je složitost. Pojďme se teď podívat, jak vytvořit základní cestu v XAML.

Geometrii cesty definujete pomocí vlastnosti Data . Nastavení dat se dá nastavit dvěma způsoby:

• Hodnotu řetězce pro data v XAML můžete nastavit. V tomto formátu hodnota Path.Data používá pro grafiku formát serializace. Tuto hodnotu obvykle neupravujete v textovém tvaru poté, co byla poprvé nastavena. Místo toho použijete nástroje pro návrh, které vám umožní pracovat v návrhu nebo nakreslit metaforu na povrchu. Pak uložíte nebo exportujete výstup a tím získáte soubor XAML nebo fragment řetězce XAML s informacemi Path.Data .
• Vlastnost Data můžete nastavit na jeden objekt geometrie. To lze provést v kódu nebo v XAML. Tato jednoduchá geometrie je obvykle GeometryGroup, která funguje jako kontejner, který může složit více definic geometrie do jednoho objektu pro účely modelu objektu. Nejběžnějším důvodem je to, že chcete použít jednu nebo více křivek a složitých obrazců, které lze definovat jako hodnoty segmentů pro PathFigure, například BezierSegment.

Tento příklad ukazuje cestu , která mohla být výsledkem použití Blendu pro Visual Studio k vytvoření jen několika vektorových obrazců a následnému uložení výsledku jako XAML. Celková cesta se skládá ze segmentu křivky Bezier a segmentu čáry. Tento příklad je určený hlavně k tomu, abyste získali několik příkladů, které prvky existují ve formátu serializace Path.Data a jaké čísla představují.

Tato data začínají příkazem pro přesunutí označeným písmenem "M", který vytvoří absolutní počáteční bod cesty.

První segment je krychlová bezierová křivka, která začíná na a končí na (100,200)(400,175), která je nakreslena pomocí dvou kontrolních bodů (100,25) a (400,350). Tento segment je označen příkazem "C" v řetězci atributu Data .

Druhý segment začíná absolutním příkazem vodorovného řádku "H", který určuje čáru nakreslenou z předchozího koncového bodu (400,175) dílčí cesty do nového koncového bodu (280,175). Protože se jedná o příkaz vodorovného řádku, zadaná hodnota je souřadnice x.

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

Tady je vykreslená cesta.

Další příklad ukazuje použití jiné techniky, kterou jsme probrali: GeometryGroup s PathGeometry. Tento příklad ukazuje použití některých z typů geometrie zapojených do PathGeometry: PathFigure a různé prvky, které mohou tvořit segmenty v PathFigure.Segments.

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

Tady je vykreslená cesta.

Použití PathGeometry může být čitelnější než naplnění řetězce Path.Data . Na druhou stranu Path.Data používá syntaxi kompatibilní s definicemi cest obrázků SVG (Scalable Vector Graphics), takže může být užitečné pro přenos grafiky z SVG nebo jako výstup z nástroje, jako je Blend.