آموزش ایجاد GridView در WPF

[95Amirreza]

اگر به دنبال یک کنترل GridView در WPF (http://www.wpf-tutorial.com/listview-control/listview-with-gridview/) هستید ، نا امید خواهید شد زیرا WPF کنترل GridView ندارد. اما خبر خوب این است که شما میتوانید با استفاده از قابلیت تابعیت و با کمک از کنترل ListView موجود در WPF (http://www.mspsoft.com/?s=WPF)به آن دست پیدا کنید. برای درک بهترتان علاوه بر آموزش گام به گام ، سورس پروژه نیز در ادامه ی مطلب برایتان قرار داده شده است…
از خاصیت View به منظور ارائه ی یک لایه و طراحی GridView در یک کنترل ListView استفاده میشود. خاصیت View یک ListView از یک نوع کلاس ViewBase است که از دو نوع View (GridView و یک ListView اختصاصی) پشتیبانی میکند. یک GridView برای مرتب سازی داده ها در ستون ها و افزودن پشتیبانی لایه و طراحی برای یک ListView مورد استفاده است.
قطعه کد زیر خاصیت View مربوط به ListView را بر روی حالت GridView تنظیم میکند.


<ListView>
<ListView.View>
<GridView />
</ListView.View>
</ListView>

یک GridView به عنوان یک کنترل کمکی برای یک ListView به منظور ارائه ی استایل و لایه استفاده میشود. GridView خصوصیات مربوط به کنترل خودش مانند رنگ پس زمینه ، رنگ پیش زمینه ، خصوصیات فونت ها ، سایز و موقعیت را ندارد. از یک ListView برای ارائه ی تمامی خصوصیات کنترل مربوطه استفاده میشود.
GridView در WPFالمان GridView در XAML یک GridViewدر زمان design ارائه میدهد. خصوصیت ستون های یک GridView کالکشنی از اشیای GridViewColumns را بازمیگرداند. المان GridViewColumns در XAML ارائه کننده ی یک ستون GridView میباشد. خاصیت AllowsColumnRecorder ارائه کننده ی یک ستون آب و هوا در GridView است که میتواند توسط یک کاربر با کشیدن و انداختن از یک مکان به مکان دیگر ثبت شود.خاصیت ColumnHeaderToolTip ارائه گر محتوای یک tooltip است که در لحظه ی قرار گرفتن نشانه گر موس بر روی یکی از سر ستون ها ، ظاهر میشود.
کد های لیست شده در زیر ، یک کنترل GridView ایجاد میکند و چهار ستون به آن اضافه میکند. خاصیت GridViewColumn ارائه کننده ی header یک ستون است. خاصیت Width نیز ارائه کننده ی عرض ستون ها است و همچنین خاصیت DisplayMemberBinding نیز برای Bind کردن یک GridViewColumn به خصوصیت اشیای data binding ، مورد استفاده است.
<GridView AllowsColumnReorder="true" ColumnHeaderToolTip="Authors"
>
<GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Path=Name}" />
<GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Path=Age}" />
<GridViewColumn Header="Book" Width="250" DisplayMemberBinding="{Binding Path=Book}" />
<GridViewColumn Header="MVP" Width="50" DisplayMemberBinding="{Binding Path=Mvp}" />

</GridView>

خروجی قطعه کد بالا به صورت زیر خواهد بود :
138119

کلاس GridView در WPF ارائه کننده ی یک کنترل GridView است. کلاس GridViewColumn ارائه گر یک ستون GridView است. کد های لیست شده در زیر نیز یک کنترل GridView ایجاد میکند و چهار ستون به صورت اتوماتیک به آن اضافه میکند.




private void CreateDynamicGridView()
{
// Create a GridView
GridView grdView = new GridView();
grdView.AllowsColumnReorder = true;
grdView.ColumnHeaderToolTip = "Authors";

GridViewColumn nameColumn = new GridViewColumn();
nameColumn.DisplayMemberBinding = new Binding("Name");
nameColumn.Header = "Author Name";
nameColumn.Width = 120;
grdView.Columns.Add(nameColumn);

GridViewColumn ageColumn = new GridViewColumn();
ageColumn.DisplayMemberBinding = new Binding("Age");
ageColumn.Header = "Age";
ageColumn.Width = 30;
grdView.Columns.Add(ageColumn);

GridViewColumn bookColumn = new GridViewColumn();
bookColumn.DisplayMemberBinding = new Binding("Book");
bookColumn.Header = "Book";
bookColumn.Width = 250;
grdView.Columns.Add(bookColumn);

GridViewColumn mvpColumn = new GridViewColumn();
mvpColumn.DisplayMemberBinding = new Binding("Mvp");
mvpColumn.Header = "Mvp";
mvpColumn.Width = 50;
grdView.Columns.Add(mvpColumn);

ListView1.View = grdView;
}

افزودن یک ContextMenu به بالای GridView
خصوصیت ColumnHeaderContextMenu مربوط به یک GridView نیز برای gets و sets یک ContextMenu مورد استفاده است ، در زمانی که شما بر روی header یک کنترل GridView کلیک میکنید. قطعه کد لیست شده در زیر برای افزودن یک ContextMenu به بالای GridView است.


<GridView AllowsColumnReorder="true" ColumnHeaderToolTip="Authors">

<!-- Add a ContextMenu to GridView Header -->
<GridView.ColumnHeaderContextMenu>
<ContextMenu >
<MenuItem Header="Ascending" Click="MenuItem_Click" />
<MenuItem Header="Descending" />
</ContextMenu>
</GridView.ColumnHeaderContextMenu>
<!-- Add GridVeiw Columns -->
<GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Path=Name}" />
<GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Path=Age}" />
<GridViewColumn Header="Book" Width="250" DisplayMemberBinding="{Binding Path=Book}" />
<GridViewColumn Header="MVP" Width="50" DisplayMemberBinding="{Binding Path=Mvp}" />

</GridView>

خروجی قطعه کد بالا نیز به صورت زیر خواهد بود :
138120


افزودن یک CheckBox به Header یک GridView
خاصیت ColumnHeaderTemplate ارائه کننده قالب برای header های ستون ها است. با استفاده از این خاصیت ، میتوانید header های ستون های GridView را به شکلی که دوس دارید ، فرمت کنید. میتوانید CheckBox ها یا تصاویر را به header ستون ها اضافه کنید.
قطعه کد زیر نیز یک منبع DataTemplate با یک CheckBox و رنگ پیش زمینه ی نارنجی برای متن هایی که در header های ستون ها قرار میگیرند میباشد که میتوانیم در ColumnHeaderTemplate یک GridView قرار بدهیم.


<Window.Resources>
<DataTemplate x:Key="OrangeHeaderTemplate">
<DockPanel>
<CheckBox/>
<TextBlock FontSize="10" Foreground="Orange"
FontWeight="Bold" >
<TextBlock.Text>
<Binding/>
</TextBlock.Text>
</TextBlock>
</DockPanel>
</DataTemplate>

</Window.Resources>
قطعه کد زیر نیز ColumnHeaderTemplate یک GridView را تنظیم میکند.








<GridView AllowsColumnReorder="true" ColumnHeaderToolTip="Authors"
ColumnHeaderTemplate="{StaticResource OrangeHeaderTemplate}" >


خروجی نیز به صورت زیر خواهد بود :



138121

جمع بندی
این مقاله در رابطه با معرفی نحوه ی استفاده از GridView در WPF بود و سعی شده که تمام خصوصیات مورد نیاز آن به صورت تمام و کمال برایتان توضیح داده شود.
امیدوارم از آن لذت برده باشید!:چشمک: