Click here to Skip to main content
15,908,768 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
i want to change the style of listbox's scrollbar.
how do i modify listbox's scrollbar to white color and transparency background?
if possible provide some example.

Thanks,
Posted

1 solution

i found solution myself

<style x:key="ScrollThumbs" targettype="{x:Type Thumb}" xmlns:x="#unknown">  
            <setter property="Stylus.IsFlicksEnabled" value="false"></setter>
            <setter property="Foreground" value="#8C8C8C"></setter>
            <setter property="Background" value="Transparent"></setter>
            <setter property="Width" value="8"></setter>
            <setter property="Template">
                <setter.value>
                    <controltemplate targettype="{x:Type ScrollBar}">
                        <grid x:name="GridRoot" width="15" background="{TemplateBinding Background}">
                            <grid.rowdefinitions>
                                <rowdefinition height="0.00001*"></rowdefinition>
                            </grid.rowdefinitions>

                            <track x:name="PART_Track" grid.row="0" isdirectionreversed="true" focusable="false">
                                <track.thumb>
                                    <thumb x:name="Thumb" background="{TemplateBinding Foreground}" style="{DynamicResource ScrollThumbs}"></thumb>
                                </track.thumb>
                                <track.increaserepeatbutton>
                                    <repeatbutton x:name="PageUp" command="ScrollBar.PageDownCommand" opacity="0" focusable="false"></repeatbutton>
                                </track.increaserepeatbutton>
                                <track.decreaserepeatbutton>
                                    <repeatbutton x:name="PageDown" command="ScrollBar.PageUpCommand" opacity="0" focusable="false"></repeatbutton>
                                </track.decreaserepeatbutton>
                            </track>
                        </grid>

                        <controltemplate.triggers>
                            <trigger sourcename="Thumb" property="IsMouseOver" value="true">
                                <setter value="{DynamicResource ButtonSelectBrush}" targetname="Thumb" property="Background"></setter>
                            </trigger>
                            <trigger sourcename="Thumb" property="IsDragging" value="true">
                                <setter value="{DynamicResource DarkBrush}" targetname="Thumb" property="Background"></setter>
                            </trigger>

                            <trigger property="IsEnabled" value="false">
                                <setter targetname="Thumb" property="Visibility" value="Collapsed"></setter>
                            </trigger>
                            <trigger property="Orientation" value="Horizontal">
                                <setter targetname="GridRoot" property="LayoutTransform">
                                    <setter.value>
                                        <rotatetransform angle="-90"></rotatetransform>
                                    </setter.value>
                                </setter>
                                <setter targetname="PART_Track" property="LayoutTransform">
                                    <setter.value>
                                        <rotatetransform angle="-90"></rotatetransform>
                                    </setter.value>
                                </setter>
                                <setter property="Width" value="Auto"></setter>
                                <setter property="Height" value="8"></setter>
                                <setter targetname="Thumb" property="Tag" value="Horizontal"></setter>
                                <setter targetname="PageDown" property="Command" value="ScrollBar.PageLeftCommand"></setter>
                                <setter targetname="PageUp" property="Command" value="ScrollBar.PageRightCommand"></setter>
                            </trigger>
                        </controltemplate.triggers>
                    </controltemplate>
                </setter.value>
            </setter>
        </style>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900