Styling Contents of Filter Drop Down

[Mark]

I'm trying to style the contents of the filter drop down for each of the gird view columns. I'm happy with the actual contents and layout of the controls, I'm just wanting to change the colour scheme for all the check boxes, combo boxes, text boxes and buttons on the filter drop down. Can anyone point me in the right direction to achieve this?

[Rossen Hristov]

Hello Mark,

Create a instance of the class FilteringControl (this is the default filtering control that you see), change its template through a Style. Now do the painting in the control template. Finally, assign it to the column.

Here is how to do it:

<Window x:Class="StyledFilteringControl.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:my="clr-namespace:StyledFilteringControl"
        Title="Window1" Height="700" Width="700">
    <Window.Resources>
        <my:MyViewModel x:Key="MyViewModel"/>
    </Window.Resources>
    <Grid DataContext="{StaticResource MyViewModel}">
        <Grid.Resources>

            <SolidColorBrush x:Key="ControlInnerBorder" Color="White" />
            <telerik:Office_BlackTheme x:Key="Theme" />
            <SolidColorBrush x:Key="GridView_FilteringControlBackground" Color="#FFE4E4E4" />
            <SolidColorBrush x:Key="GridView_FilteringControlOuterBorder" Color="#FF848484" />
            <SolidColorBrush x:Key="ControlForeground" Color="Black" />


            <telerik:FilterOperatorConverter x:Key="FilterOperatorConverter" />
            <telerik:FilterCompositionLogicalOperatorConverter x:Key="FilterCompositionLogicalOperatorConverter" />

            <DataTemplate x:Key="ActionTemplate">
                <TextBlock Text="{Binding Converter={StaticResource FilterOperatorConverter}}" />
            </DataTemplate>

            <DataTemplate x:Key="LogicalOperatorTemplate">
                <TextBlock Text="{Binding Converter={StaticResource FilterCompositionLogicalOperatorConverter}}" />
            </DataTemplate>

            <ControlTemplate x:Key="FilteringControlTemplate" TargetType="telerik:FilteringControl">
                <Border BorderThickness="{TemplateBinding BorderThickness}"
                Margin="{TemplateBinding Margin}"
                CornerRadius="1"
                BorderBrush="{TemplateBinding BorderBrush}">
                    <Border BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1" Background="{TemplateBinding Background}">
                        <StackPanel MinWidth="200" MaxWidth="350" Margin="{TemplateBinding Padding}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">

                            <TextBlock Foreground="Red" FontSize="18">Look, I am different ;)</TextBlock>

                            <StackPanel x:Name="PART_DistinctFilter" Visibility="{TemplateBinding DistinctFiltersVisibility}">
                                <CheckBox x:Name="PART_SelectAllCheckBox"
                                  IsChecked="{Binding SelectAll, Mode=TwoWay}"
                                  Margin="0,2"
                                  telerik:LocalizationManager.ResourceKey="GridViewFilterSelectAll"
                                  telerik:StyleManager.Theme="{StaticResource Theme}"/>

                                <ListBox x:Name="PART_DistinctValuesList"
                                 ItemsSource="{Binding DistinctValues}"
                                 telerik:StyleManager.Theme="{StaticResource Theme}"
                                 ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                 MaxHeight="250"
                                 SelectionMode="Multiple">

                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <CheckBox IsChecked="{Binding IsActive, Mode=TwoWay}"
                                              Content="{Binding ConvertedValue}"
                                              VerticalContentAlignment="Center"
                                              telerik:StyleManager.Theme="{StaticResource Theme}"/>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                    <ListBox.ItemContainerStyle>
                                        <Style TargetType="ListBoxItem"


                                       BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Office_BlackTheme, ElementType=ListBoxItem}}"

                                       >
                                        </Style>
                                    </ListBox.ItemContainerStyle>
                                </ListBox>
                            </StackPanel>
                            <StackPanel Margin="0,2">
                                <TextBlock telerik:LocalizationManager.ResourceKey="GridViewFilterShowRowsWithValueThat" Margin="0,2,0,0" />
                                <telerik:RadComboBox x:Name="PART_Filter1ComboBox"
                                           Margin="0,2,0,2"
                                           ItemTemplate="{StaticResource ActionTemplate}"
                                           telerik:StyleManager.Theme="{StaticResource Theme}"
                                           ItemsSource="{Binding AvailableActions}"
                                           SelectedItem="{Binding Filter1.Operator, Mode=TwoWay}" />
                                <TextBox x:Name="PART_Filter1TextBox"
                                 Text="{Binding Filter1.Value, Mode=TwoWay}"
                                 VerticalContentAlignment="Center"
                                 Margin="0,2" Padding="3,0"
                                 telerik:StyleManager.Theme="{StaticResource Theme}"
                                 Height="22" />
                                <CheckBox x:Name="PART_Filter1MatchCaseCheckBox"
                                  IsChecked="{Binding Filter1.IsCaseSensitive, Mode=TwoWay}"
                                  Visibility="{Binding MatchCaseVisibility}"
                                  Margin="0,2"
                                  telerik:LocalizationManager.ResourceKey="GridViewFilterMatchCase"
                                  telerik:StyleManager.Theme="{StaticResource Theme}"/>
                                <telerik:RadComboBox x:Name="PART_LogicalOperatorsComboBox"
                                           Margin="0,2"
                                           telerik:StyleManager.Theme="{StaticResource Theme}"
                                           ItemTemplate="{StaticResource LogicalOperatorTemplate}"
                                           ItemsSource="{Binding LogicalOperators}"
                                           SelectedItem="{Binding FieldFilterLogicalOperator, Mode=TwoWay}" />
                                <telerik:RadComboBox x:Name="PART_Filter2ComboBox"
                                           Margin="0,2"
                                           telerik:StyleManager.Theme="{StaticResource Theme}"
                                           ItemTemplate="{StaticResource ActionTemplate}"
                                           ItemsSource="{Binding AvailableActions}"
                                           SelectedItem="{Binding Filter2.Operator, Mode=TwoWay}" />
                                <TextBox x:Name="PART_Filter2TextBox"
                                 Text="{Binding Filter2.Value, Mode=TwoWay}"
                                 VerticalContentAlignment="Center"
                                 Margin="0,2" Padding="3,0"
                                 telerik:StyleManager.Theme="{StaticResource Theme}"
                                 Height="22" />
                                <CheckBox x:Name="PART_Filter2MatchCaseCheckBox"
                                  IsChecked="{Binding Filter2.IsCaseSensitive, Mode=TwoWay}"
                                  Visibility="{Binding MatchCaseVisibility}"
                                  Margin="0,2"
                                  telerik:LocalizationManager.ResourceKey="GridViewFilterMatchCase"
                                  telerik:StyleManager.Theme="{StaticResource Theme}"/>
                            </StackPanel>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Button x:Name="PART_ApplyFilterButton" Grid.Column="0"
                                Margin="0,2,2,2" Height="22"
                                telerik:LocalizationManager.ResourceKey="GridViewFilter"
                                telerik:StyleManager.Theme="{StaticResource Theme}" />
                                <Button x:Name="PART_ClearFilterButton" Grid.Column="1"
                                Margin="2,2,0,2" Height="22"
                                telerik:LocalizationManager.ResourceKey="GridViewClearFilter"
                                telerik:StyleManager.Theme="{StaticResource Theme}" />
                            </Grid>
                        </StackPanel>
                    </Border>
                </Border>

            </ControlTemplate>

            <Style TargetType="telerik:FilteringControl" x:Key="FilteringControlStyle">
                <Setter Property="Template" Value="{StaticResource FilteringControlTemplate}" />
            </Style>

        </Grid.Resources>
        <telerik:RadGridView Grid.Row="0"
                             Name="clubsGrid"
                             ItemsSource="{Binding Clubs}"
                             AutoGenerateColumns="False"
                             Margin="5">
            <telerik:RadGridView.Columns>
                <telerik:GridViewToggleRowDetailsColumn/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}">
                    <telerik:GridViewDataColumn.FilteringControl>
                        <telerik:FilteringControl Style="{StaticResource FilteringControlStyle}"/>
                    </telerik:GridViewDataColumn.FilteringControl>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Established}" Header="Est." DataFormatString="{}{0:yyyy}">
                    <telerik:GridViewDataColumn.FilteringControl>
                        <telerik:FilteringControl Style="{StaticResource FilteringControlStyle}"/>
                    </telerik:GridViewDataColumn.FilteringControl>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}" Header="Stadium" DataFormatString="{}{0:N0}">
                    <telerik:GridViewDataColumn.FilteringControl>
                        <telerik:FilteringControl Style="{StaticResource FilteringControlStyle}"/>
                    </telerik:GridViewDataColumn.FilteringControl>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</Window>

I have prepared and attached a simple project that does all of this.

I hope this helps.

Sincerely yours,
Ross
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mark]

Thanks, that's exactly what I was after!

[gans]

Ross,

Could you please let me know what should I change in the XAML for this to work with latest Telerik Version. 2012 SP1 

<telerik:GridViewDataColumn.FilteringControl>

     <telerik:FilteringControl Style="{StaticResource FilteringControlStyle}"/>

 </telerik:GridViewDataColumn.FilteringControl>




I am getting error at the line where you specify the Style. I think this needs to change for the new version. 

If its not of too much effort, could you please update  the Project you had attached with latest version?

[gans]

Never mind, I got it working by setting the style from code behind.