Controale in WPF:
In WPF exista cateva tipuri de controale container. Un astfel de container poate gazdui orice tip de continut (Content): string, obiect, UIElement etc. Containerele pot fi clasificate in 4 categorii:
- ContentControl: poate “gazdui” un singur element copil: Content. Window deriva din ContentControl, ceea ce inseamna ca o fereastra poate gazdui doar un singur element. Elementul gazduit poate fi de orice tip (object, string, UIElement etc).
- HeaderedContentControl: Este asemanator cu ContentControl cu diferenta ca acest control are o parte (proprietate) header in plus fata de Content. Exemple de controale: GroupBox, Expander, TabItem etc
- ItemsControl: Acest tip de control poate gazdui multiple obiecte, insa nu ca si Content ci ca ItemsControl. Exemple de astfel de controale ListBox, ListView.
- HeaderedItemsControl: Contine o colectie de elemente care au, fiecare, un header distinct. TreeView este un exemplu de element de tip HeaderedItemsControl. Alte controale care deriva din HeaderedItemsControl sunt ToolBar si MenuItem.
Observatie: In XAML proprietatea Content a unui control poate fi stabilita in 2 moduri:
<Button Content="This is a Button" />
sau:
<Button>This is a Button</Button>
care sunt echivalente.
A doua metoda de a stabili continutul unui control ofera posibilitatea de a crea continut complex unui control, de exemplu, in loc de text, folosirea unui alt control cu rol de continut:
<Button>
<Ellipse Width="25" Height="15" Fill="Aqua" />
</Button>
In exemplul anterior continutul butonului nu este text, ci un alt element, Ellipse (de tip Shape).
O clasa foarte importanta de controale in WPF sunt cele de tip Layout Containers. Acestea sunt, asa cum ne putem da seama din nume, containere destinate sa gazduiasca alte controale/obiecte. Rolul lor este acela de a gazdui, ca si continut, mai multe elemente, spre deosebire de controalele care pot avea ca si Content un singur obiect. Continutul este adaugat prin intermediul proprietatii Children, care este o proprietate de tip colectie. Layout Containers nu au proprietatea Content. Toate elementele copil sunt adaugate folosind Children.
Layout Containers standard sunt:
- Panel
- Grid
- UniformGrid
- Canvas
- StackPanel
- WrapPanel
- DockPanel
- Border
- ScrollViewer
- Viewbox
- TabControl
Panel: Este o clasa abstracta, clasa din care deriva fiecare container. Toate containerele sutt derivate din Panel. Cele mai importante proprietati sunt: Z-Index, Children, Background.
Grid: Este containerul prstabilit pe care il include o fereastra nou creata cu ajutorul Visual Studio. In primul proiect creat in articolul anterior, primul nod al elementului window este Grid. Acest control permite pozitionarea elementelor copil in interiorl celulelor definite de programator. Cu alte cuvinte, pentru un grid se definesc celule (RowDefinition si ColumnDefinition, despre care voi scrie imediat) iar fiecarui element copil i se atribuie o astfel de celula. Daca unui element nu ii este atribuit un loc intr-o celula a grid-ului, atunci el va fi pozitionat in prima celula (randul 0, coloana 0).
Exemplu:
<Window x:Class="Conatainers.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="250" Width="250"> <Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Rectangle Fill="Blue" Width="25" Height="25"/> <Ellipse Fill="Green" Width="25" Height="25" Grid.Column="0" Grid.Row="1"/> <Ellipse Fill="Red" Width="25" Height="25" Grid.Column="1" Grid.Row="0"/> <Rectangle Fill="YellowGreen" Width="25" Height="25" Grid.Column="1" Grid.Row="1"/> </Grid> </Window>
Rezultatul este urmatorul:
De remarcat ca la redimensionarea ferestrei grid-ul este si el redimensionat iar elementele din grid sunt in mod automat repozitionate.
Exista posibilitatea stabilirii dimensiunii celulelor prin setarea proprietatilor Width si Height. In mod default acestea sunt setate auto, ceea ce face ca spatiul sa se distribuie in mod egal pentru fiecare celula. Exista doua modalitati de a redimensiona o celula: valoare fixa a dimensiunilor sau relativa la alte celule. Redimensionarea este facuta pentru coloane sau randuri.
O sa iau exemplul de mai sus si o sa redimensionez prima coloana si primul rand. Definirea dimensiunilor se face in Grid.RowDefinitions pentru Height si in Grid.ColumnDefinitions pentru Width:
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
Acum fereastra arata asa:
Un efect interesant – aliniere in partea dreapta – se obtine prin setarea dimensiuni coloanei din partea dreapta si a ultimului rand:
.
O alta metoda de a defini dimensiunea unui rand/coloana este prin folosirea asteriscului. In acest mod pot defini dimensiune relativa la alte coloane/randuri. De exemplu, dca vreau ca primul rand sa aiba inaltimea de 3 ori mai mare decat randul al doilea, voi seta Height=”3*” la primul rand, si Height=”1*” la al doilea. Daca nu definim o inaltime pentru al doilea rand el este implicit 1*, ceea ce inseamna ca Height=”3*” la primul rand, si Height=”1*” se poate scrie doar Height=”3*” la primul rand.
UniformGrid: este un grid in care elementele sunt automat aranjate in Grid pe masura ce ele sunt adaugate. Numarul de coloane si randuri este automat calculat in functie de numarul de elemente. In exemplul urmator se poate vedea cum elementele sunt automat aranjate, codul neprecizand pozitia iecarui element:
<Window x:Class="Conatainers.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="250" Width="250"> <UniformGrid> <Rectangle Fill="Blue" Width="25" Height="25"/> <Rectangle Fill="Blue" Width="25" Height="25"/> <Rectangle Fill="Blue" Width="25" Height="25"/> <Rectangle Fill="Blue" Width="25" Height="25"/> <Rectangle Fill="Blue" Width="25" Height="25"/> <Rectangle Fill="Blue" Width="25" Height="25"/> <Rectangle Fill="Blue" Width="25" Height="25"/> <Rectangle Fill="Blue" Width="25" Height="25"/> <Rectangle Fill="Blue" Width="25" Height="25"/> <Rectangle Fill="Blue" Width="25" Height="25"/> <Rectangle Fill="Blue" Width="25" Height="25"/> <Rectangle Fill="Blue" Width="25" Height="25"/> <Rectangle Fill="Blue" Width="25" Height="25"/> </UniformGrid> </Window>
Fereastra arata asa:
Pentru a limita numarul de coloane (sa presupunem ca dorim numai 3 coloane, iar numarul de randuri in functie de numarul de elemente) putem seta proprietatea Columns = “3”, ceea ce va face ca in UniformGrid sa se genereze un grid cu 3 coloane.
Canvas: Aranjeaza elementele copil in functie de coordonatle absolute x si y. Canvas da posibilitatea de a avea elemente fixe ca pozitie. Un exemplu prin care am pozitionat absolut 3 patrate este:
<Window x:Class="Conatainers.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="250" Width="250"> <Canvas> <Rectangle Fill="Blue" Width="25" Height="25" Canvas.Top="155" Canvas.Right="5"/> <Rectangle Fill="Red" Width="25" Height="25" Canvas.Bottom="155" Canvas.Left="20"/> <Rectangle Fill="Green" Width="25" Height="25" Canvas.Bottom="100" Canvas.Right="50"/> </Canvas> </Window>
StackPanel: Aranjeaza elementele copil intr-o singura linie; se poate alege orientarea: orizontala sau verticala.
Modific in exemplul anterior tipul de container:
<Window x:Class="Conatainers.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="250" Width="250"> <StackPanel Orientation="Horizontal"> <Rectangle Fill="Blue" Width="25" Height="25"/> <Rectangle Fill="Red" Width="35" Height="35"/> <Rectangle Fill="Green" Width="20" Height="20"/> </StackPanel> </Window>
si voi obtine:
sau 
in functie de valoarea atributului Orientation – in mod prestabilit Orientation=”Vertical”, ceea ce inseamna ca daca aceasta valoare nu este setata de catre programator, valoarea prestabilita va fi folosita.
WrapPanel: este asemanator cu StackPanel, cu diferenta ca in momentul in care un element nu incape pe un rand/coloana, el este pozitionat intr-un nou rand/coloana. Se poate seta proprietatea Orientation la fel ca si in cazul StackPanel. Exemplu:
<Window x:Class="Conatainers.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="250" Width="250"> <WrapPanel> <Rectangle Fill="Blue" Width="45" Height="45"/> <Rectangle Fill="Red" Width="45" Height="45"/> <Rectangle Fill="Green" Width="45" Height="45"/> <Rectangle Fill="Blue" Width="45" Height="45"/> <Rectangle Fill="Red" Width="45" Height="45"/> <Rectangle Fill="Green" Width="45" Height="45"/> <Rectangle Fill="Blue" Width="45" Height="45"/> <Rectangle Fill="Red" Width="45" Height="45"/> <Rectangle Fill="Green" Width="45" Height="45"/> <Rectangle Fill="Blue" Width="45" Height="45"/> <Rectangle Fill="Red" Width="45" Height="45"/> <Rectangle Fill="Green" Width="45" Height="45"/> <Rectangle Fill="Blue" Width="45" Height="45"/> <Rectangle Fill="Red" Width="45" Height="45"/> <Rectangle Fill="Green" Width="45" Height="45"/> </WrapPanel> </Window>
va produce:
sau 
DockPanel: este un container care ofera Dock – lipirea continutului de laturile containerului sau ocuparea de catre continut a spatiului ramas liber. Acest control este potrivit pentru ToolBars, MenuBars, ferestre ajutatoare (de genul ferestrelor din Visual Studio, ca Solution Explorer, Output sau Properties). Locul unde continutul este lipit este stabilit prin proprietatea DockPanel.Dock, care poate primi una dintre urmatoarele valori: Top, Right, Bottom sau Left. Ultimul element va ocupa tot spatiul ramas liber. In urmaotrul exemplu voi folosi un DockPanel pentru a pozitiona in interiorul lui 3 StackPanels – un StackPanel in partea de sus, unul in parte stanga, iar al treilea va ocupa tot spatiul liber ramas:
<Window x:Class="Conatainers.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="250" Width="250"> <DockPanel> <StackPanel Height="25" Background="Azure" DockPanel.Dock="Top"></StackPanel> <StackPanel Width="25" Background="Bisque" DockPanel.Dock="Left"></StackPanel> <StackPanel Background="PaleGoldenrod"></StackPanel> </DockPanel> </Window>
care va produce urmatorul rezultat:
De remarcat ca la redimensionarea ferestrei containerele din stanga si de sus raman fixe, singurul care isi schimba dimensiunea, redimensionandu-se automat la noua dimensiune a ferestrei este cel de-al treilea StackPanel – cel de culoare PaleGoldenrod.
Border: este un element container care accepta un singur element copil. Rolul acestui container este doar de a desena un contur in jurul elementului pe care il contine. Border nu are proprietatea Children, ci Child, deci un singur element copil. Pentru a stabili culoarea conturului se seteaza BorderBrush, iar pentru grosimea conturului BorderThickness. Daca luam exemplul anterior, de la DockPanel, si ii adaugam un contur, codul va fi urmatorul:
<Window x:Class="Conatainers.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="250" Width="250"> <Border BorderBrush="Black" BorderThickness="5"> <DockPanel> <StackPanel Height="25" Background="Azure" DockPanel.Dock="Top"></StackPanel> <StackPanel Width="25" Background="Bisque" DockPanel.Dock="Left"></StackPanel> <StackPanel Background="PaleGoldenrod"></StackPanel> </DockPanel> </Border> </Window>
Fereastra aplicatiei va desena urmatoarele:
ScrollViewer: asa cum e usor de intuit din numele lui, acest container ofera acele bare de derulare atat de familiare utilizatorilor de aplicatii grafice. La fel ca si in cazul Border, un singur element copil este permis. Cand continutul depaseste spatiul vizibil, se pot activa barele de derulare. Vizibilitatea/prezenta barelor de derulare poate fi setata folosind diverse proprietati ale acestui container.
Poate nu este cel mai bun exemplu, insa voi dezvolta codul folosit in exemplul de la UniformGrid caruia ii voi adauga un ScrollViewer. Acesta se va activa in momentul in care fereastra este micsorata si continutul nu mai incape in cadru:
<Window x:Class="Conatainers.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="250" Width="250"> <ScrollViewer> <UniformGrid> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> <Rectangle Fill="Blue" Width="25" Height="25" Margin="5"/> </UniformGrid> </ScrollViewer> </Window>
Care arata asa:
sau 
Viewbox: Acest container este un fel de zoom, care redimensioneaza (transforma) continutul astfel incat acesta, continutul, sa incapa in el, in Viewbox. Voi folosi un Viewbox care are ca element copil un UniformGrid. Codul arata asa:
<Window x:Class="Conatainers.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="250" Width="250"> <Viewbox> <UniformGrid> <Button>Hello</Button> <Button>Hello</Button> <Button>Hello</Button> <Button>Hello</Button> </UniformGrid> </Window>
si produce urmatorul efect:
Cand fereastra este redimensionata se poate vedea efectul de “zoom”. La ce este bun acest control? Inca nu stiu!
TabControl: cred ca toti (cel putin programatorii) stiu ce e acela TabControl. Un control care permite organizarea continutului in ferestre suprapuse, cu proprietatea ca la un moment dat numai o fereastra este vizibila. Fiecare fereastra are continut si header, activarea ferestrei se face prin intermediul acestui Header (click). Acest control poate fi vazut in actiune in fereastra de proprietati ale diverselor aplicatii: Windows Explorer, Internet Explorer (oprions, properties), FireFox etc. Ca exemplu pentru acest control voi crea o fereastra care seamana cu cea care de Options de la Internet Explorer:
<Window x:Class="Conatainers.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="250" Width="350"> <TabControl> <TabItem Header="General">General</TabItem> <TabItem Header="Security">Security</TabItem> <TabItem Header="Privacy">Privacy</TabItem> <TabItem Header="Content">Content</TabItem> <TabItem Header="etc...">etc...</TabItem> </TabControl> </Window>
care arata asa:
Acest control gazduieste o colectie de TabItems. Fiecare astfel de element are o proprietate header.
Cu asta am incheiat prezentarea containerelor. Voi continua cu descrierea unor proprietati comune pentru controalele WPF.
Pingback/Trackback
Controale WPF standard (I) | by zeltera