How to display an image on start of a wpf app ?

Question

Hi I have a wpf application in mvvm pattern. In main view, I have few links to other views. But before displaying the contents(that is ... the links) in main view, I need to display an image in main view ....that means...a welcome image will be displayed first to the user...say for 2 seconds...and then display the actual contents.

Can anybody help me plz ?

Answer 1

The easiest solution would be to add an image to your project and set it's build action to SplashScreen in the property window. This will cause the image to be shown while your application loads.

More details: How to: Add a Splash Screen to a WPF Application (MSDN).

Advantages:

• It's easy and requires zero coding.
• It's shown very early in the start-up process, i.e., while the WPF DLLs are still being loaded.

Disadvantages:

• You have no control over how long the splash screen is displayed. If you need to do that, you can use the SplashScreen Class directly.

Answer 2

SplashScreen Class article on MSDN How to: Add a Splash Screen to a WPF Application

Answer 3

Since you say that you want the image to be displayed in a window instead of a "classic" splash screen, let me add a second answer: In your WPF window, do something like this:

<Window ...>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="mySplash" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0:0:2" Value="{x:Static Visibility.Hidden}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="myContent" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Hidden}" />
                        <DiscreteObjectKeyFrame KeyTime="0:0:2" Value="{x:Static Visibility.Visible}" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Image x:Name="mySplash" ... />
        <Grid x:Name="myContent">
            ...
        </Grid>
    </Grid>
</Window>

This will show your Image for two seconds, then hide it and show the contents of your myContent grid. If you want to have a nice fade from the splash image to the content, you can animate the Opacity property (using a DoubleAnimation) instead of the Visibility property.