OneOnOne -- Tegning

Dette indlæg er del af OneOnOne - et simpelt multiplayer-spil i Silverlight og handler om at tegne i sin Page.xaml.

Et Silverlight-projekt starter med at indeholde en Page.xaml hvor der er defineret et Canvas. Vi skal prøve at tegne en fodboldbane med en bold og en spiller i hver ende.

I mit Canvas indsætter jeg et Rectangle til hvert mål, et Rectangle til hver spiller og en Ellipsis til at være bolden. Målene gøres hvide, den ene spiller gøres brun og den anden mørkeblå. Bolden gøres lysegrå.

<Canvas x:Name="parentCanvas"
        Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Loaded="Page_Loaded" 
        x:Class="OneOnOneClient.Page;assembly=ClientBin/OneOnOneClient.dll"
        Width="400"
        Height="600"
        Background="Green"
        >
  <Rectangle Canvas.Left="125" Canvas.Top="575" Height="25" Width="150" Fill="#FFFFFF" Name="goal1" x:Name="goal1"></Rectangle>
  <Rectangle Canvas.Left="125" Canvas.Top="0" Height="25" Width="150" Fill="#FFFFFF" Name="goal2" x:Name="goal2"></Rectangle>
  <Rectangle Canvas.Left="185" Canvas.Top="520" Height="30" Width="30" Fill="Maroon" Name="player1" x:Name="player1"></Rectangle>
  <Rectangle Canvas.Left="185" Canvas.Top="55" Height="30" Width="30" Fill="Navy" Name="player2" x:Name="player2"></Rectangle>
  <Ellipse Canvas.Left="190" Canvas.Top="290" Height="20" Width="20" Fill="#EEEEEE" Name="ball" x:Name="ball"></Ellipse>
</Canvas>

Dette er en kort forklaring af de attributter som er anvendt på hvert element:

Canvas.Left
Antal pixels fra venstre side af lærredet som elementet befinder sig på.

Canvas.Top
Antal pixels fra toppen af lærredet som elementet befinder sig på.

Height
Angivelse af hvor højt elementet skal være i pixels.

Width
Angivelse af hvor bredt elementet skal være i pixels.

Fill
Hvad der skal fyldes i elementet. Her kan skrives HTML-farver.

x:Name
Dette er navnet som du kan bruge til at finde elementet med i din CodeBehind. Tag ikke fejl af denne attribut og den attribut som hedder Name.

Jeg håber dette giver et lille overblik over hvordan man tegner i Silverlight. Hvis man skal tegne mere, skal man overveje at anvende Expression Blend.