Right side of filter is cropping

[Manoj]

I am using datafilter as per following xaml. When I add some long filter it crops from right side as shown in attached pic.
Please assist.

<

 

 

brite:BritePage xmlns:bhhcbrite="clr-namespace:BriteClient.Views"

 

 

 

x:Class="BriteClient.Views.Tracking.AuditTracking"

 

 

 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 

 

 

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 

 

 

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

 

 

 

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

 

 

 

mc:Ignorable="d"

 

 

 

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

 

 

 

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

 

 

 

xmlns:vm="clr-namespace:BriteClient.ViewModels"

 

 

 

xmlns:s="clr-namespace:BriteClient.Web.Services"

 

 

 

xmlns:c="clr-namespace:BriteClient.Controls"

 

 

 

xmlns:con="clr-namespace:BriteClient.Helpers.Converters"

 

 

 

xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

 

 

 

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

 

 

 

d:DesignWidth="640" d:DesignHeight="480"

 

 

 

Title="AuditAssignment Page"

 

 

 

Style="{StaticResource PageStyle}">

 

 

 

 

<brite:BHHCBritePage.Resources>

 

 

 

 

<vm:AuditTrackingViewModel x:Key="AuditTrackingViewMode" d:IsDataSouce="True" />

 

 

 

 

</brite:BritePage.Resources>

 

 

 

 

<brite:BritePage.DataContext>

 

 

 

 

<Binding Source="{StaticResource AuditTrackingViewMode}" />

 

 

 

 

</brite:BHHCBritePage.DataContext>

 

 

 

 

<Grid x:Name="LayoutRoot">

 

 

 

 

<ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">

 

 

 

 

<StackPanel x:Name="ContentStackPanel" Style="{StaticResource ContentStackPanelStyle}">

 

 

 

 

<Border x:Name="borderBlue" BorderBrush="Black">

 

 

 

 

<Grid>

 

 

 

 

<Grid.Resources>

 

 

 

 

<con:InverseBooleanConverter x:Key="InverseBooleanConverter"/>

 

 

 

 

<!--EditorTemplate for the Name property.-->

 

 

 

 

<DataTemplate x:Key="NameFilterEditorTemplate">

 

 

 

 

<telerik:RadComboBox SelectedValue="{Binding Value, Mode=TwoWay, FallbackValue=null}"

 

 

 

MinWidth="100"/>

 

 

 

 

</DataTemplate>

 

 

 

 

<!--EditorTemplate for the Quantity property.-->

 

 

 

 

<DataTemplate x:Key="SliderFilterEditorTemplate">

 

 

 

 

<telerik:RadSlider Value="{Binding Value, Mode=TwoWay, FallbackValue=0}"

 

 

 

Width="100"

 

 

 

TickPlacement="BottomRight"/>

 

 

 

 

</DataTemplate>

 

 

 

 

<!--EditorTemplate for the Discontinued property.-->

 

 

 

 

<DataTemplate x:Key="DiscontinuedEditorTemplate">

 

 

 

 

<StackPanel Orientation="Horizontal">

 

 

 

 

<telerik:RadToggleButton IsChecked="{Binding Value, Mode=TwoWay, FallbackValue=False}"

 

 

 

Content="Yes"

 

 

 

VerticalAlignment="Center"

 

 

 

Margin="2,1"

 

 

 

/>

 

 

 

 

<telerik:RadToggleButton IsChecked="{Binding Value, Mode=TwoWay, FallbackValue=False, Converter={StaticResource InverseBooleanConverter}}"

 

 

 

Content="No"

 

 

 

VerticalAlignment="Center"

 

 

 

Margin="2,1"

 

 

 

/>

 

 

 

 

</StackPanel>

 

 

 

 

</DataTemplate>

 

 

 

 

<c:CustomRedEditorTemplateSelector x:Key="redEditorTemplateSelector">

 

 

 

 

<c:CustomRedEditorTemplateSelector.EditorTemplateRulesProp>

 

 

 

 

<c:EditorTemplateRule PropertyName="Name"

 

 

 

DataTemplate="{StaticResource NameFilterEditorTemplate}"/>

 

 

 

 

<c:EditorTemplateRule PropertyName="ClassCodesCount"

 

 

 

DataTemplate="{StaticResource SliderFilterEditorTemplate}"/>

 

 

 

 

<c:EditorTemplateRule PropertyName="Discontinued"

 

 

 

DataTemplate="{StaticResource DiscontinuedEditorTemplate}"/>

 

 

 

 

</c:CustomRedEditorTemplateSelector.EditorTemplateRulesProp>

 

 

 

 

</c:CustomRedEditorTemplateSelector>

 

 

 

 

</Grid.Resources>

 

 

 

 

<Grid.RowDefinitions>

 

 

 

 

<RowDefinition Height="50"></RowDefinition>

 

 

 

 

<RowDefinition Height="Auto"></RowDefinition>

 

 

 

 

<RowDefinition Height="Auto"></RowDefinition>

 

 

 

 

<RowDefinition Height="Auto"></RowDefinition>

 

 

 

 

<RowDefinition Height="*"></RowDefinition>

 

 

 

 

</Grid.RowDefinitions>

 

 

 

 

<Grid.ColumnDefinitions>

 

 

 

 

<ColumnDefinition Width="100"></ColumnDefinition>

 

 

 

 

<ColumnDefinition Width="100"></ColumnDefinition>

 

 

 

 

<ColumnDefinition Width="*"></ColumnDefinition>

 

 

 

 

<ColumnDefinition Width="100"></ColumnDefinition>

 

 

 

 

<ColumnDefinition Width="200"></ColumnDefinition>

 

 

 

 

</Grid.ColumnDefinitions>

 

 

 

 

<TextBlock x:Name="HeaderText" Grid.Column="0" Grid.ColumnSpan="4" Style="{StaticResource HeaderTextStyle}"

 

 

 

Text="{Binding Path=Strings.AuditAssignment, Source={StaticResource ApplicationResources}}"/>

 

 

 

 

<Border Grid.Row="1" Grid.ColumnSpan="4" CornerRadius="20" x:Name="brdTest" BorderBrush="Black" BorderThickness="2">

 

 

 

 

<StackPanel x:Name="stkFilterPanel" Background="Transparent" Orientation="Horizontal">

 

 

 

 

<!--Filter-->

 

 

 

 

<telerik:RadDataFilter Name="radDataFilter"

 

 

 

MinHeight="193" MaxHeight="250" MinWidth="600" Width="640"

 

 

 

EditorTemplateSelector="{StaticResource redEditorTemplateSelector}"

 

 

 

Margin="1">

 

 

 

 

</telerik:RadDataFilter>

 

 

 

 

<!--Source="{Binding Items, ElementName=radGridView}"-->

 

 

 

 

<StackPanel x:Name="stkColumnPanel" Background="Transparent" Orientation="Vertical" Margin="2">

 

 

 

 

<TextBlock Text="Select desired grid columns:" FontWeight="Bold"></TextBlock>

 

 

 

 

<ListBox ItemsSource="{Binding Columns, ElementName=radGridView}" Width="200" MinHeight="193" MaxHeight="250" BorderThickness="0">

 

 

 

 

<ListBox.ItemTemplate>

 

 

 

 

<DataTemplate>

 

 

 

 

<CheckBox Content="{Binding Header}" IsChecked="{Binding IsVisible, Mode=TwoWay}" />

 

 

 

 

</DataTemplate>

 

 

 

 

</ListBox.ItemTemplate>

 

 

 

 

</ListBox>

 

 

 

 

</StackPanel>

 

 

 

 

</StackPanel>

 

 

 

 

</Border>

 

 

 

 

<StackPanel x:Name="stkSaveLoadPanel" Grid.Row="1" Grid.Column="4" Background="Transparent" Orientation="Horizontal">

 

 

 

 

<StackPanel x:Name="stkSavedFilterPanel" Background="Transparent" Orientation="Vertical" Margin="2">

 

 

 

 

<TextBlock Text="Saved filters:" FontWeight="Bold"></TextBlock>

 

 

 

 

<ListBox ItemsSource="{Binding Columns, ElementName=radGridView}" Width="100" MinHeight="193" MaxHeight="250" Margin="5">

 

 

 

 

<ListBox.ItemTemplate>

 

 

 

 

<DataTemplate>

 

 

 

 

<TextBlock Text="Filter 1"></TextBlock>

 

 

 

 

</DataTemplate>

 

 

 

 

</ListBox.ItemTemplate>

 

 

 

 

</ListBox>

 

 

 

 

</StackPanel>

 

 

 

 

<StackPanel x:Name="stkButtonsPanel" Background="Transparent" Orientation="Vertical" Margin="5">

 

 

 

 

<Button x:Name="btnLoadFilter" Width="70" Height="30" Content="Apply Filter" Command="{Binding Path=ApplyFilterCommand}" Margin="5"></Button>

 

 

 

 

<Button x:Name="btnSaveFilter" Width="70" Height="30" Content="Save Filter" Command="{Binding Path=SaveCommand}" Margin="5"></Button>

 

 

 

 

</StackPanel>

 

 

 

 

</StackPanel>

 

　

 

 

 

<Border Grid.Row="2" Grid.ColumnSpan="5" CornerRadius="20" x:Name="brdGrid" BorderBrush="Black" BorderThickness="2">

 

 

 

 

<StackPanel x:Name="stkGridPanel" Background="Transparent" Orientation="Vertical" Margin="5">

 

 

 

 

<telerik:RadDomainDataSource x:Name="domainDataSource1" AutoLoad="True"

 

 

 

QueryName="GetAuditAssignments"

 

 

 

PageSize="15">

 

 

 

 

<telerik:RadDomainDataSource.DomainContext>

 

 

 

 

<s:BriteDomainContext />

 

 

 

 

</telerik:RadDomainDataSource.DomainContext>

 

 

 

 

</telerik:RadDomainDataSource>

 

 

 

 

 

<!--Red Grid-->

 

 

 

 

<telerik:RadGridView MinHeight="193" MaxHeight="250" x:Name="radGridView" AutoGenerateColumns="False" ItemsSource="{Binding DataView, ElementName=domainDataSource1}"

 

 

 

IsBusy="{Binding IsBusy, ElementName=domainDataSource1}" CanUserFreezeColumns="True" SelectionMode="Multiple">

 

 

 

 

<telerik:RadGridView.Columns>

 

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding CustomerID}"

 

 

 

Header="Policy Number" UniqueName="Policy Number" IsGroupable="True"/>

 

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding AssignmentStartDate}"

 

 

 

Header="Assignment StartDate" DataFormatString="{}{0:d}" UniqueName="AssignmentStartDate" IsGroupable="False" />

 

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding AssignmentEndDate}"

 

 

 

Header="Assignment EndDate" UniqueName="AssignmentEndDate" IsGroupable="False" />

 

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding ClassCodesCount}"

 

 

 

Header="Class Codes Count" UniqueName="ClassCodesCount" IsGroupable="False" />

 

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding MaxExMod}"

 

 

 

Header="Max ExMod" UniqueName="MaxExMod" IsGroupable="False" IsFilterable="False" IsVisible="False" />

 

 

 

 

</telerik:RadGridView.Columns>

 

 

 

 

</telerik:RadGridView>

 

 

 

 

<telerik:RadDataPager Grid.Row="3" Grid.ColumnSpan="5"

 

 

 

x:Name="radDataPager1"

 

 

 

PageSize="12"

 

 

 

Source="{Binding Items, ElementName=radGridView}"

 

 

 

DisplayMode="All"

 

 

 

AutoEllipsisMode="Both"

 

 

 

NumericButtonCount="10"

 

 

 

IsTotalItemCountFixed="True"/>

 

 

 

 

<TextBox x:Name="debugTextBox" IsEnabled="True" Visibility="Collapsed"/>

 

 

 

 

<Grid>

 

 

 

 

<Grid.RowDefinitions>

 

 

 

 

<RowDefinition Height="Auto"></RowDefinition>

 

 

 

 

<RowDefinition Height="*"></RowDefinition>

 

 

 

 

</Grid.RowDefinitions>

 

 

 

 

<Grid.ColumnDefinitions>

 

 

 

 

<ColumnDefinition Width="100"></ColumnDefinition>

 

 

 

 

<ColumnDefinition Width="100"></ColumnDefinition>

 

 

 

 

<ColumnDefinition Width="100"></ColumnDefinition>

 

 

 

 

<ColumnDefinition Width="*"></ColumnDefinition>

 

 

 

 

</Grid.ColumnDefinitions>

 

 

 

 

<StackPanel Grid.Column="0" x:Name="stkAuditTypePanel" Background="Transparent" Orientation="Vertical" Margin="5">

 

 

 

 

<TextBox x:Name="txtAuditType" IsEnabled="True" Text="Audit Type"/>

 

 

 

 

<ComboBox x:Name="cbAuditType"/>

 

 

 

 

</StackPanel>

 

 

 

 

<StackPanel Grid.Column="1" x:Name="stkAuditPeriodPanel" Background="Transparent" Orientation="Vertical" Margin="5">

 

 

 

 

<TextBox x:Name="txtAuditPeriod" IsEnabled="True" Text="Audit Period"/>

 

 

 

 

<ComboBox x:Name="cbAuditPeriod"/>

 

 

 

 

</StackPanel>

 

 

 

 

<StackPanel Grid.Column="2" x:Name="stkAuditorPanel" Background="Transparent" Orientation="Vertical" Margin="5">

 

 

 

 

<TextBox x:Name="txtAuditor" IsEnabled="True" Text="Auditor"/>

 

 

 

 

<ComboBox x:Name="cbAuditor"/>

 

 

 

 

</StackPanel>

 

 

 

 

<StackPanel Grid.Column="3" x:Name="stkApplyToSelectedPanel" Background="Transparent" Orientation="Vertical" Margin="5">

 

 

 

 

<Button x:Name="btnToSelected" Width="70" Height="30" Content="Apply" Command="{Binding Path=ApplyFilterCommand}" Margin="5"></Button>

 

 

 

 

<!--<Button x:Name="btnSaveFilter" Width="70" Height="30" Content="Save Filter" Command="{Binding Path=SaveCommand}" Margin="5"></Button>-->

 

 

 

 

</StackPanel>

 

 

 

 

</Grid>

 

 

 

 

</StackPanel>

 

 

 

 

</Border>

 

 

 

 

</Grid>

 

 

 

 

</Border>

 

 

 

 

</StackPanel>

 

 

 

 

</ScrollViewer>

 

 

 

 

</Grid>

 

</

 

 

brite:BritePage>

 

[Maya]

Hi Manoj,

As I can see you define Width property for the RadDataFilter. Consequently, once it needs to gets larger, it will be cropped since there is not left space for it. You may try remove setting of the Width and define it inside a ScrollViewer for example. Thus once the filter gets larger than the available area, a scroll bar will be displayed and you will be able to scroll till the end.
 

Kind regards,
Maya
the Telerik team

[Manoj]

This is happening at my system only. Other computer it is working fine. If I minimize and maximize my browser IE8 it corrects UI. Seems some filter painting issue. I have removed width also.  

[Marcin Grabowski]

Hi.
I have this same problem. Some of my property display name are long. If i add filter and change property to this that have a long description, filter descriptor are cuted on right site. But i i only add new filer, previous filter are displayed properly.

<Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition />
                    </Grid.RowDefinitions>

                    <StackPanel Grid.Column="0" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Left" Orientation="Horizontal" Margin="20,2,2,2">
                        <TextBox Width="200" x:Name="textBoxSearchText" Text="{Binding SearchedText, Mode=TwoWay}" ></TextBox>
                        <Button Content="{Binding Converter={StaticResource ApplicationResources}, ConverterParameter=SysTell_CallCenter_UI_AgentProfile_Controls_IncomingCallControl_buttonSearch}"
                            Width="100" x:Name="buttonSearch" Click="buttonSearch_Click" ></Button>
                    </StackPanel>

                    <telerik:RadDataFilter x:Name="radFilter" AutoGenerateItemPropertyDefinitions="False"
                                        CanUserCreateCompositeFilters="False" FilterOperatorsLoading="radFilter_FilterOperatorsLoading"
                                        Margin="0,2,2,2" Grid.Row="1" Grid.Column="0"
                                        />
                </Grid>

I attached example screenshots.
Do you have any method to correct this behaviour?

[Maya]

Hi Marcin,

Will it be possible to share a bit more details about the version you are using ?
Generally, there used to be such an issue, but it has already been fixed in our current official release. 
In case you are working with previous version, you can modify the template of RadDataFilter and to remove the opacity mask of the outer border:

<ControlTemplate x:Key="FilterControlTemplate" TargetType="dataFilter:FilterControl">
    <Border x:Name="OuterBorder"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        CornerRadius="11">
      <Border.OpacityMask>
        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
          <GradientStop Color="Black" Offset="0"/>
          <GradientStop Offset="0.3"/>
        </LinearGradientBrush>
      </Border.OpacityMask>
...................

Regards,
Maya
the Telerik team

[Marcin Grabowski]

Hi.
Currently we use v2011.3.1116. I cant upgrade now to Q1 2012. I will try modify the template.

Thank you

[Maya]

Hi Marcin,

Let me know how it goes and in case you need assistance.  

Greetings,
Maya
the Telerik team

[Marcin Grabowski]

Hi. I made modification to the template (remove opacity mask on outer border), but nothing change. Can you look at code?

<UserControl.Resources>
    <resources:ApplicationResources x:Key="ApplicationResources" />
    <Converters:ShowRecordSearchRecordsVisibilityConverter x:Key="showRecordSearchRecordsVisibilityConverter"/>
    <ControlConverters:DateTimeConverter x:Key="dateTimeConverter"/>
    <DataTemplate x:Key="GridColumnShowTemplate">
        <HyperlinkButton VerticalAlignment="Center" HorizontalAlignment="Center"  Content="Pokaż"
                         Click="Button_Click"
                         Visibility="{Binding RecordToCampaignROWGUID, Converter={StaticResource showRecordSearchRecordsVisibilityConverter}}"/>
    </DataTemplate>
    <DataTemplate x:Key="GridColumnLastUseTemplate">
        <TextBlock Text="{Binding LastUse, Converter={StaticResource dateTimeConverter}}" HorizontalAlignment="Center"/>
    </DataTemplate>
    <telerik:Office_BlackTheme x:Key="Theme2"/>
    <Style x:Key="ContentControlStyle1" TargetType="ContentControl">
        <Setter Property="Foreground" Value="#FF000000"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    <ContentPresenter Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <ControlTemplate x:Key="DataFilterPresenterTemplate" TargetType="Telerik_Windows_Controls_Data_DataFilter:DataFilterPresenter">
        <Border Padding="20, 2, 0, 2">
            <Grid x:Name="Root">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" IsTabStop="False" Grid.Row="0" Style="{StaticResource ContentControlStyle1}"/>
                <ItemsPresenter x:Name="Items" Grid.Row="1"/>
            </Grid>
        </Border>
    </ControlTemplate>
    <telerik:Office_BlackTheme x:Key="Theme3"/>
    <telerik:HierarchicalDataTemplate x:Key="DataFilterPresenterItemTemplate" ItemsSource="{Binding CompositeFilter.Filters}">
        <Telerik_Windows_Controls_Data_DataFilter:FilterControl telerik:StyleManager.Theme="{StaticResource Theme3}"/>
    </telerik:HierarchicalDataTemplate>
    <SolidColorBrush x:Key="FilterControl_InnerBorder" Color="White"/>
    <LinearGradientBrush x:Key="RemoveFilterButton_Background_Over" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFDE4646" Offset="1"/>
        <GradientStop Color="#FFFF8B6A"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="RemoveFilterButton_Background_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF943434"/>
        <GradientStop Color="#FFFF3800" Offset="1"/>
    </LinearGradientBrush>
    <ControlTemplate x:Key="RemoveFilterButtonTemplate" TargetType="telerik:RadButton">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0:0:0.2"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <DoubleAnimation To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Over"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <Storyboard>
                            <DoubleAnimation To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Pressed"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Disabled"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Focused"/>
                    <VisualState x:Name="Unfocused"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border x:Name="ButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="8"/>
            <Border x:Name="ButtonBorder_Over" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource RemoveFilterButton_Background_Over}" CornerRadius="8" Opacity="0"/>
            <Border x:Name="ButtonBorder_Pressed" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource RemoveFilterButton_Background_Pressed}" CornerRadius="8" Opacity="0"/>
            <Path Data="M4.0551758,5.1411133 L4.9467773,5.1411133 L4.9467773,8.0683594 L7.8740234,8.0683594 L7.8740234,8.9277344 L4.9467773,8.9277344 L4.9467773,11.85498 L4.0551758,11.85498 L4.0551758,8.9277344 L1.1279297,8.9277344 L1.1279297,8.0683594 L4.0551758,8.0683594 z" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Height="8" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Stroke="{TemplateBinding Foreground}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="8">
                <Path.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="-45"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Path.RenderTransform>
            </Path>
        </Grid>
    </ControlTemplate>
    <LinearGradientBrush x:Key="RemoveFilterButton_Background" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF943434" Offset="1"/>
        <GradientStop Color="#FFFF3800"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="RemoveFilterButton_Border" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF83A5D2" Offset="0"/>
        <GradientStop Color="#FFE7F1FF" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="RemoveFilterButton_Foreground" Color="White"/>
    <Style x:Key="RemoveFilterButtonStyle" TargetType="telerik:RadButton">
        <Setter Property="Template" Value="{StaticResource RemoveFilterButtonTemplate}"/>
        <Setter Property="Background" Value="{StaticResource RemoveFilterButton_Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource RemoveFilterButton_Border}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Width" Value="16"/>
        <Setter Property="Height" Value="16"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Foreground" Value="{StaticResource RemoveFilterButton_Foreground}"/>
        <Setter Property="Margin" Value="1,0,4,0"/>
    </Style>
    <telerik:FilterCompositionLogicalOperatorConverter x:Key="LogicalOperatorConverter"/>
    <Telerik_Windows_Controls_Data_DataFilter:LogicalOperatorToCheckedConverter x:Key="LogicalOperatorToCheckedConverter"/>
    <telerik:Office_BlackTheme x:Key="Theme4"/>
    <SolidColorBrush x:Key="AddFilterButton_Foreground" Color="White"/>
    <LinearGradientBrush x:Key="AddFilterButton_Background_Over" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF5AB13C" Offset="1"/>
        <GradientStop Color="#FFB1FF72"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="AddFilterButton_Background_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF4D9434"/>
        <GradientStop Color="#FF71FF00" Offset="1"/>
    </LinearGradientBrush>
    <ControlTemplate x:Key="AddFilterButtonTemplate" TargetType="telerik:RadButton">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0:0:0.2"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <DoubleAnimation To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Over"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <Storyboard>
                            <DoubleAnimation To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Pressed"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Disabled"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Focused"/>
                    <VisualState x:Name="Unfocused"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border x:Name="ButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="8"/>
            <Border x:Name="ButtonBorder_Over" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource AddFilterButton_Background_Over}" CornerRadius="8" Opacity="0"/>
            <Border x:Name="ButtonBorder_Pressed" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource AddFilterButton_Background_Pressed}" CornerRadius="8" Opacity="0"/>
            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </ControlTemplate>
    <LinearGradientBrush x:Key="AddFilterButton_Background" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF4D9434" Offset="1"/>
        <GradientStop Color="#FF71FF00"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="AddFilterButton_Border" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF83A5D2" Offset="0"/>
        <GradientStop Color="#FFE7F1FF" Offset="1"/>
    </LinearGradientBrush>
    <Style x:Key="AddFilterButtonStyle" TargetType="telerik:RadButton">
        <Setter Property="Template" Value="{StaticResource AddFilterButtonTemplate}"/>
        <Setter Property="Background" Value="{StaticResource AddFilterButton_Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource AddFilterButton_Border}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Width" Value="16"/>
        <Setter Property="Height" Value="16"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Foreground" Value="{StaticResource AddFilterButton_Foreground}"/>
        <Setter Property="Margin" Value="4,0,1,0"/>
    </Style>
    <telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    <telerik:FilterOperatorConverter x:Key="FilterOperatorConverter"/>
    <DataTemplate x:Key="FilterOperatorTemplate">
        <TextBlock Text="{Binding Converter={StaticResource FilterOperatorConverter}}"/>
    </DataTemplate>
    <Telerik_Windows_Controls_Data_DataFilter:FilterMemberToEnabledConverter x:Key="FilterMemberToEnabledConverter"/>
    <Telerik_Windows_Controls_Data_DataFilter:FilterOperatorToSelectedItemConverter x:Key="FilterOperatorToSelectedItemConverter"/>
    <telerik:InvertedBooleanToVisibilityConverter x:Key="InvertedBooleanToVisibilityConverter"/>
    <ControlTemplate x:Key="FilterControlTemplate" TargetType="Telerik_Windows_Controls_Data_DataFilter:FilterControl">
        <Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="11">
            <Border x:Name="InnerBorder" BorderBrush="{StaticResource FilterControl_InnerBorder}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="10">
                <StackPanel Orientation="Horizontal">
                    <telerik:RadButton x:Name="PART_RemoveFilterButton" Command="{Binding RemoveFilter}" Style="{StaticResource RemoveFilterButtonStyle}"/>
                    <StackPanel Orientation="Horizontal" Visibility="{Binding IsComposite, Converter={StaticResource BooleanToVisibilityConverter}}">
                        <telerik:RadToggleButton x:Name="PART_CompositeFilterLogicalOperatorToggleButton" Content="{Binding CompositeFilter.LogicalOperator, Converter={StaticResource LogicalOperatorConverter}}" FontSize="10" Height="18" IsChecked="{Binding CompositeFilter.LogicalOperator, Converter={StaticResource LogicalOperatorToCheckedConverter}, Mode=TwoWay}" MinWidth="30" telerik:StyleManager.Theme="{StaticResource Theme4}"/>
                        <telerik:RadButton x:Name="PART_AddFilterButton" Command="{Binding AddFilter}" Style="{StaticResource AddFilterButtonStyle}">
                            <Path Data="M4.0551758,5.1411133 L4.9467773,5.1411133 L4.9467773,8.0683594 L7.8740234,8.0683594 L7.8740234,8.9277344 L4.9467773,8.9277344 L4.9467773,11.85498 L4.0551758,11.85498 L4.0551758,8.9277344 L1.1279297,8.9277344 L1.1279297,8.0683594 L4.0551758,8.0683594 z" Height="8" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Stroke="{StaticResource AddFilterButton_Foreground}" Width="8">
                                <Path.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Path.RenderTransform>
                            </Path>
                        </telerik:RadButton>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Visibility="{Binding IsComposite, Converter={StaticResource InvertedBooleanToVisibilityConverter}}">
                        <telerik:RadComboBox x:Name="PART_SimpleFilterMemberComboBox" ItemsSource="{Binding SimpleFilter.AvailableMembers}" Margin="0,0,3,0" MinWidth="100" SelectedItem="{Binding SimpleFilter.SelectedMember, Mode=TwoWay}" telerik:StyleManager.Theme="{StaticResource Theme4}" VerticalAlignment="Center"/>
                        <telerik:RadComboBox x:Name="PART_SimpleFilterOperatorComboBox" ItemTemplate="{StaticResource FilterOperatorTemplate}" ItemsSource="{Binding SimpleFilter.AvailableOperators}" IsEnabled="{Binding SimpleFilter.Member, Converter={StaticResource FilterMemberToEnabledConverter}}" Margin="0,0,3,0" MinWidth="100" SelectedItem="{Binding SimpleFilter.Operator, Converter={StaticResource FilterOperatorToSelectedItemConverter}, Mode=TwoWay}" telerik:StyleManager.Theme="{StaticResource Theme4}" VerticalAlignment="Center"/>
                        <Telerik_Windows_Controls_Data_DataFilter:FilterEditor DataContext="{Binding SimpleFilter}" FilterOperator="{Binding Operator}" HorizontalContentAlignment="Stretch" ItemPropertyDefinition="{Binding SelectedMember}" IsEnabled="{Binding Member, Converter={StaticResource FilterMemberToEnabledConverter}}" VerticalContentAlignment="Stretch"/>
                        <Border BorderBrush="Transparent" Visibility="{Binding CanUserCreateCompositeFilters, Converter={StaticResource InvertedBooleanToVisibilityConverter}}" Width="8"/>
                        <telerik:RadButton x:Name="PART_ToCompositeFilterButton" Command="{Binding ToCompositeFilter}" Style="{StaticResource AddFilterButtonStyle}" Visibility="{Binding CanUserCreateCompositeFilters, Converter={StaticResource BooleanToVisibilityConverter}}">
                            <Path Data="M2.0597237,0.00011700392 C2.3919959,0.0037145019 2.7279578,0.090300739 3.0362324,0.26828307 3.9928176,0.82056788 4.3205678,2.0437487 3.7682831,3.0003339 3.5047298,3.4568219 3.0883964,3.7701081 2.6211619,3.9128945 2.5376498,3.9384158 2.606295,8.1556374 2.6448601,8.1688096 2.7661251,8.2102287 2.8851618,8.2639664 3.0003339,8.3304611 3.119907,8.3994967 3.2296547,8.479015 3.3290861,8.567185 L3.3953214,8.6289421 7.0353448,6.5273734 7.032584,6.5179721 C6.9001091,6.0235683 6.9562423,5.4786268 7.2323849,5.0003339 7.5948217,4.3725749 8.2461894,4.0156323 8.921531,4.0005015 8.9436405,4.0000061 8.9657753,3.9998771 8.9879267,4.0001169 9.3201993,4.0037147 9.6561611,4.0903007 9.9644353,4.2682832 10.921021,4.8205677 11.248771,6.0437485 10.696486,7.0003339 10.144202,7.9569193 8.9210207,8.2846695 7.9644353,7.7323848 7.7908325,7.6321552 7.6379409,7.5098292 7.5072617,7.3710103 7.457924,7.3185995 3.8905699,9.3987923 3.9225863,9.510286 4.0671648,10.013763 4.0149822,10.573039 3.7323847,11.062512 3.1801,12.019097 1.9569192,12.346847 1.0003339,11.794563 0.043748736,11.242278 -0.28400159,10.019097 0.26828313,9.062512 0.56168437,8.5543262 1.0444304,8.2236139 1.5759602,8.108039 L1.6210667,8.099353 1.6210667,3.9568464 1.5962493,3.9518846 C1.4043243,3.9085528 1.2155921,3.8359381 1.0362324,3.7323848 0.079647064,3.1801001 -0.24810326,1.9569192 0.30418158,1.0003339 0.66661841,0.37257487 1.3179861,0.015632391 1.9933276,0.00050151348 2.0154371,6.1988831E-06 2.0375722,-0.00012278557 2.0597237,0.00011700392 z" Fill="{StaticResource AddFilterButton_Foreground}" Margin="4.764,3.911,0.231,0.182" RenderTransformOrigin="0.178532408309272,0.500013572224711" Stretch="Fill">
                                <Path.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="1" ScaleX="-1"/>
                                        <SkewTransform AngleY="0" AngleX="0"/>
                                        <RotateTransform Angle="120"/>
                                        <TranslateTransform X="1.7763568394002505E-15"/>
                                    </TransformGroup>
                                </Path.RenderTransform>
                            </Path>
                        </telerik:RadButton>
                    </StackPanel>
                </StackPanel>
            </Border>
        </Border>
    </ControlTemplate>
    <LinearGradientBrush x:Key="FilterControl_Background" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="White" Offset="0"/>
        <GradientStop Color="#FFCDCDCD" Offset="1"/>
        <GradientStop Color="#FFCECECE" Offset="0.42"/>
        <GradientStop Color="#FFAFAFAF" Offset="0.43"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="FilterControl_Border" Color="#FF5F5F5F"/>
    <SolidColorBrush x:Key="FilterControl_Foreground" Color="Black"/>
    <Style x:Key="FilterControlStyle1" TargetType="Telerik_Windows_Controls_Data_DataFilter:FilterControl">
        <Setter Property="Template" Value="{StaticResource FilterControlTemplate}"/>
        <Setter Property="Background" Value="{StaticResource FilterControl_Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource FilterControl_Border}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Foreground" Value="{StaticResource FilterControl_Foreground}"/>
    </Style>
    <DataTemplate x:Key="DataFilterPresenterHeaderTemplate">
        <Telerik_Windows_Controls_Data_DataFilter:FilterControl telerik:StyleManager.Theme="{StaticResource Theme3}" Style="{StaticResource FilterControlStyle1}"/>
    </DataTemplate>
    <Style x:Key="DataFilterPresenterStyle1" TargetType="Telerik_Windows_Controls_Data_DataFilter:DataFilterPresenter">
        <Setter Property="Template" Value="{StaticResource DataFilterPresenterTemplate}"/>
        <Setter Property="ItemTemplate" Value="{StaticResource DataFilterPresenterItemTemplate}"/>
        <Setter Property="HeaderTemplate" Value="{StaticResource DataFilterPresenterHeaderTemplate}"/>
        <Setter Property="IsTabStop" Value="False"/>
    </Style>
    <ControlTemplate x:Key="RadDataFilterTemplate" TargetType="telerik:RadDataFilter">
        <ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" telerik:StyleManager.Theme="{StaticResource Theme2}" ScrollViewer.VerticalScrollBarVisibility="Auto">
            <Telerik_Windows_Controls_Data_DataFilter:DataFilterPresenter DataContext="{TemplateBinding ViewModel}" Header="{Binding .}" ItemsSource="{Binding CompositeFilter.Filters}" telerik:StyleManager.Theme="{StaticResource Theme2}" Style="{StaticResource DataFilterPresenterStyle1}"/>
        </ScrollViewer>
    </ControlTemplate>
    <Style x:Key="RadDataFilterStyle1" TargetType="telerik:RadDataFilter">
        <Setter Property="Template" Value="{StaticResource RadDataFilterTemplate}"/>
        <Setter Property="IsTabStop" Value="False"/>
    </Style>
</UserControl.Resources>

And control

<telerik:RadDataFilter x:Name="radFilter" AutoGenerateItemPropertyDefinitions="False"
                                        CanUserCreateCompositeFilters="False" FilterOperatorsLoading="radFilter_FilterOperatorsLoading"
                                        Margin="0,2,2,2" Grid.Row="1" Grid.Column="0"
                                        EditorCreated="radFilter_EditorCreated" Style="{StaticResource RadDataFilterStyle1}" />

[Vanya Pavlova]

Hi Marcin,

 

Please accept my apology for the delayed reply! Using the snippet provided we are not able to understand what is wrong in your code. Let me try to explain the problem. The origin of this issue resides within the Border with the specified OpacityMask and the animation associated with it as part of the template of FilterControl. As my colleague Maya proposed the easiest way would be to remove the OpacityMask of this template. We have alredy fixed this issue and by that reason I am attaching you the default template of RadDataFilter and the correct animation for this Border. Will you please take a look at the attachment and let me know how it differs from yours? I have separated it in a new ResourceDictionary, which you can easily merge to your own application.  

All the best,
Vanya Pavlova
the Telerik team

[Marcin Grabowski]

Hi.
I compare my code with yours template and i found my mistake.
Thanks, all works now :)