StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The proper way for grouping is to use a <code>CollectionView</code> (for more details: <a href="http://www.wpftutorial.net/dataviews.html#grouping" rel="noreferrer">How to Navigate, Group, Sort and Filter Data in WPF</a>). The following is a simple proof of concept application I created for you to show you how to use a <code>CollectionView</code> for grouping you data:</p> <p>This class represents a row in the DataGrid:</p> <pre><code>public class Employee { public string FirstName { get; set; } public string LastName { get; set; } public string Street { get; set; } public string ZipCode { get; set; } public string City { get; set; } public string Country { get; set; } public string Image { get; set; } } </code></pre> <p>MaindWindow code behind:</p> <pre><code> /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); // Create some test data var employees = new ObservableCollection<Employee> { new Employee {FirstName = "Mohammed", LastName = "Fadil", Street = "A B C", ZipCode = "123", City = "London", Country = "UK", Image = "/Images/globe.png"}, new Employee {FirstName = "Siraj", LastName = "Hussam", Street = "A B C", ZipCode = "123", City = "London", Country = "UK", Image = "/Images/globe.png"}, new Employee {FirstName = "Ayman", LastName = "Tariq", Street = "A B C", ZipCode = "123", City = "London", Country = "UK", Image = "/Images/globe.png"}, new Employee {FirstName = "Khalid", LastName = "Sheik", Street = "X Y Z", ZipCode = "234", City = "Paris", Country = "France", Image = "/Images/monitor.png"}, new Employee {FirstName = "Hassan", LastName = "Ali", Street = "Q W E R", ZipCode = "544", City = "NY", Country = "USA", Image = "/Images/star.png"}, new Employee {FirstName = "Ehsan", LastName = "Mahmoud", Street = "A B C", ZipCode = "123", City = "London", Country = "UK", Image = "/Images/globe.png"}, new Employee {FirstName = "Idris", LastName = "Sheik", Street = "X Y Z", ZipCode = "234", City = "Paris", Country = "France", Image = "/Images/monitor.png"}, new Employee {FirstName = "Khalil", LastName = "Ali", Street = "Q W E R", ZipCode = "544", City = "NY", Country = "USA", Image = "/Images/star.png"} }; ICollectionView employeesView = CollectionViewSource.GetDefaultView(employees); // Set the grouping by city proprty employeesView.GroupDescriptions.Add(new PropertyGroupDescription("City")); // Set the view as the DataContext for the DataGrid EmployeesDataGrid.DataContext = employeesView; } } </code></pre> <p>The DataGrid XAML code:</p> <pre><code> <DataGrid Name="EmployeesDataGrid" ItemsSource="{Binding}" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTextColumn Binding="{Binding FirstName}" Header="First Name"/> <DataGridTextColumn Binding="{Binding LastName}" Header="Last Name"/> <DataGridTemplateColumn Header="Image"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Image Source="{Binding Image}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> <DataGrid.GroupStyle> <GroupStyle> <GroupStyle.HeaderTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding Path=City}" FontWeight="Bold" Padding="3"/> </StackPanel> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.ContainerStyle> <Style TargetType="{x:Type GroupItem}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type GroupItem}"> <Expander> <Expander.Header> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Path=Name}" /> <TextBlock Text="{Binding Path=ItemCount}" Margin="8,0,4,0"/> <TextBlock Text="Element(s)"/> </StackPanel> </Expander.Header> <ItemsPresenter /> </Expander> </ControlTemplate> </Setter.Value> </Setter> </Style> </GroupStyle.ContainerStyle> </GroupStyle> </DataGrid.GroupStyle> </DataGrid> </code></pre> <p>The result is:</p> <p><img src="https://i.stack.imgur.com/QQXB9.png" alt="Result"></p> <p>For more information about styling the DataGrid groups please check this post: <a href="http://www.wpftutorial.net/datagrid.html#grouping" rel="noreferrer">WPF DataGrid Control > Grouping</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload