A scrolling container with a header image.

MediaScroller requires you to provide a Media element. This is the main image that will be displayed above the rest of the content. Note that we use ux:Binding here instead of ux:Template. This is because Media is a dependency, and must always be provided.

<Alive.MediaScroller>
    <Image ux:Binding="Media" File="image.jpg" Height="250" />

    <!-- content goes here -->
</Alive.MediaScroller>

Any element that is not a ux:Template or ux:Dependency is placed in a StackPanel that serves as the main content of the inner ScrollView.

<Alive.MediaScroller>
    <Image ux:Binding="Media" File="image.jpg" Height="250" />

    <Alive.Body Value="children" />
    <Alive.Body Value="will" />
    <Alive.Body Value="be" />
    <Alive.Body Value="stacked" />
    <Alive.Body Value="vertically" />
</Alive.MediaScroller>

When the user scrolls downwards, the Media element shrinks with the scrolling motion, until it has the same height as TopBar.

<Alive.MediaScroller>
    <Panel ux:Template="TopBar">
        <Alive.Body Alignment="Center" Margin="0,20">
            This is the title!
        </Alive.Body>
    </Panel>
    <Image ux:Binding="Media" File="image.jpg" Height="250" />
</Alive.MediaScroller>

You may specify a color to fade in while Media morphs into TopBar using the TopBarColor property.

<Alive.MediaScroller TopBarColor="{Resource Alive.AccentColor}">
    <Panel ux:Template="TopBar" Height="56" />
    <Image ux:Binding="Media" File="image.jpg" Height="250" />
</Alive.MediaScroller>

When the user scrolls above the scrollable area, the Media element will be pixel-stretched in accordance. To avoid this, you may also specfy a MediaOverlay template. This is useful for content with sharp edges (such as text).

<Alive.MediaScroller TopBarColor="{Resource Alive.AccentColor}">
    <Panel ux:Template="MediaOverlay">
        <Alive.Card Margin="20">
            <Alive.ImageFill File="image.jpg" />
        </Alive.Card>
    </Panel>
    <Panel ux:Binding="Media" Color="{Resource Alive.PrimaryBackgroundColor}" />
</Alive.MediaScroller>

MediaOverlay is displayed below the fading colored overlay. You may provide the BottomBar template to display an element on top of this overlay, aligned to bottom of Media.

<Alive.MediaScroller TopBarColor="{Resource Alive.AccentColor}">
    <Panel ux:Template="MediaOverlay">
        <Alive.Card Margin="20">
            <Alive.ImageFill File="image.jpg" />
        </Alive.Card>
    </Panel>
    <Panel ux:Binding="Media" Color="{Resource Alive.PrimaryBackgroundColor}" />
</Alive.MediaScroller>

Location

Namespace
Alive
Package
Fuse.UXKits.Alive 1.11.2

Interface of MediaScroller

Inherited from Container

SubtreeNodes : IList of Node ux

The list of nodes that will be added to the Subtree visual. This is the default property for UX markup children of Container.

Inherited from Panel

Color : float4 ux

The background color of the panel. This property is a shortcut for setting the Background property to a SolidColor brush. Supports being set using a float4 notation, or hexadecimal values(f.ex #FF00AA)

IsFrozen : bool ux

When true the panel is in a frozen state. This means: - layout of the children is blocked - child invalidation does not invalidate this panel - the visual drawing is captured once and used for all future drawing

Inherited from LayoutControl

Inherited from Control

Inherited from Element

ActualPosition : float2 uno

The position of the element, the position of its top-left corner to the top-left corner in the parent.

Anchor : Size2 ux

A point within the element to treat as its "epicenter".

Aspect : float ux

The aspect ratio that an element must fulfill in layout.

Offset : Size2 ux

Offets the position of the element after all other layout has been applied.

Inherited from Visual

bringIntoView() js

Requests that this visual be brought into the visible are of the screen. Typically a containing ScrollView will scroll to ensure it is visible.

Children : IList of Node ux

The children of the visual. All nodes placed inside the visual in UX markup are assigned to this list. The order of Visuals this list determines the order of layout. The Z-order of the children is by default equal to this order, but can be manipulated separately using methods like BringToFront and SendToBack.

InvalidateVisual uno

Indicates the visual for this node has changed. This allows the root-level node to know that it must draw, and any caching that it must invalidate the cache for this node.

InvalidateVisualComposition uno

Indicates the composition of the visual has changed, but that the visual drawing itself is still valid (for example a position change).

IsEnabled : bool ux

Whether this node is currently interactable. Disabled visuals do not receive input focus. However, they can still be visible and block hit test for underlaying objects.

IsLocalVisible : bool uno

Returns whether this visual is visible without concern for whether an ancestor visual is hidden or collapsed.

IsVisible : bool uno

Returns whether this visual is currently visible. Will return false if any of the ancestor visuals are hidden or collapsed. This property can not be used to check whether a visual is hidden because it is occluded by another visual, or is outside the view but otherwise visible.

Parameter : string ux

The parameter data for this visual, encoded as JSON, provided by a router if this visual represents a navigation page.

SnapToPixels : bool ux

Whether to snap the result of layout of this visual to physical device pixels.

ZOffset : float ux

Specifies a Z-Offset, visuals with higher values are in front of other visuals.

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

Implemented Interfaces

IScriptObject uno

Interface for objects that can have a script engine representation