This is a migrated thread and some comments may be shown as answers.
[Solved] Restyling the filterdropdown and the toggle button

1 Answer 177 Views
GridView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
jbaird asked on 25 Aug 2009, 05:21 PM
    
            <!-- FilteringDropDown --> 
        
                <ControlTemplate x:Key="DistinctFilterControlTemplate" TargetType="twcg:FilteringDropDown">  
        
                    <Grid> 
        
                        <Grid.Resources> 
        
                        </Grid.Resources> 
        
                        <ToggleButton x:Name="PART_DropDownButton" Width="20" Height="20">  
        
                            <ToggleButton.Template> 
        
                                <ControlTemplate TargetType="ToggleButton">  
        
                                    <ContentPresenter /> 
        
                                </ControlTemplate> 
        
                            </ToggleButton.Template> 
        
                            <Grid Width="11" Height="12" Background="Transparent">  
        
                               <Path Fill="{StaticResource GridViewIndicatorsPartsFill}"   
        
                                     Stretch="Fill"   
        
                                     Width="4"   
        
                                     Height="4"   
        
                                     Data="M0,0 L11,0 11,1 10,1 10,2 9,2 9,3 8,3 8,3.9999999 7,3.9999999 7,12 4,12 4,3.9999999 3.0000001,3.9999999 3.0000001,3 2,3 2,2 1,2 1,1 0,1 z"/>  
        
                                <Grid Width="11"   
        
                                      Height="12"   
        
                                      Visibility="{TemplateBinding FilteringIndicatorVisibility}">  
        
                                    <Path Fill="{StaticResource DistinctFilterActiveFunnelFill}"   
        
                                          Stretch="Fill"   
        
                                          Data="M0,0 L1,0 2,0 3,0 4,0 5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0 z"   
        
                                          Margin="3.016,1.016,2.984,0"   
        
                                          VerticalAlignment="Top"   
        
                                          Height="3"   
        
                                          RenderTransformOrigin="0.5,0.5">  
        
                                        <Path.RenderTransform> 
        
                                            <TransformGroup> 
        
                                                <ScaleTransform ScaleX="1" ScaleY="1"/>  
        
                                                <SkewTransform AngleX="0" AngleY="0"/>  
        
                                                <RotateTransform Angle="0"/>  
        
                                                <TranslateTransform X="0" Y="0"/>  
        
                                            </TransformGroup> 
        
                                        </Path.RenderTransform> 
        
                                    </Path> 
        
                                    <Path Fill="{StaticResource DistinctFilterFunnelFill}"   
        
                                          Stretch="Fill"   
        
                                          Data="M2.9999999,0.99999994 L2.9999999,2 3.9999999,2 3.9999999,3 4.9999999,3 4.9999999,4 5.9999999,4 5.9999999,3 6.9999999,3 6.9999999,2 7.9999999,2 7.9999999,0.99999994 6.9999999,0.99999994 5.9999999,0.99999994 4.9999999,0.99999994 3.9999999,0.99999994 z M0,0 L11,0 11,0.99999994 9.9999999,0.99999994 9.9999999,2 8.9999999,2 8.9999999,3 7.9999999,3 7.9999999,4 6.9999999,4 6.9999999,12 3.9999999,12 3.9999999,4 2.9999999,4 2.9999999,3 1.9999999,3 1.9999999,2 0.99999994,2 0.99999994,0.99999994 0,0.99999994 z"/>  
        
                                </Grid> 
        
                            </Grid> 
        
                        </ToggleButton> 
        
                        <Popup x:Name="PART_DropDownPopup">  
        
                            <Border BorderThickness="1" BorderBrush="#FF8A929E" Padding="5" Background="#FFDFE2E5">  
        
                                <StackPanel Width="200">  
        
                                    <Button x:Name="PART_ClearFilterButton" Margin="0,2,0,2" 
        
                                                                  telerik:LocalizationManager.ResourceKey="GridViewClearFilter"  /> 
        
                                    <StackPanel x:Name="PART_DistinctFilter">  
        
                                        <CheckBox x:Name="PART_SelectAllCheckBox" Margin="0,2,0,2" 
        
                                                                  telerik:LocalizationManager.ResourceKey="GridViewFilterSelectAll"  /> 
        
                                         <Border BorderBrush="#FFB3B3B3" BorderThickness="1,1,1,1" Padding="2" CornerRadius="2">  
        
                                            <ScrollViewer HorizontalScrollBarVisibility="Hidden" 
        
                                                          MaxHeight="250" 
        
                                                          telerik:ScrollViewerExtensions.EnableMouseWheel="False">  
        
                                                <!----> 
        
                                                <twcg:DistinctValuesList x:Name="PART_DistinctValuesList" 
        
                                                                         DataContext="{TemplateBinding FilterDescription}" 
        
                                                                         ItemsSource="{Binding DistinctValues}"  > 
        
                                                    <twcg:DistinctValuesList.ItemContainerStyle> 
        
                                                        <Style TargetType="twcg:CheckBoxItem">  
        
                                                            <Setter Property="Template">  
        
                                                                <Setter.Value> 
        
                                                                    <ControlTemplate TargetType="twcg:CheckBoxItem">  
        
                                                                        <Grid> 
        
                                                                            <CheckBox x:Name="Check" VerticalContentAlignment="Center"   
        
                                                                                                                  IsChecked="{TemplateBinding IsSelected}" 
        
                                                                                                                  DataContext="{TemplateBinding Content}" 
        
                                                                                                                  Content="{Binding ConvertedValue}"  /> 
        
                                                                        </Grid> 
        
                                                                    </ControlTemplate> 
        
                                                                </Setter.Value> 
        
                                                            </Setter> 
        
                                                        </Style> 
        
                                                    </twcg:DistinctValuesList.ItemContainerStyle> 
        
                                                </twcg:DistinctValuesList> 
        
                                            </ScrollViewer> 
        
                                        </Border> 
        
                                    </StackPanel> 
        
                                    <StackPanel Width="200" DataContext="{TemplateBinding FilterDescription}" Margin="0,2,0,2">  
        
                                        <StackPanel.Resources> 
        
                                            <twcg:FilterOperatorConverter x:Key="FilterOperatorConverter" /> 
        
                                            <DataTemplate x:Key="ActionTemplate">  
        
                                                <TextBlock Text="{Binding Converter={StaticResource FilterOperatorConverter}}" /> 
        
                                            </DataTemplate> 
        
                                        </StackPanel.Resources> 
        
                                        <TextBlock telerik:LocalizationManager.ResourceKey="GridViewFilterShowRowsWithValueThat" Margin="0,2,0,0" /> 
        
                                        <twci:RadComboBox   
        
                                                    x:Name="PART_Filter1ComboBox" Margin="0,2,0,2"   
        
                                                                        ItemTemplate="{StaticResource ActionTemplate}"   
        
                                                                        ItemsSource="{Binding AvailableActions}" 
        
                                                                        SelectedItem="{Binding Filter1.Operator, Mode=OneWay}" /> 
        
                                        <TextBox x:Name="PART_Filter1TextBox" Text="{Binding Filter1.Value, Mode=OneWay}" Margin="0,2,0,2" 
        
                                                                        Height="21" /> 
        
                                        <TextBlock telerik:LocalizationManager.ResourceKey="GridViewFilterAnd" Margin="0,2,0,0" /> 
        
                                        <twci:RadComboBox x:Name="PART_Filter2ComboBox"   
        
                                                          Margin="0,2,0,2"   
        
                                                          ItemTemplate="{StaticResource ActionTemplate}" 
        
                                                          ItemsSource="{Binding AvailableActions}" 
        
                                                          SelectedItem="{Binding Filter2.Operator, Mode=OneWay}" /> 
        
                                        <TextBox x:Name="PART_Filter2TextBox"   
        
                                                 Text="{Binding Filter2.Value, Mode=OneWay}"   
        
                                                 Margin="0,2,0,2"   
        
                                                 Height="21" /> 
        
                                    </StackPanel> 
        
                                    <Button x:Name="PART_ApplyFilterButton" telerik:LocalizationManager.ResourceKey="GridViewFilter"  /> 
        
                                </StackPanel> 
        
                            </Border> 
        
                        </Popup> 
        
                    </Grid> 
        
                </ControlTemplate> 
        
                <Style TargetType="twcg:FilteringDropDown">  
        
                    <Setter Property="Template" Value="{StaticResource DistinctFilterControlTemplate}"/>  
        
                    <Setter Property="Foreground" Value="{StaticResource GridViewForeground}" /> 
        
                    <Setter Property="FontWeight" Value="Normal" /> 
        
                </Style>
Above is the style I found to change the style of the toggle button on the GridHeaderRow. I have mad some changes to this template, but when I run the grid, the changes are not applied. I know I'm missing something simple, but could you post a code snippet showing my how to change the background, fontsize, RowHeight and toggleButton....

thanks...
1 Answer, 1 is accepted

answered on 28 Aug 2009, 09:17 AM
ticketid-237703-restylefilteringdropdown.zip
Hello jbaird,

You will need to define a Style for the GridViewHeaderCell. Then modify the GridViewHeaderCellTemplate. You can do any changes inside the template or in the HeaderCellStyle if you want to change the appearance of the header cell.

Inside the GridViewHeaderCellTemplate you will find the FilteringDropDown. In case you want to modify the FilteringDropDown as well you should change its template to use the one you have created. This should do the job. I have prepared a small sample project that paints the toggle button in Red. You can change anything else in a way that you desire.

Please, take a look at the sample project and let me know if you have any other questions.

Regards,
Ross
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.