DXSplashScreen and LoadingDecorator

Splash Screen is a view to be displayed while users wait for load operations to complete. While the splash screen view is in the foreground, the loading of required data, resources, libraries and other initialization operations can complete.

The standard approach

The System.Windows.SplashScreen is the standard class for displaying a splash screen. However, its functionality is limited to only presenting images — for instance:

new SplashScreen(@"SplashScreen\Logo.png").Show(true);

DXSplashScreen

It’s usually necessary to show a complex splash screen view with several images, a progress bar and other elements. These can be done by creating a separate window with the splash screen content. However, introducing a new window also requires running its operations in a separate thread. This functionality is built-in to the DXSplashScreen class.

With the DXSplashScreen, you can display any custom UserControl in your splash screen.

DevExpress Template Gallery provides a predefined template, which you can use as the basis of your own splash screen.

This template has the following XAML:

<UserControl ... d:DataContext="{x:Static dx:SplashScreenViewModel.DesignTimeData}">
    <Grid Margin="20" Width="430">
        <Grid.Effect>
            <DropShadowEffect ShadowDepth="1" Direction="-90" 
                BlurRadius="10" Opacity="0.25" />
        </Grid.Effect>
        <Border Background="Black" CornerRadius="3" Opacity="0.25" />
        <Border CornerRadius="2" Margin="1" Background="White" />
        <StackPanel Orientation="Vertical" Margin="12">
            <Image Source="SplashScreenBackground.png" Stretch="None"/>
            <TextBlock TextWrapping="Wrap" Text="{Binding State}" 
                Margin="12,12,12,0" Foreground="#FF2D2D2D" />
            <ProgressBar Height="14" Margin="12" IsIndeterminate="{Binding IsIndeterminate}"
                Value="{Binding Progress}" Maximum="{Binding MaxProgress}" />
        </StackPanel>
    </Grid>
</UserControl>

… With the following design:

You can use the DXSplashScreen.Show<T> method to display the splash screen — where the T type parameter is of the type of your splash screen.

When the Show method is called, the DXSplashScreen class creates a predefined view model of the SplashScreenViewModel type and assigns this view model to the splash screen view. The SplashScreenViewModel class has several properties that you can use in your splash screen with bindings.

public class SplashScreenViewModel : DevExpress.Mvvm.ViewModelBase {
    public bool IsIndeterminate { get; set; }
    public double MaxProgress { get; set; }
    public double Progress { get; set; }
    public object State { get; set; }
}

The SplashScreenViewModel properties can be set via methods provided by the DXSplashScreen class. The SplashScreenViewModel.IsIndeterminate property is initially set to True and later set to False when the Progress or MaxProgress property is set. To set the Progress and MaxProgress properties, use the DXSplashScreen.Progress method:

public static void Progress(double value, double maxValue = 100);

The SplashScreenViewModel.State property can be used to inject your custom data into the splash screen. For instance, you can pass a secondary view model to the splash screen by calling the DXSplashScreen.SetState method.

public static void SetState(object state);

To close the splash screen, call the DXSplashScreen.Close method.

DXSplashScreen does not support the simultaneous display of multiple splash screens. If you need to work with several splash screens, you can check whether any splash screens are already active with the DXSplashScreen.IsActive property.

ISplashScreenService

Avoid directly calling the DXSplashScreen methods from a view model, because this usage prevents writing unit tests. To solve this task, you can use DXSplashScreenService that implements the ISplashScreenService interface.

For instance:

<UserControl x:Class="DXSplashScreenExample.Views.MainView"
             DataContext="{dxmvvm:ViewModelSource Type=ViewModels:MainViewModel}" ...>
    <dxmvvm:Interaction.Behaviors>
        <dx:DXSplashScreenService SplashScreenType="local:SplashScreenView"/>
    </dxmvvm:Interaction.Behaviors>
    <Grid>
        <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button Content="Show Splash Screen" Command="{Binding ShowSplashScreenCommand}" />
            <Button Content="Close Splash Screen" Command="{Binding CloseSplashScreenCommand}" />
        </StackPanel>
    </Grid>
</UserControl>

[POCOViewModel]
public class MainViewModel {
    public void ShowSplashScreen() {
        this.GetService<ISplashScreenService>().ShowSplashScreen();
    }
    public void CloseSplashScreen() {
        this.GetService<ISplashScreenService>().HideSplashScreen();
    }
}

DXSplashScreenService capabilities

DXSplashScreenService implements the ISplashScreenService interface, which provides all the capabilities of the DXSplashScreen class.

public interface ISplashScreenService {
    bool IsSplashScreenActive { get; }
    void HideSplashScreen();
    void SetSplashScreenProgress(double progress, double maxProgress);
    void SetSplashScreenState(object state);
    void ShowSplashScreen(string documentType);
}

In addition, the DXSplashScreenService class provides properties that can be used in place of calling the SetSplashScreenProgress and SetSplashScreenState methods.

<dxmvvm:Interaction.Behaviors>
    <dx:DXSplashScreenService SplashScreenType="local:SplashScreenView" 
                              Progress="{Binding Progress}" MaxProgress="{Binding MaxProgress}"
                              State="{Binding SplashScreenViewModel}"/>
</dxmvvm:Interaction.Behaviors>

It’s also possible to show a splash screen automatically, whenever a view is loading. To enable this functionality, set the DXSplashScreenService.ShowSplashScreenOnLoading property to True.

LoadingDecorator

LoadingDecorator is a container control for displaying long-loading content. This component is used in one of our Sales Dashboard demo. If you run this demo for the first time, you will see a splash screen. This splash screen view is shown while the database is being initialized for the first time. On subsequent runs of the Sales Dashboard, you will see that the navigation panel in the main form appears almost immediately. Meanwhile, the main view on the right hand side will display the LoadingDecorator loading indicator.

When the main view is fully loaded, the loading indicator collapses and the main view becomes visible.

You can add the LoadingDecorator in XAML. For instance:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Views:NavigationView/>
    <dx:LoadingDecorator Grid.Column="1">
        <Views:MainView/>
    </dx:LoadingDecorator>
</Grid>

LoadingDecorator capabilities

• Supports a manual mode for the visibility of the loading indicator. The mode is enabled when the LoadingDecorator.IsSplashScreenShown property is set to True or False (by default the property equals Null and the manual mode is disabled).
• Blocks user input in the main window. To disable this behavior, simply set the LoadingDecorator.LockWidow property to False.
• The loading indicator can be displayed at the center of the main window, or at the center of the LoadingDecorator control. Set the LoadingDecorator.SplashScreenLocation property to control this feature.
• LoadingDecorator can show an indicator with a glow effect.

Free DevExpress Products - Get Your Copy Today