加载图像时如何获得黑色背景? [英] 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" />

但由于某种原因，背景显示为白色.图像加载后显示完美，但我希望加载的那 1 秒是黑色，而不是白色.

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??

推荐答案

我尝试从后台加载图像，但没有成功.我尝试加载图像并使用动画从 0 到大的动画，但这并没有真正起作用，您必须使用固定宽度.最后，我只是想我应该使用在触发 Image.Loaded 事件时触发的故事板来更改可见性.

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.

在工作解决方案中，在 Image.Loaded 事件触发后 0.1 秒，保存图像的网格的可见性将从折叠变为可见..您可以通过将MG"Grid 的默认可见性更改为 Hidden 或 Visible 来证明这是有效的，并注意到该窗口的白色持续时间比设置为 Collapsed 时更长.>

工作 XAML

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.

<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.

这篇关于加载图像时如何获得黑色背景?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！