WPF custom controls and styles: ScrollViewer and ListBox custom styles

A Objective

Disclaimer: WPF Custom control and style is a series of articles, there are some related, but mostly in accordance with the order from simple to complex, and so on, if there is not understand the place can refer to the previous articles in this series, the end of the article with some links.

The main content of this article: ScrollViewer style and basic style definition; the style definition of the ListBox collection control;

Two ScrollViewer Custom Style

ScrollViewer a basic build that is widely used in various lists and collection controls, look at the effect chart first:

As shown above, ScrollViewer is simply divided into two parts, a horizontal scroll bar, a vertical scroll bar, two styles, templates, functions are basically the same, they are scrollbar. Take the vertical scroll bar for example, break down the diagram:

1: Sliding up the button, with RepeatButton to achieve the function; 2: The upper part of the slider, the function of the same 1, is also a repeatbutton to achieve; 3: The middle can drag the slider, with a thumb to achieve; 4: The lower part of the slider, like the 5 function, slides down, Using a RepeatButton to achieve 5: sliding down the button, with RepeatButton to achieve the function;

The above implementation is a standard vertical slider scrollbar composition, actually can be customized according to requirements, achieve different effects of sliding effect. The style code for the above sections:

    <sys:double x:key= "Scrollbarsize" >12</sys:Double> <!--scrolling on both sides of the button style--> <style x:key= "ScrollBar Button "Targettype=" {x:type RepeatButton} "> <setter property=" Background "value=" Transparent "></setter > <setter property= "foreground" value= "{StaticResource textforeground}" ></Setter> <sette R property= "VerticalAlignment" value= "Center" ></Setter> <setter property= "HorizontalAlignment" Center "></Setter> <setter property=" Width "value=" Auto "></Setter> <setter property
                = "Height" value= "Auto" ></Setter> <setter property= "Template" > <Setter.Value> <controltemplate targettype= "{x:type RepeatButton}" > <textblock x:name= "FIcon" Fo Ntsize= "text=" {templatebinding Local:ControlAttachProperty.FIcon} "margin=" 1 "style=" {S Taticresource FIcon} "/&Gt
                            <ControlTemplate.Triggers> <trigger property= "IsMouseOver" value= "True" >
                        <setter property= "Foreground" value= "{StaticResource Mouseoverforeground}" targetname= "FIcon"/>
                            </Trigger> <trigger property= "ispressed" value= "True" >
                        <setter property= "Foreground" value= "{StaticResource Pressedforeground}" targetname= "FIcon"/>
                            </Trigger> <trigger property= "IsEnabled" value= "false" > 
                    <setter property= "Opacity" value= "0.5" targetname= "FIcon"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </setter.va Lue> </Setter> </Style> <!--scroll bar sliders on both sides of the button style--> <style x:key= "Scrollbartrackbutton"Targettype=" {x:type RepeatButton} "> <setter property=" Background "value=" Transparent "></Setter> <setter property= "Template" > <Setter.Value> <controltemplate targettype= "{x:type RepeatButton}" > <border background= "Transparent" ></Border> ;/controltemplate> </Setter.Value> </Setter> </Style> <!--scroll bar slider style--&G
    T <controltemplate x:key= "Thumbtemplate" targettype= "Thumb" > <Grid> <border x:name= "Bg" Cornerradius= "4" margin= "2" Snapstodevi