Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Auto-filter for Microsoft WPF DataGrid

, 29 Jan 2009 Eclipse
Allows auto filtering functionality for DataGrid columns.
WPFGridFilter.zip
WPFGridFilter
PowerCollections
PowerCollections.csproj.user
Properties
Stepi.Collections
bin
Filters
Properties
Stepi.UIFilters
bin
Initializers
Properties
Settings.settings
Themes
Test.GridSorting
bin
Debug
Test.GridFilter.vshost.exe
Properties
Settings.settings
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Stepi.UIFilters"
    xmlns:diagnostics="clr-namespace:System.Diagnostics;assembly=WindowsBase">

    <Style x:Key="contextMenuStyle" TargetType="{x:Type ContextMenu}">
        <Setter Property="Background" Value="#F5F5F5" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="#FF959595" />
        <Setter Property="Padding" Value="2" />
        <Setter Property="Width" Value="Auto"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ContextMenu}">
                    <ControlTemplate.Resources>
                        <Style TargetType="{x:Type MenuItem}">
                            <Setter Property="MenuItem.Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Border HorizontalAlignment="Stretch" x:Name="Root" 
                                                Width="{TemplateBinding Width}">
                                            <ContentPresenter Content="{TemplateBinding MenuItem.Header}"/>
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ControlTemplate.Resources>
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                            Width="{TemplateBinding Width}" MaxWidth="{TemplateBinding MaxWidth}" MaxHeight="{TemplateBinding Height}">
                        <ScrollViewer CanContentScroll="true" Margin="1,0"   VerticalScrollBarVisibility="Auto" Width="Auto">
                            <ItemsPresenter Margin="{TemplateBinding Padding}" KeyboardNavigation.DirectionalNavigation="Cycle" Width="Auto" 
                                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type local:DropDownButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:DropDownButton}">
                    <Border Padding="{TemplateBinding Padding}">
                        <Grid SnapsToDevicePixels="False" Background="Transparent">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="14"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border HorizontalAlignment="Center" x:Name="border" 
                                    VerticalAlignment="Center" Width="14" Height="14" CornerRadius="3" 
                                    BorderThickness="0.5"/>
                            <Border Visibility="Hidden" HorizontalAlignment="Center" CornerRadius="3"
                                    x:Name="borderShadow" VerticalAlignment="Center" Width="12" Height="12" 
                                    BorderThickness="0.5"/>
                            <Path SnapsToDevicePixels="false" HorizontalAlignment="Center" x:Name="arrow" VerticalAlignment="Center" Stroke="#666" StrokeThickness="2" 
                                  Data="M 1,1.5 L 4.5,5 L 8,1.5"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="Data" TargetName="arrow" Value="M 1,4.5  L 4.5,1  L 8,4.5"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="BorderBrush" TargetName="border" Value="#666"/>
                            <Setter Property="Stroke" TargetName="arrow" Value="#222"/>
                            <Setter Property="Visibility" TargetName="borderShadow" Value="Visible"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- border style -->
    <Style x:Key="borderStyle" TargetType="{x:Type Border}">
        <Setter Property="BorderBrush" Value="#FF9D5C5C"/>
        <Setter Property="CornerRadius" Value="5"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Width" Value="Auto"/>
        <Setter Property="MinWidth" Value="150"/>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                    <GradientStop Color="#FFFEFEFE" />
                    <GradientStop Color="#FFD1D1F1" Offset="1" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Text block style for displaying the filter type -->
    <Style x:Key="FilterNameStyle" TargetType="{x:Type TextBlock}">
        <Setter Property="FontSize" Value="11"/>
        <Setter Property="Foreground" Value="Silver"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="Margin" Value="2"/>
    </Style>

    <!--Filters View-->
    <Style TargetType="{x:Type local:FiltersView}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:FiltersView}">
                    <Border>
                        <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"
                          HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalAlignment}"
                          Background="{TemplateBinding Background}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <local:DropDownButton x:Name="PART_DropDown" Grid.Row="0" DropDownStyle="{StaticResource contextMenuStyle}" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type local:DataGridColumnFilter}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:DataGridColumnFilter}">
                    <Grid x:Name="layoutRoot"
                          Background="{TemplateBinding Background}"
                          Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
                          MinHeight="{TemplateBinding MinHeight}" MinWidth="{TemplateBinding MinWidth}"
                          Margin="{TemplateBinding Margin}">

                        <local:FiltersView x:Name="PART_FiltersView"
                                           HorizontalAlignment="Stretch" VerticalAlignment="Center" 
                                           Height="Auto" Background="Transparent"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <!-- UI Filter Value template -->
    <DataTemplate x:Key="UIValueFilterTemplate">
        <Border Height="Auto" Margin="0,0,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
				BorderThickness="1,1,1,1" CornerRadius="5,5,5,5"
                 SnapsToDevicePixels="True">
            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <CheckBox  Height="Auto" Width="Auto" VerticalAlignment="Center"
				           IsChecked="{Binding IsSelected, Mode=TwoWay, diagnostics:PresentationTraceSources.TraceLevel=High}"/>
                <TextBlock Text="{Binding Value}" Grid.Column="1" VerticalAlignment="Center" Margin="2,0,2,0"/>
            </Grid>
        </Border>
    </DataTemplate>


    <!-- Multi Value Filter-->
    <Style TargetType="{x:Type local:MultiValueFilterView}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:MultiValueFilterView}">
                    <Border Margin="{TemplateBinding Margin}"        
                            MaxHeight="150" 
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalAlignment}"
                            Style="{StaticResource borderStyle}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <ListBox Height="Auto" Width="Auto" x:Name="PART_Items" Grid.Row="1" Grid.ColumnSpan="2" Background="White"
                                      SelectionMode="Single"  SnapsToDevicePixels="False" SelectedValuePath="{x:Null}"
                                      ItemTemplate="{StaticResource UIValueFilterTemplate}">
                            </ListBox>

                            <TextBlock x:Name="PART_Name" Grid.Column="0" Grid.Row="0"
                                       Style="{StaticResource FilterNameStyle}"/>

                            <CheckBox   x:Name="PART_ToggleActivate"
                                        HorizontalAlignment="Stretch" VerticalAlignment="Center" Content="Enabled" VerticalContentAlignment="Top"
                                        Grid.Column="1" 
                                        Padding="1,1,1,1" Margin="0,5,5,5"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- String Value Filter-->
    <Style TargetType="local:StringFilterView">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:StringFilterView">
                    <Border Height="Auto"
                            Margin="{TemplateBinding Margin}"               
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalAlignment}"
                            Style="{StaticResource borderStyle}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <TextBlock x:Name="PART_Name" Grid.Column="0"
                                       Style="{StaticResource FilterNameStyle}"/>

                            <CheckBox x:Name="PART_ToggleActivate"
                                      HorizontalAlignment="Stretch" Content="Enabled" 
                                      Grid.Column="2" HorizontalContentAlignment="Stretch" 
                                      Padding="1,1,1,1" Margin="0,5,5,5"/>

                            <TextBlock Margin="1" Text="Search Type:" 
                                       Grid.Row="1"
                                       TextWrapping="NoWrap" HorizontalAlignment="Right"/>

                            <TextBlock Margin="1" Text="Find:" TextWrapping="Wrap" Grid.Row="2" HorizontalAlignment="Right"/>

                            <TextBox  x:Name="PART_Input" 
                                       Margin="1" TextWrapping="NoWrap" Grid.ColumnSpan="2" Grid.Row="2" Grid.Column="1" Padding="1,1,1,1"/>

                            <ComboBox HorizontalAlignment="Stretch" Grid.Column="1"  Grid.ColumnSpan="2" Grid.Row="1" Padding="1,1,1,1" Margin="2"
                                      x:Name="PART_FilterType"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Compare Value Filter-->
    <Style TargetType="local:CompareFilterView">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CompareFilterView">
                    <Border Height="Auto"
                            Margin="{TemplateBinding Margin}"                                                        
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalAlignment}"
                            Style="{StaticResource borderStyle}">
                        <Grid HorizontalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <TextBlock x:Name="PART_Name" Grid.Column="0" Grid.ColumnSpan="2"
                                       Style="{StaticResource FilterNameStyle}"/>

                            <CheckBox   x:Name="PART_ToggleActivate"
                                        HorizontalAlignment="Right" Content="Enabled" 
                                        Grid.Column="1" HorizontalContentAlignment="Left" 
                                        Padding="1,1,1,1" Margin="0,5,5,5"/>

                            <TextBlock  HorizontalAlignment="Left" Margin="0"  VerticalAlignment="Center"
										Text="Value:" TextWrapping="NoWrap" Padding="1,1,1,1"
                                        Grid.Row="1"/>

                            <TextBox    x:Name="PART_Input" TextWrapping="NoWrap" 
                                        Grid.Column="1" Padding="1,1,1,1" Margin="2"
                                        Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Range Value Filter-->
    <Style TargetType="local:RangeFilterView">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:RangeFilterView">
                    <Border Height="Auto"
                            Margin="{TemplateBinding Margin}"           
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalAlignment}"
                            Style="{StaticResource borderStyle}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <TextBlock x:Name="PART_Name" Grid.Column="0" Grid.ColumnSpan="2"
                                       Style="{StaticResource FilterNameStyle}"/>

                            <CheckBox   x:Name="PART_ToggleActivate"
                                        HorizontalAlignment="Right" Content="Enabled" 
                                        Grid.Column="1" HorizontalContentAlignment="Stretch" 
                                        Padding="1,1,1,1" Margin="0,5,5,5"/>

                            <TextBlock  HorizontalAlignment="Left" Margin="1,1,1,1" 
										Text="From:" TextWrapping="NoWrap" Padding="1,1,1,1" Grid.Row="1" TextAlignment="Left" />

                            <TextBox x:Name="PART_From"  TextWrapping="NoWrap" 
                                     Grid.Column="1" Padding="1,1,1,1" Grid.Row="1" 
                                     Margin="1,1,1,1" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>

                            <TextBlock Margin="1,1,1,1" Text="To :" TextWrapping="Wrap" Grid.Column="0" Grid.Row="2" Padding="1,1,1,1"/>

                            <TextBox x:Name="PART_To" TextWrapping="NoWrap" 
                                     Grid.Row="2" Grid.Column="1" Margin="1,1,1,1" Padding="1,1,1,1" 
                                     VerticalAlignment="Center" HorizontalAlignment="Stretch"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
</ResourceDictionary>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Eclipse Public License 1.0

Share

About the Author

Stefan Bocutiu
Software Developer (Senior) Lab49
United Kingdom United Kingdom
No Biography provided

| Advertise | Privacy | Mobile
Web04 | 2.8.141015.1 | Last Updated 29 Jan 2009
Article Copyright 2009 by Stefan Bocutiu
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid