Click here to Skip to main content
15,885,760 members
Articles / Desktop Programming / WPF

Auto-filter for Microsoft WPF DataGrid

Rate me:
Please Sign up or sign in to vote.
4.81/5 (25 votes)
29 Jan 2009Eclipse3 min read 226.1K   8.4K   62  
Allows auto filtering functionality for DataGrid columns.
<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


Written By
Software Developer (Senior) Lab49
United Kingdom United Kingdom
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions