Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Slide View

Siticone Slide View

The SiticoneSlideView is a visually rich navigation container designed for presenting content in a paged format. Unlike standard tab controls, it features smooth, high-quality sliding animations to transition between pages (UserControls or Images). It is ideal for image galleries, setup wizards, onboarding screens, and carousel-style interfaces.

Managing Content

You can populate the SlideView with either standard Windows Forms Controls (like UserControls or Panels) or a simple collection of Images.

Property Type Description & Usage Example
Pages List<Control> slideView.Pages.Add(new MyUserControl()); The primary collection for adding interactive content. Each item is treated as a distinct "page".
Images ImageCollection slideView.Images.Add(Properties.Resources.Banner1); A simplified collection for creating image slideshows. Images added here are automatically wrapped in PictureBoxes and added to the Pages collection.
CurrentPageIndex int slideView.CurrentPageIndex = 2; Gets or sets the index of the currently visible page. Setting this property triggers the navigation animation.

Animation & Transitions

Customize the speed, direction, and "feel" of the page transitions.

Property Type Description & Usage Example
AnimationDuration int slideView.AnimationDuration = 700; The time in milliseconds for the transition to complete.
Easing EasingType slideView.Easing = EasingType.EaseOutBack; Controls the acceleration curve. Options include Linear, EaseIn, EaseOut, Bounce, Elastic, etc.
AnimationScale float slideView.AnimationScale = 0.9f; During transition, pages scale down slightly (e.g., 0.9 = 90%) to create a depth effect, then scale back up. Set to 1.0 for a flat slide.
Orientation Orientation slideView.Orientation = Orientation.Vertical; Determines if pages slide horizontally (Left/Right) or vertically (Up/Down).

Built-in "Next" and "Previous" buttons simplify integration, but are fully customizable.

Property Type Description & Usage Example
ShowNavigationButtons bool slideView.ShowNavigationButtons = true; Toggles the visibility of the built-in arrow buttons.
NavigationButtonSize int slideView.NavigationButtonSize = 40; The width/height of the navigation buttons in pixels.
ChevronColor Color slideView.ChevronColor = Color.DarkGray;
NextButton Button slideView.NextButton.BackColor = Color.Red; Access the raw Button control for advanced styling (e.g., background color, flat style).

Layout & Styling

Property Type Description & Usage Example
Padding Padding slideView.Padding = new Padding(50); Adds internal spacing around the page content, useful for centering cards.
PageContentSize int slideView.PageContentSize = 90; Percentage (1-100) of the available area that the page content should occupy.

Public Methods

Programmatic control for custom navigation logic (e.g., "Finish" button).

GoToNext() / GoToPrevious()
// Advances to the next page if available.
slideView.GoToNext();

// Returns to the previous page.
slideView.GoToPrevious();
GoToPage(int index, bool animate)
// Jump directly to a specific page index.
// animate: Set to false to skip the transition effect.
slideView.GoToPage(0, true);

Events

Event Description
PageChanging Fired before navigation begins. Includes PageChangingEventArgs (OldIndex, NewIndex). Set e.Cancel = true to prevent the change (e.g., form validation).
PageChanged Fired after the navigation is complete and the new page is fully visible.
AnimationStarted Fired when the visual transition begins.
AnimationCompleted Fired when the visual transition ends.

Detailed Usage Examples

Example 1: Image Carousel

Quickly creates an image slideshow with custom animation settings.

C# - Carousel
private void InitializeCarousel()
{
                // 1. Add Images
    slideView.Images.Add(Properties.Resources.Slide1);
    slideView.Images.Add(Properties.Resources.Slide2);
    slideView.Images.Add(Properties.Resources.Slide3);
    
                // 2. Configure Animation
    slideView.AnimationDuration = 800;
    slideView.Easing = EasingType.EaseInOutQuart;
    slideView.AnimationScale = 0.8f; // Significant zoom effect
    
                // 3. Styling
    slideView.Padding = new Padding(40);
    slideView.BackColor = Color.FromArgb(30, 30, 30);
}

Example 2: Wizard / Onboarding Flow

Using UserControls as pages for a step-by-step wizard with validation.

C# - Wizard Logic
private void SetupWizard()
{
                // Add UserControls for each step
    slideView.Pages.Add(new WelcomeStepControl());
    slideView.Pages.Add(new AccountInfoControl());
    slideView.Pages.Add(new FinishStepControl());
    
                // Hide default buttons to use custom "Next" button logic
    slideView.ShowNavigationButtons = false;
    
                // Handle validation before changing pages
    slideView.PageChanging += SlideView_PageChanging;
}

private void SlideView_PageChanging(object sender, PageChangingEventArgs e)
{
                // If moving forward from Step 2 (Index 1)
                if (e.PreviousPageIndex == 1 && e.NewPageIndex == 2)
    {
                var step2 = (AccountInfoControl)e.PreviousPage;
                if (!step2.ValidateInput())
        {
                MessageBox.Show("Please fill in all required fields.");
            e.Cancel = true; // Stop navigation
        }
    }
}

private void btnCustomNext_Click(object sender, EventArgs e)
{
    slideView.GoToNext();
}