<Window x:Class="CustomFilteringControl.Window1"
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:my="clr-namespace:CustomFilteringControl"
		Title="Window1" Height="700" Width="700">
	<Window.Resources>
		<my:MyViewModel x:Key="MyViewModel"/>
	</Window.Resources>
	<Grid DataContext="{StaticResource MyViewModel}">
		<Grid.Resources>

			<SolidColorBrush x:Key="ControlInnerBorder" Color="White" />
			<telerik:Office_BlackTheme x:Key="Theme" />
			<SolidColorBrush x:Key="GridView_FilteringControlBackground" Color="#FFE4E4E4" />
			<SolidColorBrush x:Key="GridView_FilteringControlOuterBorder" Color="#FF848484" />
			<SolidColorBrush x:Key="ControlForeground" Color="Black" />

			<!-- You can use your own class instead of ours here. -->
			<telerik:FilterOperatorConverter x:Key="FilterOperatorConverter" />
			<telerik:FilterCompositionLogicalOperatorConverter x:Key="FilterCompositionLogicalOperatorConverter" />

			<DataTemplate x:Key="ActionTemplate">
				<TextBlock Text="{Binding Converter={StaticResource FilterOperatorConverter}}" />
			</DataTemplate>

			<DataTemplate x:Key="LogicalOperatorTemplate">
				<TextBlock Text="{Binding Converter={StaticResource FilterCompositionLogicalOperatorConverter}}" />
			</DataTemplate>

			<!--The template below is the default one. You can play with it an modify it to suit your needs.-->
			<ControlTemplate x:Key="FilteringControlTemplate" TargetType="telerik:FilteringControl">
				<Border BorderThickness="{TemplateBinding BorderThickness}" 						
				Margin="{TemplateBinding Margin}" 
				CornerRadius="1" 
				BorderBrush="{TemplateBinding BorderBrush}">
					<Border BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1" Background="{TemplateBinding Background}">
						<StackPanel MinWidth="200" MaxWidth="350" Margin="{TemplateBinding Padding}" 
							VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
							HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
							
							<!-- Delete this below -->
							<TextBlock Background="Red" FontSize="18">Hello, I am customized!</TextBlock>
							
							<StackPanel x:Name="PART_DistinctFilter" Visibility="{TemplateBinding DistinctFiltersVisibility}">
								<CheckBox x:Name="PART_SelectAllCheckBox"
								  IsChecked="{Binding SelectAll, Mode=TwoWay}"
								  Margin="0,2"
								  telerik:LocalizationManager.ResourceKey="GridViewFilterSelectAll"
								  telerik:StyleManager.Theme="{StaticResource Theme}"/>

								<ListBox x:Name="PART_DistinctValuesList"
								 ItemsSource="{Binding DistinctValues}"
								 telerik:StyleManager.Theme="{StaticResource Theme}"
								 ScrollViewer.HorizontalScrollBarVisibility="Auto"
								 MaxHeight="250"
								 SelectionMode="Multiple">

									<ListBox.ItemTemplate>
										<DataTemplate>
											<CheckBox IsChecked="{Binding IsActive, Mode=TwoWay}"
											  Content="{Binding ConvertedValue}"
											  VerticalContentAlignment="Center"
											  telerik:StyleManager.Theme="{StaticResource Theme}"/>
										</DataTemplate>
									</ListBox.ItemTemplate>
									<ListBox.ItemContainerStyle>
										<Style TargetType="ListBoxItem" 
									   
									   
									   BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Office_BlackTheme, ElementType=ListBoxItem}}"
									   
									   >
										</Style>
									</ListBox.ItemContainerStyle>
								</ListBox>
							</StackPanel>
							<StackPanel Margin="0,2">
								<TextBlock telerik:LocalizationManager.ResourceKey="GridViewFilterShowRowsWithValueThat" Margin="0,2,0,0" />
								<telerik:RadComboBox x:Name="PART_Filter1ComboBox"
										   Margin="0,2,0,2"
										   ItemTemplate="{StaticResource ActionTemplate}"
										   telerik:StyleManager.Theme="{StaticResource Theme}"
										   ItemsSource="{Binding AvailableActions}"
										   SelectedItem="{Binding Filter1.Operator, Mode=TwoWay}" />
								<TextBox x:Name="PART_Filter1TextBox"
								 Text="{Binding Filter1.Value, Mode=TwoWay}"
								 VerticalContentAlignment="Center"
								 Margin="0,2" Padding="3,0"
								 telerik:StyleManager.Theme="{StaticResource Theme}"
								 Height="22" />
								<CheckBox x:Name="PART_Filter1MatchCaseCheckBox"
								  IsChecked="{Binding Filter1.IsCaseSensitive, Mode=TwoWay}"
								  Visibility="{Binding MatchCaseVisibility}"
								  Margin="0,2"
								  telerik:LocalizationManager.ResourceKey="GridViewFilterMatchCase"
								  telerik:StyleManager.Theme="{StaticResource Theme}"/>
								<telerik:RadComboBox x:Name="PART_LogicalOperatorsComboBox"
										   Margin="0,2"
										   telerik:StyleManager.Theme="{StaticResource Theme}"
										   ItemTemplate="{StaticResource LogicalOperatorTemplate}"
										   ItemsSource="{Binding LogicalOperators}"
										   SelectedItem="{Binding FieldFilterLogicalOperator, Mode=TwoWay}" />
								<telerik:RadComboBox x:Name="PART_Filter2ComboBox"
										   Margin="0,2"
										   telerik:StyleManager.Theme="{StaticResource Theme}"
										   ItemTemplate="{StaticResource ActionTemplate}"
										   ItemsSource="{Binding AvailableActions}"
										   SelectedItem="{Binding Filter2.Operator, Mode=TwoWay}" />
								<TextBox x:Name="PART_Filter2TextBox"
								 Text="{Binding Filter2.Value, Mode=TwoWay}"
								 VerticalContentAlignment="Center"
								 Margin="0,2" Padding="3,0"
								 telerik:StyleManager.Theme="{StaticResource Theme}"
								 Height="22" />
								<CheckBox x:Name="PART_Filter2MatchCaseCheckBox"
								  IsChecked="{Binding Filter2.IsCaseSensitive, Mode=TwoWay}"
								  Visibility="{Binding MatchCaseVisibility}"
								  Margin="0,2"
								  telerik:LocalizationManager.ResourceKey="GridViewFilterMatchCase"
								  telerik:StyleManager.Theme="{StaticResource Theme}"/>
							</StackPanel>
							<Grid>
								<Grid.ColumnDefinitions>
									<ColumnDefinition />
									<ColumnDefinition />
								</Grid.ColumnDefinitions>
								<Button x:Name="PART_ApplyFilterButton" Grid.Column="0"
								Margin="0,2,2,2" Height="22"
								telerik:LocalizationManager.ResourceKey="GridViewFilter"
								telerik:StyleManager.Theme="{StaticResource Theme}" />
								<Button x:Name="PART_ClearFilterButton" Grid.Column="1"
								Margin="2,2,0,2" Height="22"
								telerik:LocalizationManager.ResourceKey="GridViewClearFilter"
								telerik:StyleManager.Theme="{StaticResource Theme}" />
							</Grid>
						</StackPanel>
					</Border>
				</Border>

			</ControlTemplate>

			<!-- This is the style that sets the control template for the FilteringControl-->
			<Style x:Key="FilteringControlStyle" TargetType="telerik:FilteringControl">
				<Setter Property="Template" Value="{StaticResource FilteringControlTemplate}" />
			</Style>

		</Grid.Resources>
		<telerik:RadGridView Grid.Row="0" 
                             Name="clubsGrid" 
                             ItemsSource="{Binding Clubs}"
                             AutoGenerateColumns="False"
                             Margin="5">
			<telerik:RadGridView.Columns>
				<telerik:GridViewToggleRowDetailsColumn/>

				<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}">

					<!-- Here is how to change the default appearance of the filtering control.-->
					<telerik:GridViewDataColumn.FilteringControl>
						<telerik:FilteringControl Style="{StaticResource FilteringControlStyle}"/>
					</telerik:GridViewDataColumn.FilteringControl>

				</telerik:GridViewDataColumn>

				<telerik:GridViewDataColumn DataMemberBinding="{Binding Established}"
                                            Header="Est." 
                                            DataFormatString="{}{0:yyyy}"/>
				<telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}" 
                                            Header="Stadium" 
                                            DataFormatString="{}{0:N0}"/>
			</telerik:RadGridView.Columns>
		</telerik:RadGridView>
	</Grid>
</Window>