Siticone Pips Pager

The SiticonePipsPager is a sleek, modern navigation indicator control designed for paged interfaces. Often used in conjunction with image carousels, onboarding wizards, or slide views, it displays a series of dots ("pips") representing pages. It features smooth animations, pulsing effects for the active page, and extensive customization for shape and color.

Core Behavior

Properties controlling the number of pages, current selection, and interaction logic.

Property	Type	Description & Usage Example
`NumberOfPages`	int	pager.NumberOfPages = 5; The total count of pages (dots) to display. Must be greater than 0.
`SelectedPage`	int	pager.SelectedPage = 2; The zero-based index of the currently active page. Changing this triggers the selection animation.
`Orientation`	Orientation	pager.Orientation = Orientation.Vertical; Determines if the pips are laid out horizontally (default) or vertically.

Styling & Layout

Customize the visual appearance of the pips to match your application theme.

Property	Type	Description & Usage Example
`PipColor`	Color	pager.PipColor = Color.Gray; The color of inactive (unselected) pips.
`SelectedPipColor`	Color	pager.SelectedPipColor = Color.DodgerBlue; The color of the currently active pip.
`PipSize`	int	pager.PipSize = 12; The diameter (or width/height) of each pip in pixels.
`PipSpacing`	int	pager.PipSpacing = 20; The distance in pixels between the centers of adjacent pips.
`PipStyle`	Enum	pager.PipStyle = PipStyle.Square; The shape of the pips. Options: `Circle`, `Square`.

Animation Effects

Control the visual feedback animations that occur during selection.

Property	Type	Description & Usage Example
`EnableSelectionPulseEffect`	bool	pager.EnableSelectionPulseEffect = true; If true, the selected pip emits a continuous, subtle "breathing" ring animation to draw attention.

Events

Event	Description
`SelectedPageChanging`	Fired before the page changes. Includes `CancelEventArgs` to prevent the change. Args: `CurrentPage`, `NewPage`.
`SelectedPageChanged`	Fired after the selected page index has been updated. Args: `PreviousPage`, `NewPage`.
`PipClicked`	Fired when the user manually clicks on a specific pip. Args: `ClickedPipIndex`, `Button`, `Location`.

Designer Support

The control includes comprehensive design-time support via Smart Tags. Click the arrow on the control to access:

Quick Setup: Adjust page count and selection instantly.
Theme Presets: Apply built-in styles like "Dark", "Material", "Neon", etc. with one click.
Copy/Paste Settings: Easily duplicate the visual style to other pager controls in your project.

Detailed Usage Examples

Example 1: Linking to a SlideView

This is the most common use case: synchronizing the pager with a container that holds the actual pages.

C# - Sync Logic

private void InitializePager()
{
                // Configure Pager
    siticonePipsPager1.NumberOfPages = siticoneSlideView1.Pages.Count;
    siticonePipsPager1.PipColor = Color.Gray;
    siticonePipsPager1.SelectedPipColor = Color.DodgerBlue;
    
                // 1. Update SlideView when Pager is clicked
    siticonePipsPager1.PipClicked += (s, e) => 
    {
        siticoneSlideView1.GoToPage(e.ClickedPipIndex);
    };

                // 2. Update Pager when SlideView changes (e.g. via buttons or swipe)
    siticoneSlideView1.PageChanged += (s, e) => 
    {
        siticonePipsPager1.SelectedPage = e.NewPageIndex;
    };
}

Example 2: Vertical Timeline Indicator

Using the pager as a vertical step indicator for a wizard or timeline.

C# - Vertical Setup

private void SetupTimeline()
{
    siticonePipsPager1.Orientation = Orientation.Vertical;
    siticonePipsPager1.NumberOfPages = 4;
    
                // Styling for a "Timeline" look
    siticonePipsPager1.PipStyle = PipStyle.Square;
    siticonePipsPager1.PipSize = 14;
    siticonePipsPager1.PipSpacing = 40; // More space between steps
    
                // Colors
    siticonePipsPager1.PipColor = Color.FromArgb(220, 220, 220);
    siticonePipsPager1.SelectedPipColor = Color.SeaGreen;
}

Example 3: Custom Animation Theme

Applying a specific visual style programmatically (e.g., "Neon" theme).

C# - Neon Theme

private void ApplyNeonTheme()
{
    siticonePipsPager1.PipColor = Color.FromArgb(50, 50, 50);
    siticonePipsPager1.SelectedPipColor = Color.Cyan;
    
                // Enable the glowing ring effect
    siticonePipsPager1.EnableSelectionPulseEffect = true;
    
                // Adjust sizes
    siticonePipsPager1.PipSize = 8;
    siticonePipsPager1.PipSpacing = 15;
}