changing the Funnel filter icon

[Nick Polyak]

Hi
we are now in the process of choosing a WPF control set and Telerik is the front runner.
One thing we would like to know is whether it is possible to easily change the funnel-like icon for the filter at the column header of GridView control. Some of the managers want to make sure that we are not going to be stuck with it.
Thanks
Nick

[Rossen Hristov]

Hi Nick Polyak,

Although it is not very easy this can be achieved.

You can edit the template of the GridViewHeaderCell and look for an element called PART_DistinctFilterControl of type FilteringDropDown. This is the control that holds the funnel.

This custom control has a control template of its own. In the definition of this control you should define a new control template for it. You can get the original control template and modify it as needed. Here is the default template of the FilteringDropDown control:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:input="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"


                    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                    xmlns:grid="clr-namespace:Telerik.Windows.Controls.GridView"
                    xmlns:controls="clr-namespace:Telerik.Windows.Controls"



                    >


    <LinearGradientBrush x:Key="GridViewIndicatorsPartsFill" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000" Offset="0"/>
        <GradientStop Color="#FF000000" Offset="1"/>
    </LinearGradientBrush>
<SolidColorBrush x:Key="DistinctFilterActiveFunnelFill" Color="#FFFADCA5" />
<SolidColorBrush x:Key="DistinctFilterFunnelFill" Color="#FF535353" />
<SolidColorBrush x:Key="GridViewForeground" Color="#FF000000" />



    <!-- FilteringDropDown -->
    <ControlTemplate TargetType="grid:FilteringDropDown" x:Key="DistinctFilterControlTemplate">
        <Grid>

            <ToggleButton x:Name="PART_DropDownButton" Width="20" Height="20">
                <ToggleButton.Template>
                    <ControlTemplate TargetType="ToggleButton">
                        <ContentPresenter />
                    </ControlTemplate>
                </ToggleButton.Template>
                <Grid Width="11" Height="12" Background="Transparent">
                    <Path Fill="{StaticResource GridViewIndicatorsPartsFill}" Stretch="Fill" Width="11" Height="12" Data="M0,0 L11,0 11,1 10,1 10,2 9,2 9,3 8,3 8,3.9999999 7,3.9999999 7,12 4,12 4,3.9999999 3.0000001,3.9999999 3.0000001,3 2,3 2,2 1,2 1,1 0,1 z"/>
                    <Grid Width="11"
                          Height="12"
                          Visibility="{TemplateBinding FunnelFillVisibility}">
                        <Path Fill="{StaticResource DistinctFilterActiveFunnelFill}" Stretch="Fill" Data="M0,0 L1,0 2,0 3,0 4,0 5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0 z" Margin="3.016,1.016,2.984,0" VerticalAlignment="Top" Height="3" RenderTransformOrigin="0.5,0.5">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                                    <SkewTransform AngleX="0" AngleY="0"/>
                                    <RotateTransform Angle="0"/>
                                    <TranslateTransform X="0" Y="0"/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                        <Path Fill="{StaticResource DistinctFilterFunnelFill}" Stretch="Fill" Data="M2.9999999,0.99999994 L2.9999999,2 3.9999999,2 3.9999999,3 4.9999999,3 4.9999999,4 5.9999999,4 5.9999999,3 6.9999999,3 6.9999999,2 7.9999999,2 7.9999999,0.99999994 6.9999999,0.99999994 5.9999999,0.99999994 4.9999999,0.99999994 3.9999999,0.99999994 z M0,0 L11,0 11,0.99999994 9.9999999,0.99999994 9.9999999,2 8.9999999,2 8.9999999,3 7.9999999,3 7.9999999,4 6.9999999,4 6.9999999,12 3.9999999,12 3.9999999,4 2.9999999,4 2.9999999,3 1.9999999,3 1.9999999,2 0.99999994,2 0.99999994,0.99999994 0,0.99999994 z"/>
                    </Grid>
                </Grid>
            </ToggleButton>

            <Popup x:Name="PART_DropDownPopup">

              <Popup.StaysOpen>False</Popup.StaysOpen>


            </Popup>

         </Grid>
    </ControlTemplate>

    <Style TargetType="grid:FilteringDropDown"

        x:Key="{telerik:ThemeResourceKey ThemeType=telerik:Office_BlackTheme, ElementType=grid:FilteringDropDown}"
         >
        <Setter Property="Template" Value="{StaticResource DistinctFilterControlTemplate}"/>
        <Setter Property="Foreground" Value="{StaticResource GridViewForeground}" />
        <Setter Property="FontWeight" Value="Normal" />
    </Style>


</ResourceDictionary>

The toggle button above is the funnel. You can replace it with another toggle button or simply edit its template.

To learn more about styling RadGridView, please read this help article. I hope this helps.

Best wishes,
Ross
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Nick Polyak]

thanks for your prompt answer.
How do I get the  the template of the GridViewHeaderCell?

[Nick Polyak]

I am all set thank you!

[Philip]

Would it be possible when you run across a solution, that you post the solution instead of just saying "I am all set".

I have the same issue you were inquiring about and would love to know how you fixed it.

I dont mean to be harping, just would love to know how you found that.

[Rossen Hristov]

Hello Philip,

Here is the overview for styling RadGridView.

This help topic can help you get started with the GridViewHeaderCell template.

Finally, this is the template structure of the header cell.

By following this tutorials you should be able to modify the header cell template.

Let us know if there are problems or if you have any specific questions.

Best wishes,
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.

[Dante]

Hi, how can I change the funnel icon with my own icon?

I found the code block below on one of the answers but not sure where to insert the .jpg path that I have.

Thanks in advance.

<ControlTemplate x:Key="DistinctFilterControlTemplate" TargetType="telerik:FilteringDropDown">
        <Grid>
            <Grid.Resources>
            </Grid.Resources>

            <ToggleButton x:Name="PART_DropDownButton"
                                  Width="20"
                                  Height="20"
                                  Background="Red"
                                  >
                <ToggleButton.Template>
                    <ControlTemplate TargetType="ToggleButton">
                        <ContentPresenter />
                    </ControlTemplate>
                </ToggleButton.Template>
                <Grid Width="11" Height="12" Background="Transparent">

                    <Path Fill="{StaticResource GridViewIndicatorsPartsFill}"
                         Stretch="Fill"
                         Width="4"
                         Height="4"
                         Data="M0,0 L11,0 11,1 10,1 10,2 9,2 9,3 8,3 8,3.9999999 7,3.9999999 7,12 4,12 4,3.9999999 3.0000001,3.9999999 3.0000001,3 2,3 2,2 1,2 1,1 0,1 z"/>
                    <Grid Width="11"
                          Height="12"
                          Visibility="{TemplateBinding FilteringIndicatorVisibility}">
                        <Path Fill="{StaticResource DistinctFilterActiveFunnelFill}"
                              Stretch="Fill"
                              Data="M0,0 L1,0 2,0 3,0 4,0 5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0 z"
                              Margin="3.016,1.016,2.984,0"
                              VerticalAlignment="Top"
                              Height="3"
                              RenderTransformOrigin="0.5,0.5">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                                    <SkewTransform AngleX="0" AngleY="0"/>
                                    <RotateTransform Angle="0"/>
                                    <TranslateTransform X="0" Y="0"/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                        <Path Fill="{StaticResource DistinctFilterFunnelFill}"
                              Stretch="Fill"
                              Data="M2.9999999,0.99999994 L2.9999999,2 3.9999999,2 3.9999999,3 4.9999999,3 4.9999999,4 5.9999999,4 5.9999999,3 6.9999999,3 6.9999999,2 7.9999999,2 7.9999999,0.99999994 6.9999999,0.99999994 5.9999999,0.99999994 4.9999999,0.99999994 3.9999999,0.99999994 z M0,0 L11,0 11,0.99999994 9.9999999,0.99999994 9.9999999,2 8.9999999,2 8.9999999,3 7.9999999,3 7.9999999,4 6.9999999,4 6.9999999,12 3.9999999,12 3.9999999,4 2.9999999,4 2.9999999,3 1.9999999,3 1.9999999,2 0.99999994,2 0.99999994,0.99999994 0,0.99999994 z"/>
                    </Grid>
                </Grid>
            </ToggleButton>
            <Popup x:Name="PART_DropDownPopup">
                <Popup.StaysOpen>False</Popup.StaysOpen>
            </Popup>
        </Grid>
    </ControlTemplate>

 

[KR]

Was anyone able to change the  funnel icon with my own icon? Please share the code. I'm using Windows8 theme.

[Martin Ivanov]

Hello,

To replace the funnel icon, you can extract the ControlTemplate of the FilteringDropDown control and modify it a bit. Basically, you can remove the Grid that holds the two Path elements (drawing the default icon) and add a custom element that shows your icon. To apply the custom template you can use an implicit style.

I've extracted and modified the template from the Windows8 theme. The template is using RadGlyph now, instead of the default Path elements.

<Window.Resources>
    <ControlTemplate TargetType="telerik:FilteringDropDown" x:Key="DistinctFilterControlTemplate">
        <Grid>
            <Button x:Name="PART_DropDownButton">
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter/>
                    </ControlTemplate>
                </Button.Template>
                <Border Cursor="Hand" MinWidth="22" Background="Transparent">
                    <telerik:RadGlyph FontSize="16" Glyph="" Foreground="{TemplateBinding Foreground}" />
                </Border>
            </Button>
            <Popup x:Name="PART_DropDownPopup" StaysOpen="True" AllowsTransparency="True" PopupAnimation="Slide"/>
        </Grid>
    </ControlTemplate>
    <Style TargetType="telerik:FilteringDropDown">
        <Setter Property="Template" Value="{StaticResource DistinctFilterControlTemplate}"/>
    </Style>
</Window.Resources>

I hope this helps.

Regards,
Martin Ivanov
Progress Telerik