apply outer border for the filtering icon when filtering is applied

[KR]

Hi,

I'm trying to apply a red color outer border for the funnel filtering icon when filter is applied to indicate the filter is active.

Looking at the documentation, I see 4 Path elements for PART_DropDownButton.

https://docs.telerik.com/devtools/wpf/controls/radgridview/styles-and-templates/templates-structure#filteringdropdown

 

But I only see 2 Path elements under DistinctFilterControlTemplate from GridView xaml (as shown in below code block). 2 of the paths from documentation indicate the outer border and background when filtering is applied.

Please guide me here on how to proceed to apply a red border when filtering is active.

<ControlTemplate TargetType="grid: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">
                <Grid>
                    <Path
                    Data="M0.93340254,0 L4.934082,0 L6.934082,0 L10.93358,0 C11.996876,0 12.199773,0.75 11.668063,1.359375 L8.4335356,5.5 C8.100522,5.8975558 7.983531,6.062263 7.9429321,6.2736206 L7.934082,6.3298788 L7.934082,10.332101 C7.934082,10.332101 3.9340818,14.997499 3.9340818,14.997499 L3.9340818,6.3293748 L3.9286206,6.3012671 C3.8825667,6.1045012 3.751812,5.9296875 3.3865709,5.5 L0.24589038,1.40625 C-0.2067349,0.84375 -0.066181421,1.2241071E-16 0.93340254,0 z"
                    Fill="{telerik:Windows8Resource ResourceKey=StrongBrush}"
                    Stretch="Fill"
                    Margin="2 1 2 2"
                    Width="8"
                    Height="11"/>
                    <Path
                    Data="M0.93340254,0 L4.934082,0 L6.934082,0 L10.93358,0 C11.996876,0 12.199773,0.75 11.668063,1.359375 L8.4335356,5.5 C8.100522,5.8975558 7.983531,6.062263 7.9429321,6.2736206 L7.934082,6.3298788 L7.934082,10.332101 C7.934082,10.332101 3.9340818,14.997499 3.9340818,14.997499 L3.9340818,6.3293748 L3.9286206,6.3012671 C3.8825667,6.1045012 3.751812,5.9296875 3.3865709,5.5 L0.24589038,1.40625 C-0.2067349,0.84375 -0.066181421,1.2241071E-16 0.93340254,0 z"
                    Fill="{telerik:Windows8Resource ResourceKey=AccentBrush}"
                    Width="8"
                    Height="11"
                    Visibility="{TemplateBinding FunnelFillVisibility}"
                    Margin="2 1 2 2"
                    Stretch="Fill"/>
                </Grid>
            </Border>
        </Button>
        <Popup x:Name="PART_DropDownPopup" StaysOpen="True" AllowsTransparency="True" PopupAnimation="Slide"/>
    </Grid>
</ControlTemplate>

[KR]

Can someone please help me with this? I'm trying to add a red border to the funnel when the filter is active.

Thanks!

[Vladimir Stoyanov]

Hello,

Thank you for the provided xaml. 

In order to achieve the desired requirement, you can add a trigger inside the FilteringDropDown ControlTemplate that sets the BorderBrush and the BorderThickness of the Border surrounding the filtering icon when the FunnelFillVisibility is Visible. I am attaching a sample project demonstrating this approach for your reference. Feel free to modify it in order to suit your exact scenario. 

Please, note that the ControlTemplate in the sample project is for the Office_Black theme. If you are using a different theme, you can modify the corresponding ControlTemplate for that theme. Additionally, note that the recommended approach for modifying ControlTemplates is with implicit styling and NoXaml binaries as in the attached project. 

I hope you find this helpful.

Regards,
Vladimir Stoyanov
Progress Telerik

[KR]

Thank you!

I'm using Windows 8 Theme. Can you please provide me the example project with Windows 8 Theme with implicit styling and NoXaml binaries.

[Vladimir Stoyanov]

Hello,

As per your request, I am attaching the sample project modified to use the Windows8 theme and the corresponding ControlTemplate. One thing to keep in mind is that I had to add a name to the Border in order to access it in the ControlTemplate Triggers. 

Hope this helps. 

Regards,
Vladimir Stoyanov
Progress Telerik