Parteneri oficiali
| SilverLight - Tutorial 1 - Layout Management |
|
SilverLight pune la dispozite mai multe layout-uri pentru design-un aplicatiei web, ceea ce permite un control foarte bun asupra pozitionarii controls-urilor din aplicatia noastra. Cele mai folosite layout-uri sunt :
Canvas Este un layout destul de simplu. In acest layout se introduc controls-uri, iar aceastea de pozitioneaza folosind proprietatile Canvas.Left si Canvas.Top care pot fi atasate componentelor care se afla in canvas. Iata si un exemplu foarte simplu : <UserControl x:Class="SilverlightApplication1.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml Width="400" Height="300"> <Canvas Background="AliceBlue"> <Button Content="Button 1” Width="100" Height="50" Canvas.Left="100" Canvas.Top="100"></Button> <Button Content="Button 2" Width="100" Height="50" Canvas.Left="100" Canvas.Top="200"></Button> </Canvas> </UserControl> Codul highlighted arata modul in care sunt folosite proprietatile Canvas.Left si Canvas.Top aplicate unor component-uri care se afla pe Canvas, in acest caz doua Buttons. Culoarea backround-ului am completat-o folosind auto-complete-ul pus la dispozitie de VS2008. Numele culorilor sunt destul de explicite. Pagina web creata o sa arate cam asa :
Canvas-ul este un layout care poate fi folosit cu mare usurinta, insa el nu permite o prea mare libertate de pozitionare a component-urilor. Daca avem mai multe component-uri pozitionarea lor folosind numai proprietatile Canvas.Left si Canvas.Top ar fi anevoioasa. O mai mare libertate o permite StackPanel layout. StackPanel Dupa cum ii spune si numele, componentele din StackPanel sunt asezate unele sub altele.Un exemplu simplu de folosire a acestui layout :<UserControl x:Class="SilverlightApplication1.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <StackPanel Background="AliceBlue"> <Button Content="Button 1” Width="100" Height="50" Margin="10"></Button> <Button Content="Button 2" Width="100" Height="50" Margin="10"></Button> <Button Content="Button 3" Width="100" Height="50" Margin="10"></Button> </StackPanel></UserControl> Proprietatea Margin stabileste distante intre component-uri. Pagina web obtinuta ar trebui sa arate cam asa :
Propietatea Orientation este implicit Vertical.
StackPanel ofera , in anumite cazuri, o flexibilitate mai buna decat Canvas, dar pentru majoritatea paginilor web nu este de ajuns. Grid Acest layout ofera cea mai mare flexibilitate. Component-urile de pe el pot fi asezate pe mai multe randuri si coloane. Conceptual , grid layout este la fel ca HTML Table . <UserControl x:Class="SilverlightApplication1.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid Background="AliceBlue"> <Grid.RowDefinitions> <RowDefinition Height="60"/> <RowDefinition Height="60"/> <RowDefinition Height="60"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="110"/> <ColumnDefinition Width="110"/> <ColumnDefinition Width="110"/> </Grid.ColumnDefinitions> <Button Content="Button 1" Width="100" Height="50" Grid.Column="1" Grid.Row="0"/> <Button Content="Button 2" Width="100" Height="50" Grid.Column="2" Grid.Row="1"/> <Button Content="Button 3" Width="100" Height="50" Grid.Column="0" Grid.Row="1"/> <Button Content="Button 4" Width="100" Height="50" Grid.Column="1" Grid.Row="2"/> </Grid> </UserControl> RowDefinition si ColumnDefinition definim dimensiunile liniilor si coloanelor. Atunci cand adaugam un component folosind proprietatile Grid.Column si Grid.Row specificam linia si coloana pe care se va afla acesta.Observam ca mai sus am creat doar 3 linii si 3 coloana de dimensiuni fixe. Daca dorim ca dimensiunea sa nu fie una fixa, ci sa fie “restul” ramas din dimensiunea ferestrei , in loc de o valoare folosim “*”. <RowDefinition Height="60"/><RowDefinition Height="*"/> Astfel prima linia va avea inaltimea 60 iar cea de a doua va avea ca Height restul ferestrei. Rezultatul codului de mai sus ar trebui sa fie acesta :
|
