Filter DataGrid WPF C# Example

WPF > Controls > ItemControls > DataGrid > Filter

Using ICollectionView to filter datagrid. 

XAML:

<Window x:Class="WpfApplication2.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         Title="MainWindow" Height="447.91" Width="514.871" Loaded="Window_Loaded">

    <Grid Margin="0,0,2,81">
        <DataGrid x:Name="dg" HorizontalAlignment="Left" VerticalAlignment="Top" Height="413" Width="507"  AutoGenerateColumns="False" Margin="0,0,-2,-76">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Id}"
                                Header="Id">
                    <DataGridTextColumn.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Content, RelativeSource=
                                         {RelativeSource Mode=TemplatedParent}}"/>
                                <TextBox x:Name="txtId" Width="100" TextChanged="txtName_TextChanged"  />
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTextColumn.HeaderTemplate>
                </DataGridTextColumn>
                <DataGridTextColumn Binding="{Binding Name}"
                                Header="Name">
                    <DataGridTextColumn.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Content, RelativeSource=
                                         {RelativeSource Mode=TemplatedParent}}"/>
                                <TextBox x:Name="txtName" Width="100" TextChanged="txtName_TextChanged"  />
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTextColumn.HeaderTemplate>
                </DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

C# Code

namespace WpfApplication2

{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    ///
     public class Skill
    {
        public int Years { get; set; }
        public string Name { get; set; }
    }
    public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Position { get; set; }
        public List<Skill> SkillList { get; set; } 
    }
    public class Persons : ObservableCollection<Person>
    {
        public Persons()
        {
            Add(new Person() { Id = 1, Name = "Person1", Position = "Manager", SkillList = new List<Skill>() });
            Add(new Person() { Id = 2, Name = "Programmer2", Position = "Programmer", SkillList = new List<Skill>() });
            Add(new Person() { Id = 3, Name = "Person3", Position = "Programmer", SkillList = new List<Skill>() });
            Add(new Person() { Id = 4, Name = "Person4", Position = "Admin", SkillList = new List<Skill>() });
            Add(new Person() { Id = 5, Name = "Person5", Position = "Tester", SkillList = new List<Skill>() });
        }
    }
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            Persons pList = new Persons();
            dg.ItemsSource = pList;
        }
        private void txtName_TextChanged(object sender, TextChangedEventArgs e)
        {
            TextBox t = (TextBox)sender;
            string filter = t.Text;
            ICollectionView cv = CollectionViewSource.GetDefaultView(dg.ItemsSource);
            if (filter == "")
               cv.Filter = null;
            else
            {
                cv.Filter = o =>
                {
                    Person p = o as Person;
                    if (t.Name == "txtId")
                        return (p.Id == Convert.ToInt32(filter));
                    return (p.Name.ToUpper().StartsWith(filter.ToUpper()))  ;
                };
            }
         }
     }
}

Routed event WPF

WPF > routed event

A routed event can invoke handlers on multiple listeners in an element tree.

Example

<Window x:Class="WpfApplication1.Window1"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Grid>
        <Border Height="50"  BorderBrush="White" BorderThickness="1">
            <StackPanel Orientation="Horizontal" Button.Click="CommonClickHandler">
                <Button Name="Button" Click="Button_Click">Button</Button>
                <CheckBox x:Name="CheckBox" />
            </StackPanel>
        </Border>
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WpfApplication1

{

    /// <summary>

    /// Interaction logic for Window1.xaml
    /// </summary>

    public partial class Window1 : Window

    {
        public Window1()
        {
            InitializeComponent();
        }
        private void CommonClickHandler(object sender, RoutedEventArgs e)
        {
            FrameworkElement feSource = e.Source as FrameworkElement;
            switch (feSource.Name)
            {
                case "Button":
                    MessageBox.Show("Event fired on Button"); 
                    break;
                case "CheckBox":
                    MessageBox.Show("Event fired on CheckBox"); 
                    break;
            }
            e.Handled = true;
        }
    }
}

Master detail DataGrid example with code behind

WPF > Controls > ItemControls > DataGrid > Master detail 2 grids

In this example we will use two DataGrid controls to display master detail data from code behind using SelectionChanged event.

XAML:

<Window x:Class="WpfApplication2.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        Title="MainWindow" Height="447.91" Width="514.871" Loaded="Window_Loaded">

    <Grid Margin="0,0,2,81">

        <DataGrid x:Name="dg" HorizontalAlignment="Left" VerticalAlignment="Top" Height="196" Width="507" SelectionChanged="dg_SelectionChanged"/>

        <DataGrid x:Name="dg1" HorizontalAlignment="Left" VerticalAlignment="Top" Height="214" Width="505" Margin="0,201,0,-78"/>

    </Grid>

</Window>

C# Code:

namespace WpfApplication2

{

    /// <summary>

    /// Interaction logic for MainWindow.xaml

    /// </summary>

    ///

    public class Skill

    {

        public int Years { get; set; }

        public string Name { get; set; }

    }

    public class Person

    {

        public int Id { get; set; }

        public string Name { get; set; }

        public string Position { get; set; }

        public List<Skill> SkillList { get; set; } 

    }

    public class Persons : ObservableCollection<Person>

    {

        public Persons()

        {

            Add(new Person() { Id = 1, Name = "Person1", Position = "Manager", SkillList = new List<Skill>() });

            Add(new Person() { Id = 2, Name = "Person2", Position = "Programmer", SkillList = new List<Skill>() });

            Add(new Person() { Id = 3, Name = "Person3", Position = "Programmer", SkillList = new List<Skill>() });

            Add(new Person() { Id = 4, Name = "Person4", Position = "Admin", SkillList = new List<Skill>() });

            Add(new Person() { Id = 5, Name = "Person5", Position = "Tester", SkillList = new List<Skill>() });

        }

    }

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

        }

        private void Window_Loaded(object sender, RoutedEventArgs e)

         {

            Persons pList = new Persons();

            pList[1].SkillList.Add(new Skill() {Years = 5, Name="C++"});

            pList[1].SkillList.Add(new Skill() {Years = 15, Name = "Visual Basic" });

            dg.ItemsSource = pList;

        }

        private void dg_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            dg1.ItemsSource = ((Person)e.AddedItems[0]).SkillList;

        }

    }

}



DataGridRow WPF

WPF > DataGrid > DataGridRow

DataGridRow represents a single data item in a bound data source. Each row contains one cell per column and each cell displays a single value in the bound data item.

• Style