CODEWITHSUNDEEP
wpfxaml
Karmacon
Karmacon

Reputation: 3200

How can I get a black background while images are loading?

Here is an incredibly simple application that loads a window with a Black background.

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Width="1365" Height="768"
        WindowStartupLocation="CenterScreen"
        Background="Black">
</Window>

Works great, but if I add an image control, I expect it to display black for a second until my image has loaded.

<Image Source="pack://application:,,,/assets/images/bg.jpg" />

But for some reason the background is showing white instead. The image displays perfectly fine after it loads, but I want the that 1 second of loading to be BLACK, not white.

How can I display a black background while my images are loading??

Upvotes: 3

Views: 201

Answers (1)

Kcvin
Kcvin

Reputation: 5163

I tried to load the image from the background, that didn't work. I tried to load the image and use animations to animation from 0 to large, but that didn't really work and you would have to use a fixed width. Finally, I just figured I'd change the visibility using a storyboard that's fired when the Image.Loaded event is fired.

In the working solution, the visibility of the Grid holding the image will go from Collapsed to Visible 0.1 seconds after the Image.Loaded event fires. You can prove that this works by changing the default visibility of the "MG" Grid to Hidden or Visible and notice that the window is White for a longer period of time than when its sets to Collapsed.

Working XAML

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Test"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="350"
        Width="525"
        Background="Black">
    <Grid x:Name="MG" Background="Black" Visibility="Collapsed">
        <Image Source="pack://application:,,,/assets/images/bg.jpg">
            <Image.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0:0:0.1"
                                                               Storyboard.TargetName="MG"
                                                               Storyboard.TargetProperty="Visibility">
                                    <ObjectAnimationUsingKeyFrames.KeyFrames>
                                        <DiscreteObjectKeyFrame>
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames.KeyFrames>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Image.Triggers>
        </Image>
    </Grid>
</Window>

Note: You may have to adjust the timing depending on how big the file size is of the image you're rendering.

Upvotes: 5

Related Questions