Click here to Skip to main content
15,895,777 members
Articles / Desktop Programming / WPF

Filtering the WPF DataGrid automatically via the header (inline filtering)

Rate me:
Please Sign up or sign in to vote.
4.81/5 (35 votes)
25 Aug 2009CPOL6 min read 229.1K   10.7K   73  
This will help you create a grid that has inline filtering like you see in DevExpress / Telerik.
<ResourceDictionary
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="clr-namespace:Labs.Filtering"
   xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit">

    <local:HeaderFilterConverter x:Key="headerConverter"/>

    <Style TargetType="{x:Type my:DataGridColumnHeader}">
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type my:DataGridColumnHeader}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="ShowFilterControl">
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="filterTextBox" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                                <DiscreteObjectKeyFrame KeyTime="00:00:00.5000000" Value="{x:Static Visibility.Visible}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="filterTextBox" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="Transparent"/>
                                <SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="White"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="HideFilterControl">
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="filterTextBox" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00.4000000" Value="{x:Static Visibility.Collapsed}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="filterTextBox" Storyboard.TargetProperty="(UIElement.OpacityMask).(SolidColorBrush.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="Black"/>
                                <SplineColorKeyFrame KeyTime="00:00:00.4000000" Value="#00000000"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                        <my:DataGridHeaderBorder x:Name="dataGridHeaderBorder" Margin="0" VerticalAlignment="Top" Height="31" IsClickable="{TemplateBinding CanUserSort}" IsHovered="{TemplateBinding IsMouseOver}" IsPressed="{TemplateBinding IsPressed}" SeparatorBrush="{TemplateBinding SeparatorBrush}" SeparatorVisibility="{TemplateBinding SeparatorVisibility}" SortDirection="{TemplateBinding SortDirection}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.ColumnSpan="1">
                            <Grid x:Name="grid" Width="Auto" Height="Auto" RenderTransformOrigin="0.5,0.5">
                                <Grid.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Grid.RenderTransform>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                            <ContentPresenter x:Name="contentPresenter"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                    ContentStringFormat="{TemplateBinding ContentStringFormat}" 
                                    ContentTemplate="{TemplateBinding ContentTemplate}">
                                <ContentPresenter.Content>
                                        <MultiBinding Converter="{StaticResource headerConverter}">
                                            <MultiBinding.Bindings>
                                                <Binding ElementName="filterTextBox" Path="Text" />
                                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Content" />
                                            </MultiBinding.Bindings>
                                        </MultiBinding>
                                </ContentPresenter.Content>
                            </ContentPresenter>
                            <TextBox x:Name="filterTextBox" HorizontalAlignment="Right" MinWidth="25" Height="Auto" OpacityMask="Black" Visibility="Collapsed" Text="" TextWrapping="Wrap" Grid.Column="0" Grid.ColumnSpan="1"/>
                            </Grid>
                      </my:DataGridHeaderBorder>                      
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="ShowFilterControl_BeginStoryboard" Storyboard="{StaticResource ShowFilterControl}"/>
                                <StopStoryboard BeginStoryboardName="HideFilterControl_BeginShowFilterControl"/>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard x:Name="HideFilterControl_BeginShowFilterControl" Storyboard="{StaticResource HideFilterControl}"/>
                                <StopStoryboard BeginStoryboardName="ShowFilterControl_BeginStoryboard"/>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </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 Code Project Open License (CPOL)


Written By
Technical Lead RealDolmen
Belgium Belgium
I'm a Technical Consultant at RealDolmen, one of the largest players on the Belgian IT market: http://www.realdolmen.com

All posts also appear on my blogs: http://blog.sandrinodimattia.net and http://blog.fabriccontroller.net

Comments and Discussions