I'm looking to implement a custom filter for one of the columns of a GridView.
As I can see, I need to provide myself all the parts of the filter UI, including background color, border, close button,
In this application, the user can change the UI theme, so it is a nightmare to provide the right colors for the UI of my custom filter.
I think that the style of the filter window is defined somewhere in the styles, but they are not documented. Where can I find them?
A better solution would be that you provide a base class for the custom filter, that provides the border, background and close buttons, that we can use in XAML, so we just have to design the inner part of the filter UI.
Patrick
3 Answers, 1 is accepted
I am afraid that we don't have such a hollow "frame" in which you can insert the core of your filtering control UI. When building a custom filtering control the entire UI is up to you from the ground up. You can of course open the default FilteringControl.xaml with Expression Blend and "steal" its UI. Here is a link.
This topic explains how to extract templates with Blend. You can find the pure XAML for all themes in from the Themes folder of your RadControls for Silverlight installation folder.
I hope this helps.
Rossen Hristov
Telerik
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
here is a control that do what I need correctly.
If you're interested, I can convert the Oxygene code to C# (it's very short) and you can include it in the RadControls.
XAML template:
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<!--
Template for the osRadGridViewFilterFrame control.
For a Silverlight application with Telerik's RadControls.
Author: OrdinaSoft
Patrick Lanz
Lausanne
info@ordinasoft.ch
First version: July 23, 2013
-->
<
ResourceDictionary
xmlns:osctrl
=
"clr-namespace:OrdinaSoft.Windows.Controls"
>
<
Style
TargetType
=
"osctrl:osRadGridViewFilterFrame"
>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"osctrl:osRadGridViewFilterFrame"
>
<
Border
Background
=
"{StaticResource GridView_FilteringControlBackground}"
BorderBrush
=
"{StaticResource GridView_FilteringControlOuterBorder}"
BorderThickness
=
"1"
CornerRadius
=
"1"
Margin
=
"0 2 0 0"
>
<
Border
Background
=
"{StaticResource GridView_FilteringControlBackground}"
BorderBrush
=
"{StaticResource ControlInnerBorder}"
BorderThickness
=
"1"
Padding
=
"5"
>
<
Grid
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"5"
/>
<
RowDefinition
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"5"
/>
<
ColumnDefinition
Width
=
"13"
/>
</
Grid.ColumnDefinitions
>
<
ContentPresenter
Content
=
"{TemplateBinding Header}"
HorizontalAlignment
=
"Left"
VerticalAlignment
=
"Center"
/>
<
tk:RadButton
Name
=
"btn_Close"
Height
=
"13"
HorizontalAlignment
=
"Right"
VerticalAlignment
=
"Top"
Width
=
"13"
Grid.Column
=
"2"
>
<
Path
Data
=
"M4,4L5,4 5,5 4,5z M0,4L1,4 1,5 0,5z M3,3L4,3 4,4 3,4z M1,3L2,3 2,4 1,4z M2,2L3,2 3,3 2,3z M4,0L5,0 5,1 4,1 4,2 3,2 3,0.99999994 4,0.99999994z M0,0L1,0 1,0.99999994 2,0.99999994 2,2 1,2 1,1 0,1z"
Fill
=
"{StaticResource GridView_IndicatorPrimaryColor}"
HorizontalAlignment
=
"Center"
Height
=
"6"
VerticalAlignment
=
"Center"
Width
=
"6"
/>
</
tk:RadButton
>
<
ContentPresenter
Grid.Row
=
"2"
Grid.ColumnSpan
=
"3"
/>
</
Grid
>
</
Border
>
</
Border
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
</
ResourceDictionary
>
Oxygene source code:
Namespace OrdinaSoft
.
Windows
.
Controls;
(* Frame to put outside a filter for a RadGridView.
For a Silverlight application with Telerik's RadControls.
Author: OrdinaSoft
Patrick Lanz
Lausanne
info@ordinasoft.ch
First version: July 23, 2013
*)
Interface
Uses
System
.
Windows,
System
.
Windows
.
Controls,
System
.
Windows
.
Controls
.
Primitives,
Telerik
.
Windows
.
Controls;
(*---------------------------------------------------------------------------------------------*)
Type
/// <summary>
/// Frame to put outside a filter for a <b>RadGridView</b>.
/// </summary>
/// <remarks>
/// The frame defines the border, background and close button. It uses the colors of the
/// current Telerik theme.
/// </remarks>
[TemplatePart (Name :=
'btn_Close'
, &Type := TypeOf (ButtonBase))]
osRadGridViewFilterFrame = Public Class (
HeaderedContentControl
)
Private
{-- Method --}
/// <summary>
/// Event handler called when the user wants to close the filter.
/// </summary>
/// <param name="Sender">Sender of the event.</param>
/// <param name="Args">Arguments for the event.</param>
Method DoClose (Sender : Object; Args : EventArgs);
Public
{-- Constructor --}
/// <summary>
/// Initializes an instance of the control.
/// </summary>
Constructor;
{-- Method --}
/// <summary>
/// Called when the template is applied to the control.
/// </summary>
Method OnApplyTemplate; Override;
End;
(*---------------------------------------------------------------------------------------------*)
Implementation
(*---------------------------------------------------------------------------------------------*)
(* Constructor. *)
// <summary>
// Initializes an instance of the control.
// </summary>
Constructor osRadGridViewFilterFrame;
Begin
DefaultStyleKey := TypeOf (osRadGridViewFilterFrame)
End;
(*---------------------------------------------------------------------------------------------*)
(* Template. *)
// <summary>
// Called when the template is applied to the control.
// </summary>
Method osRadGridViewFilterFrame
.
OnApplyTemplate;
Begin
With Matching Button := ButtonBase (GetTemplateChild (
'btn_Close'
)) Do
Button
.
Click += DoClose;
Inherited OnApplyTemplate
End;
(*---------------------------------------------------------------------------------------------*)
(* Closing the filter. *)
// <summary>
// Event handler called when the user wants to close the filter.
// </summary>
// <param name="Sender">Sender of the event.</param>
// <param name="Args">Arguments for the event.</param>
Method osRadGridViewFilterFrame
.
DoClose (
Sender : Object;
Args : EventArgs
);
Begin
Var Parent := ParentOfType <Popup>;
Parent:IsOpen := False
End;
(*---------------------------------------------------------------------------------------------*)
End.
Exemple of use (with french text):
<!--
Filter for the address of a member.
For the ASLOCA project.
Author: OrdinaSoft
Patrick Lanz
Lausanne
info@ordinasoft.ch
First version: July 23, 2013
-->
<
os:osRadGridViewFilter
x:Class
=
"Asloca.Member.MemberAddressFilter"
xmlns:os
=
"http://schemas.ordinasoft.ch/client/2008"
>
<
os:osRadGridViewFilterFrame
Header
=
"Adresses"
>
<
Grid
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"5"
/>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"5"
/>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"10"
/>
<
RowDefinition
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"5"
MaxWidth
=
"5"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
/>
</
Grid.ColumnDefinitions
>
<
TextBlock
Style
=
"{StaticResource Label}"
Text
=
"Rue:"
/>
<
TextBox
Name
=
"txt_Address"
Grid.Column
=
"2"
Grid.ColumnSpan
=
"2"
/>
<
TextBlock
Style
=
"{StaticResource Label}"
Text
=
"Numéro:"
Grid.Row
=
"2"
/>
<
StackPanel
Orientation
=
"Horizontal"
Grid.Row
=
"2"
Grid.Column
=
"2"
>
<
TextBlock
Style
=
"{StaticResource Label}"
Text
=
"du:"
/>
<
TextBox
Name
=
"txt_FirstNo"
Margin
=
"5 0"
Width
=
"30"
/>
<
TextBlock
Style
=
"{StaticResource Label}"
Text
=
"au:"
/>
<
TextBox
Name
=
"txt_LastNo"
Margin
=
"5 0 0 0"
Width
=
"30"
/>
</
StackPanel
>
<
CheckBox
Name
=
"chk_AlsoOld"
Content
=
"Rechercher dans les anciennes adresses"
Grid.Row
=
"4"
Grid.ColumnSpan
=
"4"
/>
<
Grid
Grid.Row
=
"6"
Grid.ColumnSpan
=
"4"
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
/>
<
ColumnDefinition
Width
=
"5"
/>
<
ColumnDefinition
/>
</
Grid.ColumnDefinitions
>
<
Button
Content
=
"Filtrer"
Click
=
"DoFilter"
/>
<
Button
Content
=
"Annuler le filtre"
Click
=
"DoClearFilter"
Grid.Column
=
"2"
/>
</
Grid
>
</
Grid
>
</
os:osRadGridViewFilterFrame
>
</
os:osRadGridViewFilter
>
Patrick
Thank you for posting your control to the public forum. We appreciate this. While I doubt that we will actually check this in the main source control of RadControls, it will be available here on this public forum forever, so we might direct future customers to use your implementation.
Once again, I would like to thank you.
Rossen Hristov
Telerik
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>