objekt Canvas

pridanie objektu do Vášho objektu Canvas

A Canvas contains and positions other objects. To add an object to a Canvas, insert it between the <Canvas> tags. The following example adds an Ellipse object to a Canvas. Because the Canvas is the root element, it is a best practice in XML to make any necessary xmlns declarations on that root element.

[hide XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <Ellipse 
     Height="200" Width="200"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

[skryť] [reštart]

A Canvas can contain any number of objects, even other Canvas objects.

nastavenie pozície tohto objektu

Nastavenie pozície v objekte Canvas je možné nastavením pripojených vlastností Canvas.Left a Canvas.Top na danom objekte. Pripojená vlastnosť Canvas.Left špecifikuje vzdialenosť medzi objektom a ľavým okrajom jeho rodičovského objektu Canvas a pripojená vlastnosť Canvas.Top špecifikuje vzdialenosť medzi vnoreným objektom a vrchným okrajom jeho rodičovského objektu Canvas. Nasledujúca ukážka ukazuje elipsu z predchádzajúcej ukážky a umiestni ju 30 pixelov z hora a 30 pixelov z ľava od objektu Canvas.

[skryť XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse 
      Canvas.Left="30" Canvas.Top="30" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

[skryť] [reštart]

Nasledujúca ilustrácia znázorňuje súradnicový systém objektu Canvas a pozíciu elipsy v ňom.

z-súradnica

Štandardne z-súradnica objektu v objekte Canvas je definovaná poradím v akej je deklarovaná. Objekty deklarované neskôr sú v popredí objektu, ktorý bol deklarovaný pred ním. V nasledujúcej ukážke vytvoríme tri elipsy (objekty Ellipse). Všimnite si elipsu deklarovanú ako poslednú (citrónovej farby), že je v popredí pred ostatnými elipsami.

[skryť XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <Ellipse 
      Canvas.Left="5" Canvas.Top="5" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Silver" />
      
  <Ellipse 
      Canvas.Left="50" Canvas.Top="50" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />      
      
  <Ellipse 
      Canvas.Left="95" Canvas.Top="95" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Lime" />     
              
</Canvas>

[skryť] [reštart]

Toto chovanie môžete zmeniť nastavením pripojenej vlastnosti Canvas.ZIndex objektu vo vnútri objektu Canvas. Vyššie hodnoty sú bližšie poprediu, nižšie hodnoty sú ďalej od popredia. Nasledujúca ukážka je podobná predchádzajúcej, s tým rozdielom, že nastavuje hodnoty z-order každel elipsy. Elipsy deklarované skôr sa tentokrát zobrazia na popredí (na vrchu bude strieborná elipsa).

[skryť XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <Ellipse 
      Canvas.ZIndex="3"
      Canvas.Left="5" Canvas.Top="5" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Silver" />
      
  <Ellipse 
      Canvas.ZIndex="2"
      Canvas.Left="50" Canvas.Top="50" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />      
      
  <Ellipse 
      Canvas.ZIndex="1"
      Canvas.Left="95" Canvas.Top="95" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Lime" />     
              
</Canvas>

[skryť] [reštart]

kontrolovanie šírky a výšky

Objekt Canvas, rôzne tvary a mnoho ďalších elementov má vlastnosti Width a Height, ktoré Vám dovoľujú špecifikovať ich rozmery. Nasledujúca ukážka vytvorí elipsu 200 pixelov širokú a 200 pixelov vysokú. Udávanie rozmerov v percentách nie je podporované.

[skryť XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse 
      Canvas.Left="30" Canvas.Top="30" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />

</Canvas>

[skryť] [reštart]

Nasledujúca ukážka ukazuje nastavenie šírky a výšky rodičovského Canvas objektu na 200 a nastaví mu citrónovo zelené pozadie.

[skryť XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="200" Height="200"
   Background="LimeGreen">
    
  <Ellipse 
    Canvas.Left="30" Canvas.Top="30" 
    Height="200" Width="200"
    Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

[skryť] [reštart]

Keď spustíte Vašu ukážku, citrónovo zelený štvorec objektu Canvas bude ohraničený šedým pozadím plug-inu, ktorý hostuje náš Canvas. Zaujímavé je tiež, že elipsa nie je odrezaná, ale prečnieva aj mimo okraje objektu Canvas.

vnorené objekty Canvas

Canvas môže obsahovať aj ďalšie objekty Canvas. Nasledujúca ukážka vytvorí objekt Canvas, ktorý obsahuje ďalšie dva objekty Canvas.

[skryť XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas Height="50" Width="50" Canvas.Left="30" Canvas.Top="30"
      Background="blue"/>
  
  <Canvas Height="50" Width="50" Canvas.Left="130" Canvas.Top="30"
      Background="red"/>
</Canvas>

[skryť] [reštart]

čo ďalej?

Nasledújúca časť kreslenie a vypĺňanie popisuje ako vytvoriť komplexné tvary a ako ich vyplniť jednoduchými farbami, farebnými prechodmi a obrázkami.