Clasa de baza pentru containere in Silverlight este “Panel”. Panel-ul are 2 proprietati publice: Background si Children.
- Background-ul este culoare ce acopera backgroundul panel-ului:
LayoutRoot.Background = new SolidColorBrush(Colors.Red);
<Grid x:Name="LayoutRoot" Background="Blue"/>
- Children este o colectie de item-uri care cunt continute de panel.
Silverlight a creat 3 tipuri de panel-uri:
- StackPanel: un panel cu elemente afisate pe orizontala sau verticala;
<StackPanel Orientation="Vertical" >
<Button Content="Butonul numarul 1"/>
<Button Content="Butonul numarul 2"/>
<TextBox Text="TextBox-ul 1"></TextBox>
</StackPanel>
Elementele se aranseaza se sus in jos in ordinea in care au fost adaugate in xaml.
Item-urile ce sunt continute de un StackPanel au urmatoarele proprietati se sunt influentate de containerul in care se afla:
· HorizontalAlignament – determina cum este aliniat un item in interiorul panel-ului atunci cand este spatiu extra pe orizontala. Se poate alege: Center, Left, Right sau Stretch.
· VerticalAlignament- detrmina cum sa fie aliniat un item in interiorul panel-ului atunci cand este spatiu extra pe vertical. Se poate alege: Center, Top, Bottom, sau Stretch.
· Margin- adauga extra spatiu in jurul item-ului.
· MinWidth si MinHeight- seteaza valoarea minima a inaltimii si latimii item-ului.
· MaxWidth si MaxHeight-seteaza valoarea maxima a inaltimii si latimii item-ului.
· Width si Height- seteaza explicit valoarea inaltimii si latimii item-ului.
- Grid: un panel care aranjeaza elementele pe randuri si colone la fel ca si un tabele;
<Grid ShowGridLines="True" Background="Blue">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Grid.Column="0" Content="0-0"></Button>
<Button Grid.Row="2" Grid.Column="2" Content="2-2"></Button>
<Button Grid.Row="1" Grid.Column="1" Content="1-1" ></Button>
<TextBox Grid.Column="1" Grid.Row="0" Text="1-0" />
<TextBox Grid.Column="1" Grid.Row="2" Text="1-2" />
<TextBox Grid.Column="0" Grid.Row="1" Text="0-1" />
</Grid>
Este cel mai puternic container din Silverlight. Desi liniile de separare a randurilor si coloanelor sunt invisibile ele pot fi setate sa se afiseje pentru a fi mai usor aranjarea elementelor grid-ului.
Fiecare item trebuie sa fie explicit pozitionat in interiorul unei celule, fiind posibila pozitionarea mai multor elemente in aceeasi celula.
Latimea unei coloane poate fi setata:
-absolut : <ColumnDefinition Width="30" />
-auto: <ColumnDefinition Width="Auto"/>
-cu asterix: <ColumnDefinition Width="2*"/>
La fel se poate seta si inaltimea unui rand.
- Canvas: un panel in care elementele sunt pozitionate absolut in functie de coordinate fixe.
<Canvas x:Name="container" >
<TextBlock x:Name="txtDespre"
Canvas.ZIndex="1"
Canvas.Left="20"
Canvas.Top="10">
</TextBlock>
<TextBox Text="hello"
x:Name="txtSalut"
Canvas.Left="20">
</TextBox>
</Canvas>
Pentru a pune un element intr-un canvas este nevoie de a seta proprietatile atasate acestuia Canvas.Left(ce seteaza numarul de pixeli intre partea stanga a elementului sip area stanga a Canvas-ului) si Canvas.Top(ce seteaza numarul de pixeli intre partea de sus a elementului si marginea de sus a Canvasului). Pe langa acestea doua, inca o proprietate pe care o da canvasul item-ului ce il contine, este ZIndex. Acesta este initial 0. Daca ZIndex-ul nu este setat atunci copiii(children) canvas-ului sunt afisati in ordinea in care au fost creati. Pentru a pune elementele in layere diferite in acelasi canvas acestora li se asociaza un ZIndex in functie de layerul dorit. In general acesta se foloseste atunci cand se doreste rearanjarea elementelor programatic. Este nevoie doar de a apela Canvas.SetZIndex(txtName, 1);.
Canvas este un element diferit de toate celelalte elemente: el poate sa deseneze elementele sale componente desi acestea depsesc limitele lui. Asta inseamna ca desi am seta inaltinea si latimea canvasului pe 0 nu ar face nici o diferenta in ceeea ce priveste popularea acestuia. Canvasul lucreaza asa din motive de performanta. E mai usor sa seenezi toti copii fara a mai face verificarea daca acestia incap sau nu il limitele suprafetei delimitate de el. Pentru a scapa de aceasta problema de extindere canvazului i s-a asociat o proprietate “Clip” . Care obiga Canvasul sa Ramana la aceleasi dimentiuni la care a fost setat.