This is a migrated thread and some comments may be shown as answers.

apply outer border for the filtering icon when filtering is applied

4 Answers 18 Views
GridView
This is a migrated thread and some comments may be shown as answers.
KR
Top achievements
Rank 1
Veteran
KR asked on 06 Apr 2019, 03:04 AM

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>

4 Answers, 1 is accepted

Sort by
0
KR
Top achievements
Rank 1
Veteran
answered on 10 Apr 2019, 02:27 PM

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

Thanks!

0
Vladimir Stoyanov
Telerik team
answered on 10 Apr 2019, 04:31 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
KR
Top achievements
Rank 1
Veteran
answered on 10 Apr 2019, 06:27 PM

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.

0
Vladimir Stoyanov
Telerik team
answered on 15 Apr 2019, 09:53 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
GridView
Asked by
KR
Top achievements
Rank 1
Veteran
Answers by
KR
Top achievements
Rank 1
Veteran
Vladimir Stoyanov
Telerik team
Share this question
or