Active while a resource in the surrounding context is loading.

This trigger can be used inside a Video, Image, or Text element.

Example

The following example will display some text while an image resource is loading via URL:

<StackPanel>
    <Image Url="https://upload.wikimedia.org/wikipedia/commons/f/f1/Kitten_and_partial_reflection_in_mirror.jpg">
        <WhileLoading>
            <Change showLoadingText.Value="True" />
        </WhileLoading>
    </Image>

    <WhileTrue ux:Name="showLoadingText">
        <Text>Image is loading...</Text>
    </WhileTrue>
</StackPanel>

<WhileLoading> is equivalent to <WhileBusy Activity="Loading">.

Location

Namespace
Fuse.Triggers
Package
Fuse.Triggers 1.8.0-rc2

Interface of WhileLoading

Inherited from WhileBusy

IsHandled : bool ux

If true then the busy status is blocked from reaching parent nodes.

Inherited from WhileTrigger

BypassSetActive(bool) uno

Call in situations where the bypassing is forced. This should be rare since during rooting the normal bypass mechanism of the trigger will apply.

Invert : bool ux

Inverts the trigger so it will be active when it would normally be inactive, and vice versa.

Inherited from Trigger

BackwardAnimation : TriggerAnimation ux

Specifies an explicit backward animation instead of using the implied backward animation of the animators involved. Be aware that actions are not part of the animation.

CrossFadeDuration : double ux

If there is a transition between forward/backward playback and two timeilnes are being used (implicit or explicit) this specifies the cross-fade time.

Deactivate uno

Deactivates the trigger (target progress of 0).

Pulse uno

Plays the trigger to progress 1 then back to 0.

RequireLayout(Visual) uno

Indicates the trigger is bound to the layout of a visual. This will keep the trigger in Bypass mode until after the first layout of the element is obtained. This is required since layout does not happen in the same root grouping/update phase as the creation of the element, yet not having a layout should qualify as part of the rooting period.

Inherited from NodeGroupBase

Nodes : IList of Node ux

Nodes to add to the Parent when this trigger is any non-deactivated state (Progress > 0)

Inherited from Node

ContextParent : Node uno

The context parent is the semantic parent of this node. It is where non-UI structure should be resolved, like looking for the DataContext, a Navigation, or other semantic item.

FindNodeByName(Selector, Predicate<Node> (Node)) : Node uno

Finds the first node with a given name that satisfies the given acceptor. The serach algorithm works as follows: Nodes in the subtree are matched first, then it matches the nodes in the subtrees ofthe ancestor nodes by turn all the way to the root. If no matching node is found, the function returns null.

IsRootingStarted : bool uno

Whether rooting of this node has started. Note that even if this property returns true, rooting may not yet be completed for the node. See also IsRootingCompleted.

Name : Selector ux

Run-time name of the node. This property is automatically set using the ux:Name attribute.

OnRooted uno

If you override OnRooted you must call base.OnRooted() first in your derived class. No other processing should happen first, otherwise you might end up in an undefined state.

Inherited from PropertyObject

Inherited from object

Attached UX Attributes

GlobalKey (attached by Resource) : string ux

The ux:Global attribute creates a global resource that is accessible everywhere in UX markup.

Implemented Interfaces

IScriptObject uno

Interface for objects that can have a script engine representation

Examples

The following example shows how we can use triggers inside a Video to display an overlay over the video when it is loading, paused, completed, or has failed. It also uses these triggers to display a play button and a pause button only at appropriate times.

<StackPanel>
	<Panel>
		<Panel ux:Name="overlay" Background="Black" Opacity="0">
			<Text ux:Name="overlayText" Color="White" Alignment="Center" />
		</Panel>

		<WhileTrue ux:Name="showOverlay">
			<Change overlay.Opacity="0.5" Duration="0.2" />
		</WhileTrue>

		<Video ux:Name="video" Url="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" >
			<WhilePlaying>
				<Change playButton.Visibility="Hidden" />
				<Change pauseButton.Visibility="Visible" />
			</WhilePlaying>

			<WhileLoading>
				<Change showOverlay.Value="True" />
				<Change overlayText.Value="Loading..." />
			</WhileLoading>

			<WhilePaused>
				<Change showOverlay.Value="True" />
				<Change overlayText.Value="Paused" />
			</WhilePaused>

			<WhileCompleted>
				<Change showOverlay.Value="True" />
				<Change overlayText.Value="Completed" />
			</WhileCompleted>

			<WhileFailed>
				<Change showOverlay.Value="True" />
				<Change overlayText.Value="Error" />
			</WhileFailed>
		</Video>
	</Panel>

	<Grid ColumnCount="2">
		<Button ux:Name="playButton" Text="Play">
			<Clicked>
				<Resume Target="video" />
			</Clicked>
		</Button>
		<Button ux:Name="pauseButton" Text="Pause" Visibility="Hidden">
			<Clicked>
				<Pause Target="video" />
			</Clicked>
		</Button>
	</Grid>
</StackPanel>