The Grid Control

Grila (Grid) este probabil cel mai complex dintre tipurile de panouri. O grilă poate conține mai multe rânduri și coloane. Definiți o înălțime pentru fiecare dintre rânduri și o lățime pentru fiecare dintre coloane, fie într-o valoare absolută exprimată in pixeli, fie într-un procent din spațiul disponibil sau ca automat, unde rândul sau coloana își va ajusta automat mărimea în funcție de conţinut. Utilizați grila atunci când celelalte panouri nu rezolvă problema, de ex. când aveți nevoie de mai multe coloane și adesea în combinație cu celelalte panouri.

În forma sa cea mai de bază, Grila va lua pur și simplu toate controalele pe care le puneți în ea, le va restrînge pentru a folosi spațiul maxim disponibil și le va așeza unul peste celălalt:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Grid>
</Window>

După cum vedeți, ultimul control primește poziția de vârf, ceea ce înseamnă că nici măcar nu puteți vedea primul buton. Nu este extrem de util pentru majoritatea situațiilor, prin urmare, haideți să încercăm să împărțim spațiul, ceea ce fac grilele atât de bine. Facem asta folosind ColumnDefinitions (Definițiile coloanelor) și RowDefinitions (Definițiile de rânduri). În primul exemplu, vom rămâne la coloane:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2</Button>
	</Grid>
</Window>

În acest exemplu, am împărțit pur și simplu spațiul disponibil în două coloane, care vor împărți spațiul în mod egal, folosind o "lățime de stea" (acest lucru va fi explicat mai târziu). Pe al doilea buton, folosesc o așa-numită proprietate atașată pentru a plasa butonul în a doua coloană (0 este prima coloană, 1 este a doua și așa mai departe). Aș fi putut folosi această proprietate și pe primul buton, dar este automat atribuit primei coloane și primului rând, exact ceea ce vrem aici.

După cum puteți vedea, controalele ocupă tot spațiul disponibil, ceea ce reprezintă comportamentul implicit atunci când grila își aranjează controalele-copil. Ea face acest lucru prin setarea HorizontalAlignment și VerticalAlignment pe controalele-copil ale sale pentru Stretch.

În unele situații este posibil să doriți ca aceștia să ia doar spațiul de care au nevoie și / sau să controleze modul în care sunt plasați în Grilă. Cel mai simplu mod de a face acest lucru este de a seta HorizontalAlignment și VerticalAlignment direct pe controalele pe care doriți să le manipulați. Iată o versiune modificată a exemplului de mai sus:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>		
		<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
		<Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
	</Grid>
</Window>

După cum puteți vedea din captura de ecran rezultată, primul buton este acum plasat în partea superioară și centrat. Al doilea buton este plasat în mijloc, aliniat la dreapta.

Summary

The Grid is a very versatile panel, with many more possibilities than we saw in this article. We'll dig into the rest of them in the next several articles.