Custom Filter Control UI

[Patrick]

Hello,
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

[Rossen Hristov]

Hello,

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.

Regards,
Rossen Hristov
Telerik

[Patrick]

Hello Rossen,
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
          [e-mail]

  First version:  July 23, 2013
-->


<ResourceDictionary
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:tk="http://schemas.telerik.com/2008/xaml/presentation"
  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
            [e-mail]

   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
            [e-mail]

   First version: July 23, 2013
-->


<os:osRadGridViewFilter
  x:Class="Asloca.Member.MemberAddressFilter"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  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

[Rossen Hristov]

Hello,

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.

Regards,
Rossen Hristov
Telerik