Virtual Mode

• Oct 29, 2020
• 5 minutes to read

The Image Slider control in the Virtual Mode does not display images from its ImageSlider.Images collection. Instead, each time a new image needs to be displayed, the ImageSlider.GetImage event occurs. Handling this event allows you to pass the required image to the control. In other words, the Virtual Mode is the mode for the upload of dynamic images.

To make an ImageSlider control run in the Virtual Mode, set the ImageSlider.VirtualMode property to true. After that each time an end-user hovers the control, the ImageSlider.CanGetNextPrevImage event is raised. Handling this event enables or disables specific Image Slider navigation buttons. This event receives the CanGetNextPrevImageEventArgs type parameter, which has two properties:

• the CanGetNextPrevImageEventArgs.IsNext property - specifies the image’s sliding direction (true for sliding forward, false for sliding backwards);
• the CanGetNextPrevImageEventArgs.CanGetImage property - specifies whether an image in the current sliding direction can be displayed. If not - a corresponding navigation button will be disabled.

Consider the following example.

C#

private void imageSlider1_CanGetNextPrevImage(object sender, DevExpress.XtraEditors.Controls.CanGetNextPrevImageEventArgs e) {
    if (e.IsNext) e.CanGetImage = (currentImageIndex < 2);
    else e.CanGetImage = (currentImageIndex > 0);
}

VB.NET

Private Sub imageSlider1_CanGetNextPrevImage(ByVal sender As Object, ByVal e As DevExpress.XtraEditors.Controls.CanGetNextPrevImageEventArgs) Handles imageSlider1.CanGetNextPrevImage
    If e.IsNext Then
    e.CanGetImage = (currentImageIndex < 2)
    Else
        e.CanGetImage = (currentImageIndex > 0)
        End If
End Sub

In the code above, the image slider will be able to display a sequence of three images. First, we check the CanGetNextPrevImageEventArgs.IsNext property. If it equals true, we check how many images have already been uploaded. If less than 3 (the custom customImageIndex variable is less than 2), forward image sliding will be allowed. In this case, the ‘Next’ button will be enabled and clicking it will raise the ImageSlider.GetImage event. Otherwise, if the CanGetNextPrevImageEventArgs.IsNext property equals false, the backward sliding will only be available if the currently displayed image is not the very first one (the customImageIndex variable is more than 0). If so, an end-user will be able to click the ‘Previous’ button and the ImageSlider.GetImage event will occur.

The ImageSlider.GetImage event receives the GetImageEventArgs type parameter and has five properties:

• the GetImageEventArgs.Image property - specifies the image that is to be displayed within the Image Slider;
• the GetImageEventArgs.IsStartUp property - gets or sets whether or not the image required is the very first to be uploaded;
• the GetImageEventArgs.IsNext property - returns whether the image query is the result of forward image sliding;
• the GetImageEventArgs.IsPrev property - returns whether the image query is the result of backward image sliding;
• the GetImageEventArgs.CurrentImageUpdated property - determines whether the currently displayed image has changed.
• the GetImageEventArgs.IsFirst property - gets or sets whether or not the first image within the Image Slider needs to be displayed. Equals true when the SliderBase.SlideFirst method is called.
• the GetImageEventArgs.IsLast property - gets or sets whether or not the last image within the Image Slider needs to be displayed. Equals true when the SliderBase.SlideLast method is called.

To display the correct image, check which of the GetImageEventArgs.IsStartUp, GetImageEventArgs.IsNext and GetImageEventArgs.IsPrev properties equals true and assign a required image to the GetImageEventArgs.Image property. Bear in mind that image sliding can be performed not only via navigation buttons, but via dragging the current image to left or right. If you drag the image not far enough, the Image Slider will skip back to the currently displayed image upon releasing. That is why the GetImageEventArgs.CurrentImageUpdated property check is required. Increment/decrement uploaded images count only if the GetImageEventArgs.CurrentImageUpdated property equals true.

See the following code for a complete example of how to implement custom image uploading logic in the Virtual Mode slider.

Example

This example demonstrates the ImageSlider control running in the Virtual Mode.

Form1.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace ImageSlider
{
    public partial class Form1 : Form
    {
        int currentImageIndex = 0;
        Image[] images;

        public Form1()
        {
            this.images = CreateImages();
            InitializeComponent();
        }

        Image[] CreateImages()
        {
            return new Image[]{
                CreateImage(Color.Red),
                CreateImage(Color.Green),
                CreateImage(Color.Blue),
            };
        }

        Image CreateImage(Color color)
        {
            Bitmap bitmap = new Bitmap(100, 100);
            for (int i = 0; i < bitmap.Width; i++)
            {
                for (int j = 0; j < bitmap.Height; j++)
                {
                    bitmap.SetPixel(i, j, color);
                }
            }
            return bitmap;
        }

        private void imageSlider1_CanGetNextPrevImage(object sender, DevExpress.XtraEditors.Controls.CanGetNextPrevImageEventArgs e)
        {
            if (e.IsNext) e.CanGetImage = (currentImageIndex < images.Length - 1);
            else e.CanGetImage = (currentImageIndex > 0);
        }

        private void imageSlider1_GetImage(object sender, DevExpress.XtraEditors.Controls.GetImageEventArgs e)
        {
            if (e.IsStartUp)
            {
                e.Image = images[0];
                return;
            }
            if (e.IsNext)
            {
                e.Image = images[currentImageIndex + 1];
                if (e.CurrentImageUpdated) ++currentImageIndex;
            }
            else if (e.IsPrev)
            {
                e.Image = images[currentImageIndex - 1];
                if (e.CurrentImageUpdated) --currentImageIndex;
            }
        }
    }
}

Form1.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Linq
Imports System.Text
Imports System.Windows.Forms

Namespace ImageSlider
    Public Partial Class Form1
        Inherits Form
        Private currentImageIndex As Integer = 0
        Private images As Image()

        Public Sub New()
            Me.images = CreateImages()
            InitializeComponent()
        End Sub

        Private Function CreateImages() As Image()
            Return New Image(){ CreateImage(Color.Red), CreateImage(Color.Green), CreateImage(Color.Blue) }
        End Function

        Private Function CreateImage(ByVal color As Color) As Image
            Dim bitmap As Bitmap = New Bitmap(100, 100)
            Dim i As Integer = 0
            Do While i < bitmap.Width
                Dim j As Integer = 0
                Do While j < bitmap.Height
                    bitmap.SetPixel(i, j, color)
                    j += 1
                Loop
                i += 1
            Loop
            Return bitmap
        End Function

        Private Sub imageSlider1_CanGetNextPrevImage(ByVal sender As Object, ByVal e As DevExpress.XtraEditors.Controls.CanGetNextPrevImageEventArgs) Handles imageSlider1.CanGetNextPrevImage
            If e.IsNext Then
            e.CanGetImage = (currentImageIndex < images.Length - 1)
            Else
                e.CanGetImage = (currentImageIndex > 0)
            End If
        End Sub

        Private Sub imageSlider1_GetImage(ByVal sender As Object, ByVal e As DevExpress.XtraEditors.Controls.GetImageEventArgs) Handles imageSlider1.GetImage
            If e.IsStartUp Then
                e.Image = images(0)
                Return
            End If
            If e.IsNext Then
                e.Image = images(currentImageIndex + 1)
                If e.CurrentImageUpdated Then
                currentImageIndex += 1
                End If
            ElseIf e.IsPrev Then
                e.Image = images(currentImageIndex - 1)
                If e.CurrentImageUpdated Then
                currentImageIndex -= 1
                End If
            End If
        End Sub
    End Class
End Namespace