Forces the content (by scaling) to fit inside the available space.
<Viewbox> <Rectangle Color="#808" Width="200" Height="100" /> </Viewbox>
This will maintain its aspect ratio of 2:1 while stretching the Rectangle to be the size of the Viewbox.
You can set which directions you want the content to scale by setting the StretchDirection-property:
Both- Allow both up- and downscaling
UpOnly- Only upscale contents
DownOnly- Only downscale contents
Note that any other setting than
DownOnly might create pixel artifacts, as the Viewbox performs a bitmap stretch of its contents.
You can also set the
StretchMode for the contents, which defaults to
- Fuse.Controls 1.11.2
Interface of Viewbox
GetNaturalContentSize : float2 uno
StretchMode : StretchMode ux
Creates a new Viewbox
Inherited from ContentControl
Inherited from Control
Appearance : object uno
Background : Brush ux
CreateNativeView : IView uno
GraphicsVisual : Visual uno
NativeView : IView uno
Inherited from Element
ActualAnchor : float2 uno
ActualPosition : float2 uno
ActualSize : float2 uno
The Alignment of the
Determines how the aspect ratio is maintained in a situation when it violates the min or max sizing constraints.
BoxSizing : BoxSizingMode ux
The manner in which the size and position of the element is calculated.
CachingMode : CachingMode ux
CalcRenderBounds : VisualBounds uno
ClipToBounds : bool ux
Clips the child elements to the bounds of this element visually.
HitTestMode : HitTestMode ux
Specifies how hit tests should be performed on this element.
IsPointInside(float2) : bool uno
LimitHeight : Size ux
The height limit for an element using
LimitWidth : Size ux
The width limit for an element using
TreeRenderer : ITreeRenderer uno
Visibility : Visibility ux
The Visibility of the
Inherited from Visual
AbsoluteViewportOrigin : float2 uno
AbsoluteZoom : float uno
Begins removing a given node, playing all RemovedAnimations before actual removal.
Begins removing a given visual, playing all RemovedAnimations before actual removal.
Requests that this visual be brought into the visible are of the screen. Typically a containing
ScrollView will scroll to ensure it is visible.
Brings the given child to the front of the Z-order. In UX markup, use the BringToFront trigger action instead.
ChildCount : int uno
The number of child nodes of this visual.
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.
FindTemplate(string) : Template uno
FindViewport : IViewport uno
FirstChild<T> : T uno
FirstVisualChild : Visual uno
GetVisualChild(int) : Visual uno
GetZOrderChild(int) : Visual uno
HasChildren : bool uno
HasPendingRemove : bool uno
HasVisualChildren : bool uno
Whether this visual has any visual child nodes.
HitTestBounds : VisualBounds uno
IfSnap(float2) : float2 uno
IfSnapDown(float2) : float2 uno
IfSnapUp(float2) : float2 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.
Indicates the composition of the visual has changed, but that the visual drawing itself is still valid (for example a position change).
IsContextEnabled : bool uno
Whether this node is in an enabled context.
The context is disabled if one of the ancestor nodes have IsEnabled set to
IsInteracting : bool uno
IsLocalVisible : bool uno
Returns whether this visual is visible without concern for whether an ancestor visual is hidden or collapsed.
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.
LastChild<T> : T uno
LastVisualChild : Visual uno
The layer this visual belongs to in the Parent container.
LayoutRole : LayoutRole ux
Describes how this visual participates in layout.
LocalBounds : Box uno
LocalToParent(float2) : float2 uno
Converts a coordinate from the local space into the parent space.
LocalTransform : float4x4 uno
OnInvalidateRenderBounds : bool uno
Remove(Node) : bool uno
The list of resources defined at this node.
Sends the given child to the back of the Z-order. In UX markup, use the SendToBack trigger action instead.
Snap(float2) : float2 uno
SnapDown(float2) : float2 uno
SnapToPixels : bool ux
Whether to snap the result of layout of this visual to physical device pixels.
SnapUp(float2) : float2 uno
Converts a coordinate from the parent space into the local space.
ValidFrameCount : int uno
ViewHandle : ViewHandle uno
VisualChildCount : int uno
The number of child visuals of this visual.
VisualContext : VisualContext uno
WindowToLocal(float2) : float2 uno
WorldPosition : float3 uno
WorldTransform : float4x4 uno
ZOrderChildCount : int uno
Inherited from Node
Bindings : IList of Binding ux
The list of bindings belonging to this 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.
FindByType<T> : T 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.
GetNearestAncestorOfType<T> : T uno
IsRootingCompleted : bool uno
Whether rooting for this node is completed. Returns false if unrooting has started.
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.
Run-time name of the node. This property is automatically set using the ux:Name attribute.
NextSibling<T> : T uno
Returns the next sibling node of the given type.
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.
The parent Visual of this node. Will return null if the node is not rooted.
PreviousSibling<T> : T uno
Returns the next sibling node of the given type.
Properties : Properties uno
A linked list holding data for extrinsic properties.
Remove(Binding) : bool uno
SourceFileName : string ux
SourceLineNumber : int ux
SubtreeToString : string uno
Inherited from PropertyObject
Inherited from object
Equals(object) : bool uno
GetHashCode : int uno
Attached UX Attributes
ColorScheme (attached by Resources) : ColorScheme ux
Specifies how an element is docked while inside a DockPanel
Shorthand for setting the
MatchKey property on the implicit
Each created when using the
Items attached property.
Edge (attached by EdgeNavigation) : NavigationEdge ux
LayoutMaster (attached by LayoutControl) : Element ux
Gained (attached by AttachedFocusMembers) : FocusGainedHandler (object, FocusGainedArgs) ux
Called when a Visual receives input focus.
IsFocusable (attached by Focus) : bool ux
Lost (attached by AttachedFocusMembers) : FocusLostHandler (object, FocusLostArgs) ux
Called when a Visual loses input focus.
Clicked (attached by Clicked) : ClickedHandler (object, ClickedArgs) ux
Tapped (attached by Tapped) : TappedHandler (object, TappedArgs) ux
The index of the column the element occupies while in a Grid. If not set, the grid will place the element in a cell according to its position in the child list.
ColumnSpan (attached by Grid) : int ux
The number of columns this element occupies in a Grid. Defaults to 1.
The index of the row the element occupies while in a Grid. If not set, the grid will place the element in a cell according to its position in the child list.
The number of rows this element occupies in a Grid. Defaults to 1.
KeyPressed (attached by AttachedKeyboardMembers) : KeyPressedHandler (object, KeyPressedArgs) ux
Called when a Visual receives a key press event while having input focus. On mobile devices, keyboard input only applies to physical buttons (such as BackButton), not soft keyboards.
KeyReleased (attached by AttachedKeyboardMembers) : KeyReleasedHandler (object, KeyReleasedArgs) ux
Called when a Visual receives a key release event while having input focus. On mobile devices, keyboard input only applies to physical buttons (such as BackButton), not soft keyboards.
FillPadding (attached by Layout) : bool ux
LayoutMasterMode (attached by LayoutMasterAttr) : LayoutMasterMode ux
Determines how the layout of the master element is used to control the size of this one.
Activated (attached by Activated) : PulseHandler (object, EventArgs) ux
Adds a handler for when the page is Activated
Deactivated (attached by Deactivated) : PulseHandler (object, EventArgs) ux
Adds a handler for when the page is Deactivated
Navigation (attached by Navigation) : IBaseNavigation ux
Page (attached by NavigationPageProperty) : Visual ux
Transition (attached by NavigationControl) : NavigationControlTransition ux
Remove (attached by Navigator) : RemoveType ux
SwipeBack (attached by Navigator) : NavigatorSwipeDirection ux
IsPhysicsWorld (attached by World) : bool ux
Entered (attached by AttachedPointerMembers) : PointerEnteredHandler (object, PointerEnteredArgs) ux
Called when a pointer enters a visual.
Left (attached by AttachedPointerMembers) : PointerLeftHandler (object, PointerLeftArgs) ux
Called when a pointer leaves a visual.
Moved (attached by AttachedPointerMembers) : PointerMovedHandler (object, PointerMovedArgs) ux
Called when a pointer is moved on a visual.
Pressed (attached by AttachedPointerMembers) : PointerPressedHandler (object, PointerPressedArgs) ux
Called when a pointer is pressed on the visual.
Released (attached by AttachedPointerMembers) : PointerReleasedHandler (object, PointerReleasedArgs) ux
Called when a pointer is released on a visual.
WheelMoved (attached by AttachedPointerMembers) : PointerWheelMovedHandler (object, PointerWheelMovedArgs) ux
Called when a pointer wheel is moved on a visual.
Interface for objects that can have a script engine representation