طراحی رابط کاربری با استفاده از پنل های لایه بندی در WPF
در دنیای امروز، برنامه نویسی گرافیکی یکی از مهارت های مورد نیاز بسیاری از برنامه نویسان است. یکی از کاربردهای برنامه نویسی گرافیکی، ایجاد رابط کاربری (UI) برای تعامل کاربر با داده ها و برنامه است. برای ایجاد رابط کاربری، برنامه نویسان نیاز به استفاده از فناوری هایی دارند که امکان طراحی و پیاده سازی UI را به صورت ساده و کارآمد فراهم کنند. یکی از این فناوری ها، WPF یا Windows Presentation Foundation است.
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
WPF یک فریم ورک قدرتمند برای برنامه نویسی گرافیکی در محیط ویندوز است که بر اساس .NET Framework ساخته شده است. WPF از زبان XAML برای توصیف UI استفاده می کند. XAML یک زبان مبتنی بر XML است که امکان ایجاد عناصر گرافیکی مانند کنترل ها، تصاویر، انیمیشن ها و غیره را می دهد.
یکی از مفاهیم مهم در WPF، لایه بندی یا Layout است. لایه بندی به معنی تنظیم نحوه قرار گیری عناصر UI در صفحه نمایش است. لایه بندی تأثیر بسزایی بر روی زیبایی و قابلیت استفاده از UI دارد. برای انجام لایه بندی، WPF از چندین نوع پنل یا Panel استفاده می کند. پنل ها کنترل هایی هستند که می توانند چندین عنصر فرزند را در خود جای دهند و موقعیت، اندازه و ترتیب آن ها را مشخص کنند. برخی از پنل های موجود در WPF عبارتند از:
- StackPanel: این پنل عناصر فرزند را در یک خط قرار می دهد. جهت قرار گیری عناصر می تواند افقی یا عمودی باشد.
- WrapPanel: این پنل عناصر فرزند را به صورت دنباله ای از چپ به راست یا از بالا به پایین قرار می دهد. اگر عناصر موجود در یک ردیف از اندازه پنل بیشتر شوند، آن ها را به ردیف بعدی منتقل می کند.
- DockPanel: این پنل عناصر فرزند را در یکی از چهار طرف پنل قرار می دهد. می توان عناصر را در بالا، پایین، راست یا چپ پنل جای داد.
- Canvas: این پنل عناصر فرزند را با تعیین مختصات نسبت به پنل قرار می دهد. این پنل امکان قرار دادن عناصر روی یکدیگر را نیز می دهد.
- Grid: این پنل یک ناحیه شامل سطرها و ستون ها ایجاد می کند و عناصر فرزند را به صورت جدولی در آن قرار می دهد. می توان اندازه و تعداد سطرها و ستون ها را تنظیم کرد.
در این مقاله، ما قصد داریم با معرفی و مقایسه این پنل ها، به شما کمک کنیم تا بتوانید لایه بندی مناسب برای UI برنامه های خود ایجاد کنید. همچنین با نمونه هایی از کد XAML یاد میگیریم که چگونه می توان از این پنل ها در برنامه های خود استفاده کرد.
کنترل StackPanel
StackPanel یک کنترل طرح‌بندی است که عناصر فرزند را در یک خط تکی قرار می‌دهد که می‌تواند افقی یا عمودی باشد. به طور پیش‌فرض، StackPanel عناصر را از بالا به پایین و به ترتیبی که اعلام شده‌اند، می‌چیند. می‌توانید ویژگی Orientation را به Horizontal تغییر دهید تا عناصر را از چپ به راست مرتب کنید.
برای مثال، کد زیر یک StackPanel که مجموعه ای از Button در آن قرار دارد را ایجاد می کند:
<StackPanel Margin="20">
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
<Button>Button 4</Button>
<Button>Button 5</Button>
<Button>Button 6</Button>
</StackPanel>
این کد باعث می‌شود که دکمه‌ها به صورت عمودی از بالا به پایین مرتب شوند. همچنین می‌توانید مقدار VerticalAlignment یا HorizontalAlignment عناصر فرزند را برای تغییر جهت چینش آن‌ها تنظیم کنید.
کنترل WrapPanel
کنترل WrapPanel یک کنترل لایه بندی است که عناصر فرزند را به صورت دنباله‌ای از چپ به راست یا از بالا به پایین قرار می‌دهد. اگر عناصر موجود در یک ردیف یا ستون از اندازه پنل بیشتر شوند، آن‌ها را به ردیف یا ستون بعدی منتقل می‌کند. این پنل برای زمانی مناسب است که می‌خواهید یک لیست افقی یا عمودی از عناصر داشته باشید که به صورت خودکار واپسینه شوند وقتی جای کافی نداشته باشند. برای تعیین جهت قرار گیری عناصر، می‌توانید ویژگی Orientation را به Horizontal یا Vertical تنظیم کنید. به طور پیش‌فرض، مقدار این ویژگی Horizontal است.
هنگامی که WrapPanel جهت افقی دارد، عناصر فرزند همه یک ارتفاع دارند که بر اساس بلندترین عنصر در هر ردیف تعیین می‌شود. هنگامی که WrapPanel جهت عمودی دارد، عناصر فرزند همه یک عرض دارند که بر اساس پهناترین عنصر در هر ستون تعیین می‌شود. می‌توانید اندازه عناصر را با استفاده از ویژگی‌های Width و Height تغییر دهید. همچنین می‌توانید مقدار VerticalAlignment یا HorizontalAlignment عناصر فرزند را برای تغییر جهت چینش آن‌ها تنظیم کنید².
برای مثال، کد زیر یک WrapPanel از تصاویر را نشان می‌دهد:
<WrapPanel Margin="10">
<Image Source="Images/flower1.jpg" Width="100" Height="100" Margin="5"/>
<Image Source="Images/flower2.jpg" Width="100" Height="100" Margin="5"/>
<Image Source="Images/flower3.jpg" Width="100" Height="100" Margin="5"/>
<Image Source="Images/flower4.jpg" Width="100" Height="100" Margin="5"/>
<Image Source="Images/flower5.jpg" Width="100" Height="100" Margin="5"/>
<Image Source="Images/flower6.jpg" Width="100" Height="100" Margin="5"/>
</WrapPanel>
این کد باعث می‌شود که تصاویر به صورت افقی از چپ به راست مرتب شوند. اگر پنجره را کوچکتر کنید، می‌بینید که تصاویر به ردیف بعدی منتقل می‌شوند. اگر جهت WrapPanel را به Vertical تغییر دهید، تصاویر به صورت عمودی از بالا به پایین مرتب می‌شوند.
کنترل DockPanel
DockPanel یک کنترل طرح‌بندی است که عناصر فرزند را در یکی از چهار طرف پنل قرار می‌دهد. می‌توانید عناصر را در بالا، پایین، راست یا چپ پنل جای دهید. برای تعیین موقعیت عناصر، می‌توانید از ویژگی DockPanel.Dock استفاده کنید که مقادیر آن می‌تواند Top، Bottom، Left یا Right باشد. به طور پیش‌فرض، مقدار این ویژگی Left است.
DockPanel همچنین یک ویژگی به نام LastChildFill دارد که مشخص می‌کند آیا آخرین عنصر فرزند باید فضای باقی‌مانده را پر کند یا خیر. به طور پیش‌فرض، مقدار این ویژگی True است و باعث می‌شود که آخرین عنصر فرزند در مرکز پنل قرار گیرد. اگر مقدار این ویژگی را False کنید، آخرین عنصر فرزند همانند سایر عناصر در یکی از چهار طرف پنل قرار می‌گیرد.
برای مثال، کد زیر یک DockPanel که مجموعه از تکست‌باکس‌ها می باشد را نشان می‌دهد:
<DockPanel Margin="10">
<TextBox DockPanel.Dock="Top" Text="Top" Background="Yellow"/>
<TextBox DockPanel.Dock="Bottom" Text="Bottom" Background="Green"/>
<TextBox DockPanel.Dock="Left" Text="Left" Background="Red"/>
<TextBox DockPanel.Dock="Right" Text="Right" Background="Blue"/>
<TextBox Text="Center" Background="Gray"/>
</DockPanel>
این کد باعث می‌شود که تکست‌باکس‌ها در چهار طرف پنل قرار گیرند و آخرین تکست‌باکس در مرکز پنل باشد. اگر مقدار LastChildFill را False کنید، آخرین تکست‌باکس هم در سمت چپ پنل قرار می‌گیرد.
کنترل Canvas
کنترل Canvas یک کنترل طرح‌بندی است که عناصر فرزند را با تعیین مختصات نسبت به پنل قرار می‌دهد. این پنل برای زمانی مناسب است که می‌خواهید عناصر را در مکان‌های دقیقی روی یکدیگر قرار دهید. برای تعیین موقعیت عناصر، می‌توانید از ویژگی‌های Canvas.Left، Canvas.Top، Canvas.Right و Canvas.Bottom استفاده کنید که مقادیر آن‌ها به پیکسل هستند. این ویژگی‌ها مشخص می‌کنند که عناصر چقدر از چهار طرف پنل فاصله دارند. به طور پیش‌فرض، مقدار این ویژگی‌ها صفر است.
Canvas همچنین امکان ایجاد انیمیشن را نیز می‌دهد. می‌توانید با استفاده از کلاس‌های Animation و Storyboard، عناصر را در زمان حرکت دهید. برای این کار، باید یک Storyboard ایجاد کنید و آن را به Canvas متصل کنید. سپس باید یک یا چند Animation را به عناصر فرزند اضافه کنید و مشخص کنید که چه ویژگی‌هایی را تغییر دهند. برای شروع و توقف انیمیشن، می‌توانید از متد‌های Begin و Stop استفاده کنید.
برای مثال، کد زیر یک Canvas از یک دایره را نشان می‌دهد که در طول پنل حرکت می‌کند:
<Canvas Width="300" Height="300">
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="circle" Storyboard.TargetProperty="(Canvas.Left)" From="0" To="250" Duration="0:0:5" RepeatBehavior="Forever" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Ellipse x:Name="circle" Width="50" Height="50" Fill="Red" Canvas.Left="0" Canvas.Top="125"/>
</Canvas>
این کد باعث می‌شود که یک دایره قرمز با اندازه 50 در 50 پیکسل در مرکز عمودی پنل قرار گیرد و با یک انیمیشن از چپ به راست و برعکس حرکت کند. این انیمیشن به صورت بی‌پایان تکرار می‌شود و هر بار که به انتهای پنل می‌رسد، جهت خود را عوض می‌کند.
کنترل Grid
کترل گرید Grid یک کنترل طرح‌بندی پیشرفته در WPF است که امکان ایجاد و تقسیم فضای صفحه نمایش را به سطرها و ستون‌های مختلف می‌دهد. با استفاده از Grid، می‌توانید عناصر رابط کاربری خود را در یک الگوی دوبعدی مرتب و متناسب با اندازه پنجره قرار دهید. Grid از زبان نشانه‌گذاری XAML برای تعریف ساختار و محتوای خود استفاده می‌کند.
برای ایجاد یک Grid، باید ابتدا یک عنصر Grid در XAML ایجاد کنید. سپس باید تعداد و اندازه سطرها و ستون‌های Grid را با استفاده از عناصر ColumnDefinition و RowDefinition مشخص کنید. این عناصر را می‌توانید در ویژگی‌های Grid.ColumnDefinitions و Grid.RowDefinitions قرار دهید. برای تعیین اندازه سطرها و ستون‌ها، می‌توانید از یکی از سه روش زیر استفاده کنید:
اندازه ثابت: می‌توانید یک مقدار ثابت به پیکسل برای اندازه سطر یا ستون تعیین کنید. برای این کار، کافی است مقدار عددی را به عنوان ویژگی Width یا Height بنویسید. به عنوان مثال، برای تعیین اندازه یک ستون به 100 پیکسل، می‌توانید از کد زیر استفاده کنید:
<ColumnDefinition Width="100"/>
اندازه نسبی: می‌توانید یک مقدار نسبی برای اندازه سطر یا ستون تعیین کنید. برای این کار، کافی است مقدار عددی را با یک ستاره (*) نوشته و به عنوان ویژگی Width یا Height بنویسید. این مقدار نشان می‌دهد که سطر یا ستون چه مقدار از فضای خالی در Grid را به خود اختصاص می‌دهد. به عنوان مثال، برای تعیین اندازه یک ستون به یک سوم فضای خالی، می‌توانید از کد زیر استفاده کنید:
<ColumnDefinition Width="1*"/>
اندازه خودکار: می‌توانید اندازه سطر یا ستون را بر اساس اندازه عناصر فرزند در آن تعیین کنید. برای این کار، کافی است مقدار Auto را به عنوان ویژگی Width یا Height بنویسید. این مقدار نشان می‌دهد که سطر یا ستون به اندازه کافی بزرگ می‌شود تا عناصر فرزند را در خود جای دهد. به عنوان مثال، برای تعیین اندازه یک ستون به اندازه عنصر فرزند در آن، می‌توانید از کد زیر استفاده کنید:
<ColumnDefinition Width="Auto"/>
پس از تعیین سطرها و ستون‌های Grid، می‌توانید عناصر رابط کاربری خود را به عنوان فرزندان Grid اضافه کنید. برای تعیین موقعیت عناصر در Grid، می‌توانید از ویژگی‌های Grid.Column و Grid.Row استفاده کنید که مقادیر آن‌ها شماره سطر یا ستون مورد نظر است. شماره سطرها و ستون‌ها از صفر شروع می‌شوند. به عنوان مثال، برای قرار دادن یک عنصر در سطر دوم و ستون سوم Grid، می‌توانید از کد زیر استفاده کنید:
<SomeElement Grid.Column="2" Grid.Row="1"/>
همچنین می‌توانید از ویژگی‌های Grid.ColumnSpan و Grid.RowSpan استفاده کنید تا عناصر را بین چند سطر یا ستون توزیع کنید. این ویژگی‌ها مقادیر آن‌ها تعداد سطرها یا ستون‌هایی است که عنصر باید در آن‌ها قرار گیرد. به عنوان مثال، برای قرار دادن یک عنصر در دو سطر و سه ستون Grid، می‌توانید از کد زیر استفاده کنید:
<SomeElement Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="2"/>
برای مثال، کد زیر یک Grid با سه سطر و سه ستون را نشان می‌دهد که عناصر مختلفی را در خود دارد:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<TextBlock Text="Header" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Background="LightGray" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="Left" Grid.Column="0" Grid.Row="1" Background="LightBlue" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="Center" Grid.Column="1" Grid.Row="1" Background="LightGreen" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="Right" Grid.Column="2" Grid.Row="1" Background="LightPink" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="Bottom Left" Grid.Column="0" Grid.Row="2" Background="LightYellow" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="Bottom Center" Grid.Column="1" Grid.Row="2" Background="LightCoral" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="Bottom Right" Grid.Column="2" Grid.Row="2" Background="LightSalmon" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
در این مقاله، ما با مفهوم لایه بندی در WPF آشنا شدیم و نحوه استفاده از پنل های مختلف برای تنظیم موقعیت و اندازه عناصر رابط کاربری را بررسی کردیم. ما پنج نوع پنل را به صورت جزئی معرفی و مقایسه کردیم: StackPanel, WrapPanel, DockPanel, Canvas و Grid. ما نشان دادیم که هر پنل چه خصوصیات و رفتارهایی دارد و چگونه می توانیم از آن ها برای ایجاد طرح بندی های مختلف استفاده کنیم. ما همچنین نمونه هایی از کد XAML برای نشان دادن نحوه کار با این پنل ها ارائه دادیم.