Here, you can see the grid with nine columns. The first one is 'ID' and the other all shows the byte of the column from 0 to 7.
![Filter data on XAML grid by clicking the checkbox in WPF]()
MainWindow.xaml
In order to design this type of layout you need to be familiar with the basic grid concept in XAML. I just add the xaml code.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<DataGrid Grid.Column="0" HorizontalAlignment="Left" x:Name="gridList" IsReadOnly="True" AutoGenerateColumns="false" CanUserResizeColumns="false" CanUserAddRows="false">
<DataGrid.Columns>
<DataGridTextColumn x:Name="id" Width="70" Header="ID" Binding="{Binding ID}" />
<DataGridTextColumn x:Name="zero" Width="70" Header="0" Binding="{Binding Zero}" />
<DataGridTextColumn x:Name="one" Width="70" Header="1" Binding="{Binding One}" />
<DataGridTextColumn x:Name="two" Width="70" Header="2" Binding="{Binding Two}" />
<DataGridTextColumn x:Name="three" Width="70" Header="3" Binding="{Binding Three}" />
<DataGridTextColumn x:Name="four" Width="70" Header="4" Binding="{Binding Four}" />
<DataGridTextColumn x:Name="five" Width="70" Header="5" Binding="{Binding Five}" />
<DataGridTextColumn x:Name="six" Width="70" Header="6" Binding="{Binding Six}" />
<DataGridTextColumn x:Name="seven" Width="70" Header="7" Binding="{Binding Seven}" />
</DataGrid.Columns>
</DataGrid>
<Grid Margin="6,44,6,6" Grid.Column="1" Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<Label FontSize="16" Grid.Row="0" FontWeight="SemiBold" HorizontalAlignment="Left">Filters:</Label>
<DataGrid Grid.Row="1" x:Name="filterGridList" AutoGenerateColumns="false" CanUserResizeColumns="false" CanUserAddRows="false" Grid.ColumnSpan="2">
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<CheckBox Name="checkBoxId" Content="{Binding Id}" IsChecked="{Binding check}" Checked="OnCheckedId" Unchecked="OnUnCheckedId" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Grid>
Just place this code between <Window> .... </Window> tag. The important thing is the name of grid which is mention as <DataGrid x:Name="gridList"> and <DataGrid x:Name="filterGridList">.
ViewModel.cs
Just right click on the project and add the class. In this class, I just add IEnumerable interface.
public IEnumerable < DataGridItem > DataGridItems {
get;
set;
}
MainWindow.xaml.cs
Now, we need to create static list with propertry values inside the constructor of MainWindow(){ }.
public MainWindow() {
InitializeComponent();
this.viewModel = new ViewModel {
DataGridItems = new List < DataGridItem > () {
new DataGridItem {
ID = "1",
Zero = "0x00",
One = "0xF2",
Two = "0x2F",
Three = "0xFB",
Four = "0xFA",
Five = "0x4F",
Six = "0x0F",
Seven = "0xFC"
},
new DataGridItem {
ID = "2",
Zero = "0x00",
One = "0xF2",
Two = "0212",
Three = "0xFB",
Four = "0xFA",
Five = "0x00FF",
Six = "0x1F",
Seven = "0xFC"
},
new DataGridItem {
ID = "3",
Zero = "0x00",
One = "0xF2",
Two = "012",
Three = "0xFB",
Four = "0xFA",
Five = "0x00FF",
Six = "0x1F",
Seven = "0xFC"
},
new DataGridItem {
ID = "4",
Zero = "0x00",
One = "0xF2",
Two = "2121",
Three = "0xFB",
Four = "0xFA",
Five = "0x00FF",
Six = "0x1F",
Seven = "0xFC"
},
new DataGridItem {
ID = "5",
Zero = "0x00",
One = "0xF2",
Two = "4121",
Three = "0xFB",
Four = "0xFA",
Five = "0x00FF",
Six = "0x1F",
Seven = "0xFC"
},
new DataGridItem {
ID = "6",
Zero = "0x00",
One = "0xF2",
Two = "0412",
Three = "0xFB",
Four = "0xFA",
Five = "0x00FF",
Six = "0x1F",
Seven = "0xFC"
},
new DataGridItem {
ID = "7",
Zero = "0x00",
One = "0xF2",
Two = "4111",
Three = "0xFB",
Four = "0xFA",
Five = "0x00FF",
Six = "0x1F",
Seven = "0xFC"
},
new DataGridItem {
ID = "8",
Zero = "0x00",
One = "0xF2",
Two = "0x0F",
Three = "0xFB",
Four = "0xFA",
Five = "0x00FF",
Six = "0x1F",
Seven = "0xFC"
},
new DataGridItem {
ID = "8",
Zero = "0x00",
One = "0xF2",
Two = "0x0F",
Three = "0xFB",
Four = "0xFA",
Five = "0x00FF",
Six = "0x1F",
Seven = "0xFC"
},
new DataGridItem {
ID = "7",
Zero = "0x00",
One = "0xF2",
Two = "0x0F",
Three = "0xFB",
Four = "0xFA",
Five = "0x00FF",
Six = "0x1F",
Seven = "0xFC"
}
}
};
gridList.ItemsSource = this.viewModel.DataGridItems;
var list = this.viewModel.DataGridItems;
var filterList = list.Select(x => x.ID).Distinct();
List < FilterValue > filterValues = new List < FilterValue > ();
foreach(var item in filterList) {
filterValues.Add(new FilterValue {
Id = item, check = true
});
filterGridList.ItemsSource = filterValues;
}
}
To bind the data in filter list we need to create a class outside the scope of MainWindow.
public class FilterValue {
public string Id {
get;
set;
}
public bool check {
get;
set;
}
}
If you run the project at this moment, you will see the data on the grid and the filter section as well with distinct id and checkbox checked by default. Now we are moving to create a method to filter the data on the grid by Unchecked and Checked the checkbox. we have already added the click event in xaml code for check box.
<CheckBox Name="checkBoxId" Content="{Binding Id}" IsChecked="{Binding check}" Checked="OnCheckedId" Unchecked="OnUnCheckedId" />
Unchecked Checkbox
As we have seen, the default property of checkbox is checked. If we unchecked any checkbox the data row will be removed from grid by matching id.
private void OnUnCheckedId(object sender, RoutedEventArgs e) {
System.Windows.Controls.CheckBox cb = sender as System.Windows.Controls.CheckBox;
List < DataGridItem > items = new List < DataGridItem > ();
var remainList = gridList.ItemsSource;
items = remainList.Cast < DataGridItem > ().ToList();
var newList = items.Where(x => x.ID != cb.Content.ToString());
gridList.ItemsSource = newList;
}
Oncheck Checkbox
If we again click on any checkbox the data will be displayed on grid.
private void OnUnCheckedId(object sender, RoutedEventArgs e) {
System.Windows.Controls.CheckBox cb = sender as System.Windows.Controls.CheckBox;
List < DataGridItem > items = new List < DataGridItem > ();
var remainList = gridList.ItemsSource;
items = remainList.Cast < DataGridItem > ().ToList();
var newList = items.Where(x => x.ID != cb.Content.ToString());
gridList.ItemsSource = newList;
}
![Filter data on XAML grid by clicking the checkbox in WPF]()
GitHub
you can download source code from here https://github.com/aqibmurtaza9/FIlterInXAMLGrid