طرح‌بندی نوین در ویندوز

۱ – Canvas: این المان کمترین استفاده را در طراحی UI در WPF دارد. دلیل آن هم این است که در Canvas شما المان‌ها را در یک صفحه مختصات قرار می‌دهید و به آنها Left و Top می‌دهید و مشخص می‌کنید آنها در این مختصات قرار گیرند. این نحوه قرارگیری المان‌ها یک مشکل بزرگ دارد و آن، این که به سایز رزولوشن وابسته است و با بزرگ یا کوچک شدن صفحه این مختصات به هم می‌ریزد و باعث می‌شود فرم شما، همانی را که از لحاظ مختصات و محل قرارگیری المان‌ها تعریف کرده‌اید فرق داشته باشد. نحوه استفاده از این Panel به صورت زیر است:

«Canvas Width="Auto" Height="Auto"»

«TextBox Width="159" Height="26" Text="Name" Canvas.Left="36" Canvas.Top="12"/»

«/Canvas»

نکته حائز اهمیت Canvas.Left و Canvas.Top است که به ویژگی‌های وابسته معروف هستند و به یک Canvas می‌فهمانند این المان در کجا باید قرار بگیرد (توضیح این ویژگی در این مقاله نمی‌گنجد).

۲ – StackPanel: بعضی از وقت‌ها نیاز به چیدن المان‌ها در یک ساختار پشته‌ای است. به این صورت که بعضی از المان‌ها باید به صورت پشت سر هم باشند و با عوض شدن رزولوشن صفحه مکان آنها در صفحه تغییر نکند و این المان‌ها در هم نروند و داخل یک ساختار مشخص باشند. این Panel یک خصوصیت مهم دارد و آن هم Orientation است که مشخص می‌کند المان‌ها به صورت یک پشته افقی یا عمودی قرار بگیرند (به صورت پیشفرض مقدار آن برابر Vertical یعنی عمودی است). نحوه استفاده از این المان به صورت زیر است:

«StackPanel Orientation="Horizontal"»

«Button Content="Button"/»

«/StackPanel»

«WrapPanel »

«Button Content="Button"/»«Button Content="Button"/»

«/WrapPanel»

«DockPanel»

«GroupBox DockPanel.Dock="Left" Width="100" Height="Auto" Header="Left Content"/»

«/DockPanel»

نکته‌ای که باید در مورد کد بالا در نظر داشت ویژگی DockPanel.Dock است که مشخص می‌کند یک المان باید در کجای صفحه چفت شود. می‌توانید مقادیر Left، Top، Right، Bottom را اختیاری کند. (این ویژگی هم جزو ویژگی‌های وابسته در کنترل DockPanel است).

۵ – Grid : اگر با HTML کار کرده باشید این المان را می‌توان یک Table دانست که در آن شما تعداد سطر و ستون را مشخص می‌کنید و کنترل‌ها را در یک ساختار جدول گونه قرار می‌دهید. منعطف‌ترین المان Grid است چرا که وقتی سایز فرم شما یا رزولوشن صفحه تان تغییر کند، المان‌های شما نیز به همان مقدار کوچک‌تر خواهد شد، ولی این کوچک شدن باعث خراب‌شدن ساختار فرم شما نمی‌شود. نحوه استفاده از این المان به صورت زیر است:

«Grid Width="Auto" Height="Auto"»

«Grid.ColumnDefinitions»

«ColumnDefinition Width="80" /»

«ColumnDefinition /»

«/Grid.ColumnDefinitions»

«Grid.RowDefinitions»

«RowDefinition /»

«/Grid.RowDefinitions»

«TextBlock Grid.Row="0" Grid.Column="0" /»

«TextBox Grid.Row="1" Grid.Column="1" /»

«Button Grid.ColumnSpan="2" Grid.Row="2" HorizontalAlignment="Center"

VerticalAlignment="Center" Content="Submit" /»

«/Grid»

در Grid ویژگی‌های Grid.Row و Grid.Column سطر ستونی که قرار است کنترل در آن قرار بگیرد را مشخص می‌کند، و با استفاده از Grid.RowSpan و Grid.ColumnSpan مشخص کنید که یک کنترل نیاز به چند سطر و ستون پشت سر هم دارد.

امیربهاالدین سبط‌الشیخ