UI Manipulation

Bring your application to life. Control visibility, interactivity, and animations dynamically.

1. Show / Hide

Control whether an element is visible. Supports smooth fade and slide animations.

App.xml

<!-- Simple -->
<Show Control="loginPanel"/>
<Hide Control="loadingSpinner"/>

<!-- Animated -->
<Show Control="notification" Animate="true" Effect="SlideDown" Duration="300"/>
<Hide Control="popup" Animate="true" Effect="ZoomOut"/>

Effects: Fade (default), SlideUp, SlideDown, ZoomIn, ZoomOut.

2. Enable / Disable

Control interactivity. Disabled controls are grayed out and cannot be clicked.

<!-- Disable button while processing -->
<Disable Control="btnSubmit"/>

<!-- Re-enable after task -->
<Enable Control="btnSubmit"/>

3. Focus & Toggle

Manage input focus and toggle visibility states.

<!-- Set cursor focus to input -->
<Focus Control="txtUsername"/>

<!-- Switch between Show/Hide automatically -->
<Toggle Control="advancedOptions"/>

4. Animations

Animate any property (Opacity, Scale, Rotate, Translate) smoothly.

Scale

Rotate

Fade

<!-- Rotate 360 degrees -->
<Animate Control="logo" Property="Rotate" To="360" Duration="1000" Repeat="Forever"/>

<!-- Bounce Effect -->
<Animate 
    Control="btnCart" 
    Property="Scale" 
    To="1.2" 
    Duration="300" 
    AutoReverse="true" 
    Easing="BounceEase"/>

Property	Description
`Opacity`	Transparency (0 to 1).
`Scale` / `Zoom`	Resize element (1 = 100%).
`Rotate`	Rotation in degrees.
`TranslateX` / `Y`	Move position in pixels.
`Width` / `Height`	Resize dimensions.

5. Zoom Effects

Convenient shortcuts for scaling elements, useful for hover effects or emphasis.

<!-- Zoom In -->
<ZoomIn Control="cardImage" Scale="1.1" Duration="200"/>

<!-- Zoom Out (Reset) -->
<ZoomOut Control="cardImage" Duration="200"/>