در مقاله قبلی در مورد تعدادی از Layoutها صحبت کردیم و در این بخش به ادامهی آن پرداخته و دو مبحث GridPanel و Custom Layout را بررسی میکنیم.
GridPanel
پنل پیش فرضی است که موقع ایجاد یک پروژه جدید WPF ایجاد میشود. چیدمان این نوع پنل به صورت سطر و ستون است و کارکرد آن بسیار مشابه جداول در HTML میباشد؛ با این تفاوت که در اینجا انعطاف پذیری بیشتری وجود دارد. هر سلول میتواند شامل چندین کنترل شود و یا هر کنترل میتواند چندین سلول را به خود احتصاص دهند و حتی میتواند روی کنترلهای دیگر قرار بگیرند و همپوشانی کنترلها را داشته باشیم.
<Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="28" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="200" /> </Grid.ColumnDefinitions> </Grid>
Fixed : یک مقدار ثابت، مثل سطر آخری که در کد بالا قرار میگیرد. این مقدار بر اساس یک واحد منطقی است و نه پیکسل که در این مقاله قبلا بررسی کردهایم.
Auto : به مقداری که احتیاج دارد فضایی را بخود اختصاص میدهد.
* : هر آنچه از فضای موجود باقی مانده است را به خود اختصاص میدهد. علامت ستاره یک واحد نسبی است؛ به این صورت که میتوانید مقدار فضا را به صورت زیر نیز بیان کنید.*3 و *2 به این معنی است که از پنج قسمت فضای باقیمانده سه قسمت و بعدی دو قسمت را به خود اختصاص میدهد. عبارت * با *1 برابر است. عموما با این علامت فضا را به شکل درصد بیان میکنند:
<ColumnDefinition Width="69*" /> <!-- Take 69% of remainder --> <ColumnDefinition Width="31*"/> <!-- Take 31% of remainder -->
<Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="28" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="200" /> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" Content="Name:"/> <Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/> <Label Grid.Row="2" Grid.Column="0" Content="Comment:"/> <TextBox Grid.Column="1" Grid.Row="0" Margin="3" /> <TextBox Grid.Column="1" Grid.Row="1" Margin="3" /> <TextBox Grid.Column="1" Grid.Row="2" Margin="3" /> <Button Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" MinWidth="80" Margin="3" Content="Send" /> </Grid>
تغییر اندازه در سمت کد هم میتواند توسط کدهای صورت گیرد.
Auto sized GridLength.Auto Star sized new GridLength(1,GridUnitType.Star) Fixed size new GridLength(100,GridUnitType.Pixel)
Grid grid = new Grid(); ColumnDefinition col1 = new ColumnDefinition(); col1.Width = GridLength.Auto; ColumnDefinition col2 = new ColumnDefinition(); col2.Width = new GridLength(1,GridUnitType.Star); grid.ColumnDefinitions.Add(col1); grid.ColumnDefinitions.Add(col2);
یکی از تگهای ویژه داخل گری،د تگ Grid Splitter است. برای قرارگیری تگ splitter ابتدا باید یک سطر یا ستون بین سطر و ستون هایی که میخواهید از یکدیگر جدا شوند ایجاد کنید و اندازهی آن را auto تعیین کنید و سپس مانند بقیهی اشیا توسط Grid.Column یا Grid.Row مانند کد زیر تگ splitter را به آن اختصاص دهید.
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Label Content="Left" Grid.Column="0" /> <GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" Grid.Column="1" ResizeBehavior="PreviousAndNext" Width="5" Background="#FFBCBCBC"/> <Label Content="Right" Grid.Column="2" /> </Grid>
BasedOnAlignment | مقدار پیش فرض این گزینه است و مشخص میکند سطر یا ستونی طرفی باید تغییر اندازه دهد که در Alignment آن آمده است |
CurrentAndNext | ستون یا سطر جاری به همراه ستون یا سطر بعدی |
PreviousAndCurrent | ستون یا سطر جاری به همراه ستون یا سطر قبلی |
PreviousAndNext | سطر یا ستون قبلی و بعدی که بهترین گزینه برای انتخاب است. |
ساخت Custom Layout یا یک پنل سفارشی (اختصاصی)
در این دو قسمت، شما با پنلهای متفاوتی آشنا شدید که قابلیتهای مفیدی داشتند؛ ولی گاهی اوقات هیچ کدام از اینها به کار شما نمیآیند و دوست دارید پنلی داشته باشید که مطابق میل شما عمل کند. برای ساخت یک پنل سفارشی یک کلاس میسازیم که از کلاس Panel ارث بری میکند. در اینجا دو متد برای Override کردن وجود دارند:
MeasureOverride : تعیین اندازه پنل بر اساس اندازه تعیین شده برای المانهای فرزند و فضای موجود.
ArrangeOverride: مرتب سازی المانها در فضای موجود نهایی.
کد نمونه:
public class MySimplePanel : Panel { // Make the panel as big as the biggest element protected override Size MeasureOverride(Size availableSize) { Size maxSize = new Size(); foreach( UIElement child in InternalChildern) { child.Measure( availableSize ); maxSize.Height = Math.Max( child.DesiredSize.Height, maxSize.Height); maxSize.Width= Math.Max( child.DesiredSize.Width, maxSize.Width); } } // Arrange the child elements to their final position protected override Size ArrangeOverride(Size finalSize) { foreach( UIElement child in InternalChildern) { child.Arrange( new Rect( finalSize ) ); } } }
TreeMapPanel
Animating Tile Panel
Radial Panel
Element Flow Panel
Ribbon Panel
خواصی که باید در Layoutها با آنها بیشتر آشنا شویم:
Horizontal & Vertical Alignment
با دادن این خاصیت به کنترلهای موجود، نحوه قرار گیری و موقعیت آنها مشخص میگردد. جدول زیر بر ساس انواع موقعیتهای مختلف تشکیل شده است:
Margin & Padding
این خاصیتها حتما برای شما آشنا هستند. خاصیت margin فاصله کنترل از لبههای Layout است و خاصیت Padding فاصله محتویات کنترل از لبههای کنترل است.
Clipping
در صورتی که خاصیت ClipToBounds پنل برابر False باشند به این معناست که المانها میتوانند از لبههای پنل خارج شوند، در صورتی که برابر True باشد مقدار خارج شده نمایش نمییابد.
Scrolling
موقعیکه از پنلی استفاده میکنید که با تمام شدن ناحیهاش روبرو شدهاید ولی کنترلهای داخلش هنوز ادامه دارند، نیاز به یک اسکرول به شدت احساس میشود. در این حالت میتوان از ScrollViewer استفاده کرد.
<ScrollViewer> <StackPanel> <Button Content="First Item" /> <Button Content="Second Item" /> <Button Content="Third Item" /> </StackPanel> </ScrollViewer>