FilterControl Styling

10 posts, 0 answers
  1. Sergio
    Sergio avatar
    6 posts
    Member since:
    Jun 2011

    Posted 02 Jun 2011 Link to this post

    Hello, I'm trying to style de RadFilter, so I started to style the FilterControl.

    I create a simple WPF 4.0 proyect (VS 2010 SP1) with a RadFilter and a FilterControl (just for get template in ExpressionBlend).
    Opened the solution and extracted FilterControl Template to a new dictionary resource and set "For all Controls" (so I got the RadFilter modified).

    With that, the RadFilter stoped working. Without any modification, the dropdownbutton stopped displaying.

    (How could I got the sample proyect, if you need it)

    Any idea here?

    Thanks in advance.

    Tamplate generated by Expression Blend 4:

    <ResourceDictionary
        xmlns:Telerik_Windows_Controls_Data_DataFilter="clr-namespace:Telerik.Windows.Controls.Data.DataFilter;assembly=Telerik.Windows.Controls.Data"
        <!-- Resource dictionary entries should be defined here. -->
        <Style TargetType="{x:Type Telerik_Windows_Controls_Data_DataFilter:FilterControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Telerik_Windows_Controls_Data_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>
                            <Border.Triggers>
                                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="OuterBorder"/>
                                            <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="OuterBorder"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </Border.Triggers>
                            <Border x:Name="InnerBorder" BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="10">
                                <StackPanel Orientation="Horizontal">
                                    <telerik:RadButton x:Name="PART_RemoveFilterButton" Command="{Binding RemoveFilter}">
                                        <telerik:RadButton.Style>
                                            <Style TargetType="{x:Type telerik:RadButton}">
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate TargetType="{x:Type telerik:RadButton}">
                                                            <Grid>
                                                                <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}" CornerRadius="8" Opacity="0">
                                                                    <Border.Background>
                                                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                            <GradientStop Color="#FFDE4646" Offset="1"/>
                                                                            <GradientStop Color="#FFFF8B6A"/>
                                                                        </LinearGradientBrush>
                                                                    </Border.Background>
                                                                </Border>
                                                                <Border x:Name="ButtonBorder_Pressed" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="8" Opacity="0">
                                                                    <Border.Background>
                                                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                            <GradientStop Color="#FF943434"/>
                                                                            <GradientStop Color="#FFFF3800" Offset="1"/>
                                                                        </LinearGradientBrush>
                                                                    </Border.Background>
                                                                </Border>
                                                                <Path Data="M4.0551758,5.1411133L4.9467773,5.1411133 4.9467773,8.0683594 7.8740234,8.0683594 7.8740234,8.9277344 4.9467773,8.9277344 4.9467773,11.85498 4.0551758,11.85498 4.0551758,8.9277344 1.1279297,8.9277344 1.1279297,8.0683594 4.0551758,8.0683594z" 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.Triggers>
                                                                <Trigger Property="IsMouseOver" Value="True">
                                                                    <Trigger.EnterActions>
                                                                        <BeginStoryboard>
                                                                            <Storyboard>
                                                                                <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Over"/>
                                                                            </Storyboard>
                                                                        </BeginStoryboard>
                                                                    </Trigger.EnterActions>
                                                                    <Trigger.ExitActions>
                                                                        <BeginStoryboard>
                                                                            <Storyboard FillBehavior="Stop">
                                                                                <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Over"/>
                                                                            </Storyboard>
                                                                        </BeginStoryboard>
                                                                    </Trigger.ExitActions>
                                                                </Trigger>
                                                                <Trigger Property="IsPressed" Value="True">
                                                                    <Trigger.EnterActions>
                                                                        <BeginStoryboard>
                                                                            <Storyboard>
                                                                                <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Pressed"/>
                                                                            </Storyboard>
                                                                        </BeginStoryboard>
                                                                    </Trigger.EnterActions>
                                                                    <Trigger.ExitActions>
                                                                        <BeginStoryboard>
                                                                            <Storyboard FillBehavior="Stop">
                                                                                <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Pressed"/>
                                                                            </Storyboard>
                                                                        </BeginStoryboard>
                                                                    </Trigger.ExitActions>
                                                                </Trigger>
                                                            </ControlTemplate.Triggers>
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                                <Setter Property="Background">
                                                    <Setter.Value>
                                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                            <GradientStop Color="#FF943434" Offset="1"/>
                                                            <GradientStop Color="#FFFF3800"/>
                                                        </LinearGradientBrush>
                                                    </Setter.Value>
                                                </Setter>
                                                <Setter Property="BorderBrush">
                                                    <Setter.Value>
                                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                            <GradientStop Color="#FF83A5D2" Offset="0"/>
                                                            <GradientStop Color="#FFE7F1FF" Offset="1"/>
                                                        </LinearGradientBrush>
                                                    </Setter.Value>
                                                </Setter>
                                                <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="White"/>
                                                <Setter Property="Margin" Value="1,0,4,0"/>
                                            </Style>
                                        </telerik:RadButton.Style>
                                    </telerik:RadButton>
                                    <StackPanel Orientation="Horizontal">
                                        <StackPanel.Visibility>
                                            <Binding Path="IsComposite">
                                                <Binding.Converter>
                                                    <telerik:BooleanToVisibilityConverter/>
                                                </Binding.Converter>
                                            </Binding>
                                        </StackPanel.Visibility>
                                        <telerik:RadToggleButton x:Name="PART_CompositeFilterLogicalOperatorToggleButton" FontSize="10" Height="18" MinWidth="30">
                                            <telerik:RadToggleButton.IsChecked>
                                                <Binding Mode="TwoWay" Path="CompositeFilter.LogicalOperator">
                                                    <Binding.Converter>
                                                        <Telerik_Windows_Controls_Data_DataFilter:LogicalOperatorToCheckedConverter/>
                                                    </Binding.Converter>
                                                </Binding>
                                            </telerik:RadToggleButton.IsChecked>
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                            <Binding Path="CompositeFilter.LogicalOperator">
                                                <Binding.Converter>
                                                    <telerik:FilterCompositionLogicalOperatorConverter/>
                                                </Binding.Converter>
                                            </Binding>
                                        </telerik:RadToggleButton>
                                        <telerik:RadButton x:Name="PART_AddFilterButton" Command="{Binding AddFilter}">
                                            <telerik:RadButton.Style>
                                                <Style TargetType="{x:Type telerik:RadButton}">
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="{x:Type telerik:RadButton}">
                                                                <Grid>
                                                                    <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}" CornerRadius="8" Opacity="0">
                                                                        <Border.Background>
                                                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                <GradientStop Color="#FF5AB13C" Offset="1"/>
                                                                                <GradientStop Color="#FFB1FF72"/>
                                                                            </LinearGradientBrush>
                                                                        </Border.Background>
                                                                    </Border>
                                                                    <Border x:Name="ButtonBorder_Pressed" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="8" Opacity="0">
                                                                        <Border.Background>
                                                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                <GradientStop Color="#FF4D9434"/>
                                                                                <GradientStop Color="#FF71FF00" Offset="1"/>
                                                                            </LinearGradientBrush>
                                                                        </Border.Background>
                                                                    </Border>
                                                                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                                </Grid>
                                                                <ControlTemplate.Triggers>
                                                                    <Trigger Property="IsMouseOver" Value="True">
                                                                        <Trigger.EnterActions>
                                                                            <BeginStoryboard>
                                                                                <Storyboard>
                                                                                    <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Over"/>
                                                                                </Storyboard>
                                                                            </BeginStoryboard>
                                                                        </Trigger.EnterActions>
                                                                        <Trigger.ExitActions>
                                                                            <BeginStoryboard>
                                                                                <Storyboard FillBehavior="Stop">
                                                                                    <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Over"/>
                                                                                </Storyboard>
                                                                            </BeginStoryboard>
                                                                        </Trigger.ExitActions>
                                                                    </Trigger>
                                                                    <Trigger Property="IsPressed" Value="True">
                                                                        <Trigger.EnterActions>
                                                                            <BeginStoryboard>
                                                                                <Storyboard>
                                                                                    <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Pressed"/>
                                                                                </Storyboard>
                                                                            </BeginStoryboard>
                                                                        </Trigger.EnterActions>
                                                                        <Trigger.ExitActions>
                                                                            <BeginStoryboard>
                                                                                <Storyboard FillBehavior="Stop">
                                                                                    <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Pressed"/>
                                                                                </Storyboard>
                                                                            </BeginStoryboard>
                                                                        </Trigger.ExitActions>
                                                                    </Trigger>
                                                                </ControlTemplate.Triggers>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <Setter Property="Background">
                                                        <Setter.Value>
                                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                <GradientStop Color="#FF4D9434" Offset="1"/>
                                                                <GradientStop Color="#FF71FF00"/>
                                                            </LinearGradientBrush>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <Setter Property="BorderBrush">
                                                        <Setter.Value>
                                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                <GradientStop Color="#FF83A5D2" Offset="0"/>
                                                                <GradientStop Color="#FFE7F1FF" Offset="1"/>
                                                            </LinearGradientBrush>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <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="White"/>
                                                    <Setter Property="Margin" Value="4,0,1,0"/>
                                                </Style>
                                            </telerik:RadButton.Style>
                                            <Path Data="M4.0551758,5.1411133L4.9467773,5.1411133 4.9467773,8.0683594 7.8740234,8.0683594 7.8740234,8.9277344 4.9467773,8.9277344 4.9467773,11.85498 4.0551758,11.85498 4.0551758,8.9277344 1.1279297,8.9277344 1.1279297,8.0683594 4.0551758,8.0683594z" Height="8" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Stroke="White" Width="8">
                                                <Path.RenderTransform>
                                                    <TransformGroup>
                                                        <ScaleTransform/>
                                                        <SkewTransform/>
                                                        <RotateTransform/>
                                                        <TranslateTransform/>
                                                    </TransformGroup>
                                                </Path.RenderTransform>
                                            </Path>
                                        </telerik:RadButton>
                                    </StackPanel>
                                    <StackPanel Orientation="Horizontal">
                                        <StackPanel.Visibility>
                                            <Binding Path="IsComposite">
                                                <Binding.Converter>
                                                    <telerik:InvertedBooleanToVisibilityConverter/>
                                                </Binding.Converter>
                                            </Binding>
                                        </StackPanel.Visibility>
                                        <telerik:RadComboBox x:Name="PART_SimpleFilterMemberComboBox" Margin="0,0,3,0" MinWidth="100" VerticalAlignment="Center">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </telerik:RadComboBox>
                                        <telerik:RadComboBox x:Name="PART_SimpleFilterOperatorComboBox" Margin="0,0,3,0" MinWidth="100" VerticalAlignment="Center">
                                            <telerik:RadComboBox.ItemTemplate>
                                                <DataTemplate>
                                                    <TextBlock>
                                                        <TextBlock.Text>
                                                            <Binding>
                                                                <Binding.Converter>
                                                                    <telerik:FilterOperatorConverter/>
                                                                </Binding.Converter>
                                                            </Binding>
                                                        </TextBlock.Text>
                                                    </TextBlock>
                                                </DataTemplate>
                                            </telerik:RadComboBox.ItemTemplate>
                                            <telerik:RadComboBox.IsEnabled>
                                                <Binding Path="SimpleFilter.Member">
                                                    <Binding.Converter>
                                                        <Telerik_Windows_Controls_Data_DataFilter:FilterMemberToEnabledConverter/>
                                                    </Binding.Converter>
                                                </Binding>
                                            </telerik:RadComboBox.IsEnabled>
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </telerik:RadComboBox>
                                        <Telerik_Windows_Controls_Data_DataFilter:FilterEditor FilterOperator="{Binding Operator}" HorizontalContentAlignment="Stretch" ItemPropertyDefinition="{Binding SelectedMember}" VerticalContentAlignment="Stretch">
                                            <Telerik_Windows_Controls_Data_DataFilter:FilterEditor.IsEnabled>
                                                <Binding Path="Member">
                                                    <Binding.Converter>
                                                        <Telerik_Windows_Controls_Data_DataFilter:FilterMemberToEnabledConverter/>
                                                    </Binding.Converter>
                                                </Binding>
                                            </Telerik_Windows_Controls_Data_DataFilter:FilterEditor.IsEnabled>
                                        </Telerik_Windows_Controls_Data_DataFilter:FilterEditor>
                                        <Border BorderBrush="Transparent" Width="8">
                                            <Border.Visibility>
                                                <Binding Path="CanUserCreateCompositeFilters">
                                                    <Binding.Converter>
                                                        <telerik:InvertedBooleanToVisibilityConverter/>
                                                    </Binding.Converter>
                                                </Binding>
                                            </Border.Visibility>
                                        </Border>
                                        <telerik:RadButton x:Name="PART_ToCompositeFilterButton" Command="{Binding ToCompositeFilter}">
                                            <telerik:RadButton.Style>
                                                <Style TargetType="{x:Type telerik:RadButton}">
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="{x:Type telerik:RadButton}">
                                                                <Grid>
                                                                    <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}" CornerRadius="8" Opacity="0">
                                                                        <Border.Background>
                                                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                <GradientStop Color="#FF5AB13C" Offset="1"/>
                                                                                <GradientStop Color="#FFB1FF72"/>
                                                                            </LinearGradientBrush>
                                                                        </Border.Background>
                                                                    </Border>
                                                                    <Border x:Name="ButtonBorder_Pressed" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="8" Opacity="0">
                                                                        <Border.Background>
                                                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                <GradientStop Color="#FF4D9434"/>
                                                                                <GradientStop Color="#FF71FF00" Offset="1"/>
                                                                            </LinearGradientBrush>
                                                                        </Border.Background>
                                                                    </Border>
                                                                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                                </Grid>
                                                                <ControlTemplate.Triggers>
                                                                    <Trigger Property="IsMouseOver" Value="True">
                                                                        <Trigger.EnterActions>
                                                                            <BeginStoryboard>
                                                                                <Storyboard>
                                                                                    <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Over"/>
                                                                                </Storyboard>
                                                                            </BeginStoryboard>
                                                                        </Trigger.EnterActions>
                                                                        <Trigger.ExitActions>
                                                                            <BeginStoryboard>
                                                                                <Storyboard FillBehavior="Stop">
                                                                                    <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Over"/>
                                                                                </Storyboard>
                                                                            </BeginStoryboard>
                                                                        </Trigger.ExitActions>
                                                                    </Trigger>
                                                                    <Trigger Property="IsPressed" Value="True">
                                                                        <Trigger.EnterActions>
                                                                            <BeginStoryboard>
                                                                                <Storyboard>
                                                                                    <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Pressed"/>
                                                                                </Storyboard>
                                                                            </BeginStoryboard>
                                                                        </Trigger.EnterActions>
                                                                        <Trigger.ExitActions>
                                                                            <BeginStoryboard>
                                                                                <Storyboard FillBehavior="Stop">
                                                                                    <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonBorder_Pressed"/>
                                                                                </Storyboard>
                                                                            </BeginStoryboard>
                                                                        </Trigger.ExitActions>
                                                                    </Trigger>
                                                                </ControlTemplate.Triggers>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <Setter Property="Background">
                                                        <Setter.Value>
                                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                <GradientStop Color="#FF4D9434" Offset="1"/>
                                                                <GradientStop Color="#FF71FF00"/>
                                                            </LinearGradientBrush>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <Setter Property="BorderBrush">
                                                        <Setter.Value>
                                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                <GradientStop Color="#FF83A5D2" Offset="0"/>
                                                                <GradientStop Color="#FFE7F1FF" Offset="1"/>
                                                            </LinearGradientBrush>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <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="White"/>
                                                    <Setter Property="Margin" Value="4,0,1,0"/>
                                                </Style>
                                            </telerik:RadButton.Style>
                                            <telerik:RadButton.Visibility>
                                                <Binding Path="CanUserCreateCompositeFilters">
                                                    <Binding.Converter>
                                                        <telerik:BooleanToVisibilityConverter/>
                                                    </Binding.Converter>
                                                </Binding>
                                            </telerik:RadButton.Visibility>
                                            <Path Data="M2.0597237,0.00011700392C2.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.567185L3.3953214,8.6289421 7.0353448,6.5273734 7.032584,6.5179721C6.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.108039L1.6210667,8.099353 1.6210667,3.9568464 1.5962493,3.9518846C1.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.00011700392z" Fill="White" 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>
                </Setter.Value>
            </Setter>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush 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>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" Value="#FF5F5F5F"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
        </Style>
    </ResourceDictionary>
  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 03 Jun 2011 Link to this post

    Hello Sergio,

     

    This sounds strange. May you please try to isolate the problem in a small repro application and send it to us in a new support ticket where we can see what might be wrong? Thus we would be able to provide you with an appropriate solution. 


    Regards,
    Vanya Pavlova
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Sergio
    Sergio avatar
    6 posts
    Member since:
    Jun 2011

    Posted 03 Jun 2011 Link to this post

    I had explore the Themes proyects, and saw that the bindings aren't created when you edit the templates from blend. I don't know if thats is how the Exp Blender works always.

    So, I mix the Blender template with the Theme template (copy&paste some things) and now I got it working.


    The problem was, that if you use the themplate generated by Expression Blend, the RadFilter stops working (not showing items) and thats was because no bindings were exported....

    Thanks a lot.


  5. Fan
    Fan avatar
    2 posts
    Member since:
    Oct 2013

    Posted 17 Jan 2014 Link to this post

    I got the same issue. How can I fix it?


    I have followed the instructions explained in http://www.telerik.com/help/wpf/raddatafilter-styles-and-templates-styling-the-raddatafilter.html.

    After using the generated templates with Blend, the UI of RadDataFilter control was changed to what is shown in the attached screenshot and the control doesn't work.



    Thanks,

    Fan

  6. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 20 Jan 2014 Link to this post

    Hi Fan,


    Thank you for contacting us! I can definitely confirm that this one is a Blend related issue in WPF - some of the bindings are not correctly extracted and by that reason you are getting this behavior. 
    If we assume that you predefined the full template of RadDataFilter,  please add the DataContext Binding to DataPresenter, as shown below:

    <DataFilter:DataFilterPresenter Header="{Binding .}" ItemsSource="{Binding CompositeFilter.Filters}"  DataContext="{TemplateBinding ViewModel}"  Style="{DynamicResource DataFilterPresenterStyle1}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </DataFilter:DataFilterPresenter>

    I am also attaching you small sample demo, which you can use for further reference. 
    In order to avoid such undesired behavior I recommend you to use pure implicit styles, as described in our documentation


    Regards,
    Vanya Pavlova
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    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 >>
  7. Fan
    Fan avatar
    2 posts
    Member since:
    Oct 2013

    Posted 21 Jan 2014 Link to this post

    Hi Vanya,


    Thank you for answering my question. Your suggestion works. As you suggested, I am trying to use implicit styles to give a different style of the "source member" combo box (the left side combo box) in the RadDataFilter control. I am reading the documents. To speed up my learning process, would you please supply a small sample to demo how to do it using the implicit styles. Really appreciate your help.



    Thanks,

    Fan

  8. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 22 Jan 2014 Link to this post

    Hello Fan,


    Thank you for getting back to us!
    I'm attaching you small sample demo, which illustrates how to modify RadDataFilter
    with implicit styles. Furthermore I believe that the following thread might be interesting for you on that matter. 


    The same is applicable to WPF, as well.



    Regards,
    Vanya Pavlova
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    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 >>
  9. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 22 Jan 2014 Link to this post

    Hello Fan,


    Thank you for getting back to us!
    I'm attaching you small sample demo, which illustrates how to modify RadDataFilter
    with implicit styles. Furthermore I believe that the following thread might be interesting for you on that matter. 


    The same is applicable to WPF, as well.



    Regards,
    Vanya Pavlova
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    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 >>
  10. Vikas
    Vikas avatar
    36 posts
    Member since:
    Dec 2015

    Posted 04 Mar in reply to Vanya Pavlova Link to this post

    I am also running into some problems styling data filter, I am not using implicit styles.

    I am able to follow the fix mentioned above about Bindings and I can create a style and when I run the application data filter is functional. But any changes I make are not visible, I mean if i comment out the close button or change the color everything looks fine when i am doing this in blend, When i am in the filter control template view. 

    But when i go back to the main screen I see the default data filter, same when i run the application, The style is applied to the control.

    Pasting the style. I have commented out PART_AddFilterButton, but it still show up when I run the application

    <Window
            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"
            xmlns:local="clr-namespace:WpfApplication2"
            xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
            xmlns:DataFilter="clr-namespace:Telerik.Windows.Controls.Data.DataFilter;assembly=Telerik.Windows.Controls.Data" x:Class="WpfApplication2.RadDataFilterStyle"
            mc:Ignorable="d"
            Title="RadDataFilterStyle" Height="300" Width="300">
        <Window.Resources>

            <Style x:Key="RadDataFilterStyle1" TargetType="{x:Type telerik:RadDataFilter}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:RadDataFilter}">
                            <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                                <DataFilter:DataFilterPresenter Header="{Binding .}" 
                                                                Style="{DynamicResource DataFilterPresenterStyle1}" 
                                                                ItemsPanel="{DynamicResource ItemsPanelTemplate1}"
                                                                ItemsSource="{Binding CompositeFilter.Filters}"
                                                                DataContext="{TemplateBinding ViewModel}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </DataFilter:DataFilterPresenter>
                            </ScrollViewer>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="IsTabStop" Value="False"/>
            </Style>
            <Style x:Key="DataFilterPresenterStyle1" TargetType="{x:Type DataFilter:DataFilterPresenter}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type 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"/>
                                    <ItemsPresenter x:Name="Items" Grid.Row="1"/>
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemTemplate">
                    <Setter.Value>
                        <HierarchicalDataTemplate AlternationCount="0" ItemBindingGroup="{x:Null}" ItemTemplate="{x:Null}" ItemContainerStyleSelector="{x:Null}" ItemStringFormat="{x:Null}" ItemsSource="{Binding CompositeFilter.Filters}" ItemContainerStyle="{x:Null}" ItemTemplateSelector="{x:Null}">
                            <DataFilter:FilterControl Style="{DynamicResource FilterControlStyle1}">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </DataFilter:FilterControl>
                        </HierarchicalDataTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <DataFilter:FilterControl>
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </DataFilter:FilterControl>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="SnapsToDevicePixels" Value="True"/>
            </Style>
            <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
                <StackPanel IsItemsHost="True"/>
            </ItemsPanelTemplate>
            <Style x:Key="FilterControlStyle1" TargetType="{x:Type DataFilter:FilterControl}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type 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>
                                <Border.Triggers>
                                    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="OuterBorder"/>
                                                <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="OuterBorder"/>
                                                <ColorAnimation BeginTime="0:0:0.2" Duration="0" To="Black" Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="OuterBorder"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Border.Triggers>
                                <Border x:Name="InnerBorder" BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="10">
                                    <StackPanel Orientation="Horizontal">
                                        <telerik:RadButton x:Name="PART_RemoveFilterButton" Command="{Binding RemoveFilter}" InnerCornerRadius="0">
                                            <telerik:RadButton.Style>
                                                <Style TargetType="{x:Type telerik:RadButton}">
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="{x:Type telerik:RadButton}">
                                                                <Grid>
                                                                    <VisualStateManager.VisualStateGroups>
                                                                        <VisualStateGroup x:Name="CommonStates">
                                                                            <VisualStateGroup.Transitions>
                                                                                <VisualTransition From="{x:Null}" GeneratedDuration="0:0:0.2" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
                                                                            </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}" CornerRadius="8" Opacity="0">
                                                                        <Border.Background>
                                                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                <GradientStop Color="#FFDE4646" Offset="1"/>
                                                                                <GradientStop Color="#FFFF8B6A"/>
                                                                            </LinearGradientBrush>
                                                                        </Border.Background>
                                                                    </Border>
                                                                    <Border x:Name="ButtonBorder_Pressed" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="8" Opacity="0">
                                                                        <Border.Background>
                                                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                <GradientStop Color="#FF943434"/>
                                                                                <GradientStop Color="#FFFF3800" Offset="1"/>
                                                                            </LinearGradientBrush>
                                                                        </Border.Background>
                                                                    </Border>
                                                                    <Path Data="M4.0551758,5.1411133L4.9467773,5.1411133 4.9467773,8.0683594 7.8740234,8.0683594 7.8740234,8.9277344 4.9467773,8.9277344 4.9467773,11.85498 4.0551758,11.85498 4.0551758,8.9277344 1.1279297,8.9277344 1.1279297,8.0683594 4.0551758,8.0683594z" 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>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <Setter Property="Background">
                                                        <Setter.Value>
                                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                <GradientStop Color="#FF943434" Offset="1"/>
                                                                <GradientStop Color="#FFFF3800"/>
                                                            </LinearGradientBrush>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <Setter Property="BorderBrush">
                                                        <Setter.Value>
                                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                <GradientStop Color="#FF83A5D2" Offset="0"/>
                                                                <GradientStop Color="#FFE7F1FF" Offset="1"/>
                                                            </LinearGradientBrush>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <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="White"/>
                                                    <Setter Property="Margin" Value="1,0,4,0"/>
                                                </Style>
                                            </telerik:RadButton.Style>
                                        </telerik:RadButton>
                                        <StackPanel Orientation="Horizontal">
                                            <StackPanel.Visibility>
                                                <Binding Path="IsComposite">
                                                    <Binding.Converter>
                                                        <telerik:BooleanToVisibilityConverter/>
                                                    </Binding.Converter>
                                                </Binding>
                                            </StackPanel.Visibility>
                                            <telerik:RadToggleButton x:Name="PART_CompositeFilterLogicalOperatorToggleButton" FontSize="10" Height="28" InnerCornerRadius="0" MinWidth="30" Background="#FF262062">
                                                <telerik:RadToggleButton.IsChecked>
                                                    <Binding Mode="TwoWay" Path="CompositeFilter.LogicalOperator">
                                                        <Binding.Converter>
                                                            <DataFilter:LogicalOperatorToCheckedConverter/>
                                                        </Binding.Converter>
                                                    </Binding>
                                                </telerik:RadToggleButton.IsChecked>
                                                <telerik:StyleManager.Theme>
                                                    <telerik:Office_BlackTheme/>
                                                </telerik:StyleManager.Theme>
                                                <Binding Path="CompositeFilter.LogicalOperator">
                                                    <Binding.Converter>
                                                        <telerik:FilterCompositionLogicalOperatorConverter/>
                                                    </Binding.Converter>
                                                </Binding>
                                            </telerik:RadToggleButton>
                                            <!--<telerik:RadButton x:Name="PART_AddFilterButton" Command="{Binding AddFilter}" InnerCornerRadius="0">
                                                <telerik:RadButton.Style>
                                                    <Style TargetType="{x:Type telerik:RadButton}">
                                                        <Setter Property="Template">
                                                            <Setter.Value>
                                                                <ControlTemplate TargetType="{x:Type telerik:RadButton}">
                                                                    <Grid>
                                                                        <VisualStateManager.VisualStateGroups>
                                                                            <VisualStateGroup x:Name="CommonStates">
                                                                                <VisualStateGroup.Transitions>
                                                                                    <VisualTransition From="{x:Null}" GeneratedDuration="0:0:0.2" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
                                                                                </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}" CornerRadius="8" Opacity="0">
                                                                            <Border.Background>
                                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                    <GradientStop Color="#FF5AB13C" Offset="1"/>
                                                                                    <GradientStop Color="#FFB1FF72"/>
                                                                                </LinearGradientBrush>
                                                                            </Border.Background>
                                                                        </Border>
                                                                        <Border x:Name="ButtonBorder_Pressed" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="8" Opacity="0">
                                                                            <Border.Background>
                                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                    <GradientStop Color="#FF4D9434"/>
                                                                                    <GradientStop Color="#FF71FF00" Offset="1"/>
                                                                                </LinearGradientBrush>
                                                                            </Border.Background>
                                                                        </Border>
                                                                        <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                                    </Grid>
                                                                </ControlTemplate>
                                                            </Setter.Value>
                                                        </Setter>
                                                        <Setter Property="Background">
                                                            <Setter.Value>
                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                    <GradientStop Color="#FF4D9434" Offset="1"/>
                                                                    <GradientStop Color="#FF71FF00"/>
                                                                </LinearGradientBrush>
                                                            </Setter.Value>
                                                        </Setter>
                                                        <Setter Property="BorderBrush">
                                                            <Setter.Value>
                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                    <GradientStop Color="#FF83A5D2" Offset="0"/>
                                                                    <GradientStop Color="#FFE7F1FF" Offset="1"/>
                                                                </LinearGradientBrush>
                                                            </Setter.Value>
                                                        </Setter>
                                                        <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="White"/>
                                                        <Setter Property="Margin" Value="4,0,1,0"/>
                                                    </Style>
                                                </telerik:RadButton.Style>
                                                <Path Data="M4.0551758,5.1411133L4.9467773,5.1411133 4.9467773,8.0683594 7.8740234,8.0683594 7.8740234,8.9277344 4.9467773,8.9277344 4.9467773,11.85498 4.0551758,11.85498 4.0551758,8.9277344 1.1279297,8.9277344 1.1279297,8.0683594 4.0551758,8.0683594z" Height="8" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Stroke="White" Width="8">
                                                    <Path.RenderTransform>
                                                        <TransformGroup>
                                                            <ScaleTransform/>
                                                            <SkewTransform/>
                                                            <RotateTransform/>
                                                            <TranslateTransform/>
                                                        </TransformGroup>
                                                    </Path.RenderTransform>
                                                </Path>
                                            </telerik:RadButton>-->
                                        </StackPanel>
                                        <StackPanel Orientation="Horizontal">
                                            <StackPanel.Visibility>
                                                <Binding Path="IsComposite">
                                                    <Binding.Converter>
                                                        <telerik:InvertedBooleanToVisibilityConverter/>
                                                    </Binding.Converter>
                                                </Binding>
                                            </StackPanel.Visibility>
                                            <telerik:RadComboBox x:Name="PART_SimpleFilterMemberComboBox" FilteringBehavior="{x:Null}" IsTabStop="True" Margin="0,0,3,0" MinWidth="100" VerticalAlignment="Center">
                                                <telerik:StyleManager.Theme>
                                                    <telerik:Office_BlackTheme/>
                                                </telerik:StyleManager.Theme>
                                            </telerik:RadComboBox>
                                            <telerik:RadComboBox x:Name="PART_SimpleFilterOperatorComboBox" FilteringBehavior="{x:Null}" IsTabStop="True" Margin="0,0,3,0" MinWidth="100" VerticalAlignment="Center">
                                                <telerik:RadComboBox.ItemTemplate>
                                                    <DataTemplate>
                                                        <TextBlock>
                                                            <TextBlock.Text>
                                                                <Binding>
                                                                    <Binding.Converter>
                                                                        <telerik:FilterOperatorConverter/>
                                                                    </Binding.Converter>
                                                                </Binding>
                                                            </TextBlock.Text>
                                                        </TextBlock>
                                                    </DataTemplate>
                                                </telerik:RadComboBox.ItemTemplate>
                                                <telerik:RadComboBox.IsEnabled>
                                                    <Binding Path="SimpleFilter.Member">
                                                        <Binding.Converter>
                                                            <DataFilter:FilterMemberToEnabledConverter/>
                                                        </Binding.Converter>
                                                    </Binding>
                                                </telerik:RadComboBox.IsEnabled>
                                                <telerik:StyleManager.Theme>
                                                    <telerik:Office_BlackTheme/>
                                                </telerik:StyleManager.Theme>
                                            </telerik:RadComboBox>
                                            <DataFilter:FilterEditor FilterOperator="{Binding Operator}" HorizontalContentAlignment="Stretch" IsTabStop="False" ItemPropertyDefinition="{Binding SelectedMember}" VerticalContentAlignment="Stretch"/>
                                            <Border BorderBrush="Transparent" Width="8">
                                                <Border.Visibility>
                                                    <Binding Path="CanUserCreateCompositeFilters">
                                                        <Binding.Converter>
                                                            <telerik:InvertedBooleanToVisibilityConverter/>
                                                        </Binding.Converter>
                                                    </Binding>
                                                </Border.Visibility>
                                            </Border>
                                            <telerik:RadButton x:Name="PART_ToCompositeFilterButton" Command="{Binding ToCompositeFilter}" InnerCornerRadius="0">
                                                <telerik:RadButton.Style>
                                                    <Style TargetType="{x:Type telerik:RadButton}">
                                                        <Setter Property="Template">
                                                            <Setter.Value>
                                                                <ControlTemplate TargetType="{x:Type telerik:RadButton}">
                                                                    <Grid>
                                                                        <VisualStateManager.VisualStateGroups>
                                                                            <VisualStateGroup x:Name="CommonStates">
                                                                                <VisualStateGroup.Transitions>
                                                                                    <VisualTransition From="{x:Null}" GeneratedDuration="0:0:0.2" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
                                                                                </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}" CornerRadius="8" Opacity="0">
                                                                            <Border.Background>
                                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                    <GradientStop Color="#FF5AB13C" Offset="1"/>
                                                                                    <GradientStop Color="#FFB1FF72"/>
                                                                                </LinearGradientBrush>
                                                                            </Border.Background>
                                                                        </Border>
                                                                        <Border x:Name="ButtonBorder_Pressed" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="8" Opacity="0">
                                                                            <Border.Background>
                                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                    <GradientStop Color="#FF4D9434"/>
                                                                                    <GradientStop Color="#FF71FF00" Offset="1"/>
                                                                                </LinearGradientBrush>
                                                                            </Border.Background>
                                                                        </Border>
                                                                        <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                                    </Grid>
                                                                </ControlTemplate>
                                                            </Setter.Value>
                                                        </Setter>
                                                        <Setter Property="Background">
                                                            <Setter.Value>
                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                    <GradientStop Color="#FF4D9434" Offset="1"/>
                                                                    <GradientStop Color="#FF71FF00"/>
                                                                </LinearGradientBrush>
                                                            </Setter.Value>
                                                        </Setter>
                                                        <Setter Property="BorderBrush">
                                                            <Setter.Value>
                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                    <GradientStop Color="#FF83A5D2" Offset="0"/>
                                                                    <GradientStop Color="#FFE7F1FF" Offset="1"/>
                                                                </LinearGradientBrush>
                                                            </Setter.Value>
                                                        </Setter>
                                                        <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="White"/>
                                                        <Setter Property="Margin" Value="4,0,1,0"/>
                                                    </Style>
                                                </telerik:RadButton.Style>
                                                <telerik:RadButton.Visibility>
                                                    <Binding Path="CanUserCreateCompositeFilters">
                                                        <Binding.Converter>
                                                            <telerik:BooleanToVisibilityConverter/>
                                                        </Binding.Converter>
                                                    </Binding>
                                                </telerik:RadButton.Visibility>
                                                <Path Data="M2.0597237,0.00011700392C2.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.567185L3.3953214,8.6289421 7.0353448,6.5273734 7.032584,6.5179721C6.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.108039L1.6210667,8.099353 1.6210667,3.9568464 1.5962493,3.9518846C1.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.00011700392z" Fill="White" 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>
                    </Setter.Value>
                </Setter>
                <Setter Property="Background">
                    <Setter.Value>
                        <LinearGradientBrush 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>
                    </Setter.Value>
                </Setter>
                <Setter Property="BorderBrush" Value="#FF5F5F5F"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="Foreground" Value="Black"/>
                <Setter Property="SnapsToDevicePixels" Value="True"/>
                <Setter Property="VerticalAlignment" Value="Top"/>
                <Setter Property="HorizontalAlignment" Value="Left"/>
            </Style>

        </Window.Resources>
        <Grid>
            <telerik:RadDataFilter Style="{DynamicResource RadDataFilterStyle1}"  />
        </Grid>
    </Window>

  11. Vikas
    Vikas avatar
    36 posts
    Member since:
    Dec 2015

    Posted 08 Mar in reply to Vikas Link to this post

    I was missing style for filter control on the hierarchical data template. It is working now.
Back to Top
UI for WPF is Visual Studio 2017 Ready