Table of Contents
  • Getting Started
  • EO.Pdf
  • EO.Web
    • Overview
    • Installation & Deployement
    • EO.Web ToolTip
    • EO.Web Rating
    • EO.Web Slider & RangeSlider
    • EO.Web ListBox
    • EO.Web ComboBox
    • EO.Web Captcha
    • EO.Web ASPX To PDF
    • EO.Web Slide
    • EO.Web Flyout
    • EO.Web EditableLabel
    • EO.Web ImageZoom
    • EO.Web Floater
    • EO.Web Downloader
    • EO.Web ColorPicker
    • EO.Web HTML Editor
    • EO.Web File Explorer
    • EO.Web SpellChecker
    • EO.Web Grid
    • EO.Web MaskedEdit
    • EO.Web Splitter
    • EO.Web Menu
    • EO.Web Slide Menu
    • EO.Web TabStrip
    • EO.Web TreeView
    • EO.Web Calendar
    • EO.Web Callback
    • EO.Web MultiPage
    • EO.Web Dialog
    • EO.Web AJAXUploader
    • EO.Web ProgressBar - Free!
    • EO.Web ToolBar - Free!
  • EO.WebBrowser
  • EO.Wpf
  • Common Topics
  • Reference
Table of Contents
Customizing Slide Styles

Style for each section of the slide can be customized independently.

Customize big item style

Customize small item style

Customize navigation panel

Customize Big Item Style

Use the following properties to customize big item panel style:

Property Remark
BigItemWidth The width of the big item panel. This is usually the same as the whole control. This property must be set correctly in order for the Slide control to slide correctly.
BigItemHeight The height of the big item panel. This property must be set correctly in order for the Slide control to slide correctly.
BigItemPanelStyle The style of the big item section. This property is usually used to set the border, padding and background for the big item section.

Customize Small Item Style

The small item panel usually contains more than one small items. In order to use small items, you must set SmallItemWidth, SmallItemHeight and VisibleSmallItemCount correctly first. You can then use the following properties to customize the style of the small item panel and small items:

Property Remark
SmallItemPanelStyle Set the style of the small item panel. Small item panel contains all small items. This property can be used to created border or paddings for the small item section.
SmallItemStyle Set the style for each small item.
SmallItemHoverStyle Set the style for each small item when mouse hovers over the item. This property is used to create the "roll over" effect that would highlight an item when mouse is over the item.

Customize Navigation Panel

Use the following properties to customize navigation panel:

Property Remark
NavPanelStyle Set the style of the navigation panel. This property can be used to customize the border, paddings or background for the navigation panel.
ScrollLeftImageUrl Customize the scroll left image button.
ScrollRightImageUrl Customize the scroll right image button.
NavPanelOnTop By default the navigation panel is displayed at the bottom of the control. Set this property to true to move the navigation panel to the top.
ItemNumberStyle

By default, the navigation panel displays the current item index (1 based) and the total number of items in the form of "x - y of z" or "x of z", where "x" is the first visible small item index, "y" is the last visible small item index and z is the total number of small items. If only one item is visible, then "x of z" is used, otherwise "x - y of z" is used.

Use this property to customize the style of this text.

ItemNumberFormat

Customize the text format if only one item is visible. The default value is {cur_item} of {total_items}. At runtime, {cur_item} is being replaced by the current item index (1 based) and {total_items} is being replaced by the total number of items. For example, if the total number of item is 5 and the current item is 2 and you wish it to be displayed as:

Copy 
Total Items: 5, Current Item: 2

Then you can set this property to

Copy 
Total Items: {total_items}, Current Item: {cur_item}
ItemNumberRangeFormat

Customize the text format if multiple items are visible. The default value is {cur_first_item} - {cur_last_item} of {total_items}. At runtime, {cur_first_item} is being replaced by the first visible item (1 based), {cur_last_item} is being replaced by the last visible item (1 based) and {total_items} is being replaced by the total number of items. For example, if the total number of item is 10 and the current visible items are from 5 to 8 and you wish it to be displayed as:

Copy 
Total Items: 10, First Item: 5, Last Item: 8

Then you can set this property to

Copy 
Total Items: {total_items}, First Item: {cur_first_item}, Last Item: {cur_last_item}