We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to customize the scrollbar style in CheckboxFilterControl of SfDataGrid?

My third question is changing scrollbar style in this popup because I am using fixed size in this popup. And scrollbar is automatically opening if popup have a lot of item. So, it is working okay but I want to change the style of this scrollbar.


1 Reply 1 reply marked as answer

VS Vijayarasan Sivanandham Syncfusion Team November 11, 2022 08:32 PM UTC

To customize the scrollbar style in FilterPopUp can be achieved by customizing the ScrollViewer style in CheckboxFilterControl. Refer to the below code snippet,


<Style TargetType="{x:Type syncfusion:CheckboxFilterControl}">

     <Setter Property="SearchOptionVisibility" Value="Collapsed"/>

     <Setter Property="ItemTemplate" Value="{StaticResource CheckboxFilterControlItemTemplate}"/>

     <Setter Property="Template">

         <Setter.Value>

             <ControlTemplate TargetType="{x:Type syncfusion:CheckboxFilterControl}">

....………………..

………………….

………………….

<ItemsControl x:Name="PART_ItemsControl"

                                                          Height="{TemplateBinding Height}"

                                                          HorizontalAlignment="Stretch"

                                                          VerticalAlignment="Stretch"

                                                          IsTabStop="false"

                                                          HorizontalContentAlignment="Stretch"

                                                          VerticalContentAlignment="Stretch"

                                                          ItemTemplate="{TemplateBinding ItemTemplate}"

                                                          ItemsSource="{TemplateBinding ItemsSource}"

                                                          KeyboardNavigation.TabNavigation="Continue"

                                                          Visibility="{Binding IsItemSourceLoaded,

                                                                               RelativeSource={RelativeSource TemplatedParent},

                                                                               Converter={StaticResource ResourceKey=boolToVisiblityConverter}}">

                                                    ....………………..

                                                                                                                    ..………………….

                                                                                                                    ……………………

                                                                    <ScrollViewer HorizontalAlignment="Stretch" 

                                                                                  Style="{DynamicResource ScrollViewerStyle1}"

                                                                              CanContentScroll="True"

                                                                              PanningMode="Both"                                                                                 

                                                                              HorizontalScrollBarVisibility="Auto"

                                                                              Padding="2"

                                                                              SnapsToDevicePixels="true"

                                                                              VerticalScrollBarVisibility="Auto">                                                                       

                                                                        <ItemsPresenter x:Name="PART_ItemsPresenter"

                                                                                    Margin="{Binding ActualHeight,

                                                                          ElementName=PART_CheckBox, UpdateSourceTrigger=PropertyChanged,

                                                                                                     Converter={StaticResource heightToMarginConverter}}"

                                                                                    ClipToBounds="True"

                                                                                    Focusable="False" />

                                                                    </ScrollViewer>

                                                     ....………………..

                                                     ..………………….

                                                     ……………………

<Style>

 

 

<!-- Customize the style for ScrollViewer -->

<Style x:Key="ScrollViewerStyle1" TargetType="{x:Type ScrollViewer}">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type ScrollViewer}">

                        <Grid x:Name="Grid" Background="{TemplateBinding Background}">

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="*"/>

                                <ColumnDefinition Width="Auto"/>

                            </Grid.ColumnDefinitions>

                            <Grid.RowDefinitions>

                                <RowDefinition Height="*"/>

                                <RowDefinition Height="Auto"/>

                            </Grid.RowDefinitions>

                            <Rectangle x:Name="Corner" Grid.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/>

                            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanHorizontallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" CanVerticallyScroll="False" Grid.Column="0" Content="{TemplateBinding Content}" CanContentScroll="{TemplateBinding CanContentScroll}" Margin="{TemplateBinding Padding}" Grid.Row="0"/>

                            <ScrollBar x:Name="PART_VerticalScrollBar"  AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>

                            <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

            <Style.Triggers>

                <Trigger Property="IsEnabled" Value="false">

                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>

                </Trigger>

            </Style.Triggers>

</Style>


Find the sample in the attachment.


If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Attachment: Sample_ecb9fd44.zip

Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon