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

۱ – 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: این المان كارش محصوركردن المان‌هاست. فرض كنید طول فرم شما ۱۰۰۰ باشد و نمی‌توانید سایز آن را تغییر دهید و علاوه بر این دوست دارید المان‌های شما به اندازه‌های ثابت در كنار هم باشند و اندازه این المان‌ها در كنار هم بیشتر از سایز فرم شما می‌شود، آن وقت تكلیف چیست؟ باید اندازه المان‌ها را كم كنیم كه این مورد امكان‌پذیر نیست یا از Canvas استفاده كنیم و به المان‌ها Left و Top بدهیم كه باز هم دردی را دوا نمی‌كند و همان مشكل قبلی باقی می‌ماند. در این شرایط از WrapPanel استفاده می‌كنیم، به این صورت كه المان‌ها را به اندازه فرم شما محصور می‌كند و اگر از آن اندازه بیشتر باشد، خودش به صورت خودكار آنها را در سطر دیگری قرار می‌دهد. نحوه استفاده از این المان‌ها به صورت زیر است:

«WrapPanel »

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

«/WrapPanel»

۴ – DockPanel: این المان مشخص می‌كند المان‌های درونی آن الزاما در كجای صفحه باید قرار بگیرد و اصطلاحا آنها را چفت می‌كند، مثلا می‌گوید یك دكمه همیشه باید در پایین صفحه باشد و اگر صفحه كوچك یا بزرگ شود، این المان باید در آنجا باشد (در Windows Form و HTML این مورد وجود دارد).

نحوه استفاده از آن به صورت زیر است:

«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 مشخص كنید كه یك كنترل نیاز به چند سطر و ستون پشت سر هم دارد.

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