Styling & Effects

Styling & Effects

Bring your application to life with native Windows 11 effects, shadows, animations, and themes.

Jump to

1. Themes & Colors

Nimbus makes it easy to switch between Light and Dark modes. Set the theme globally in the <App> tag.

App.xml 
<App Name="My App" Theme="Dark" DarkMode="true">
    <!-- Dark theme is active -->
</App>

You can use standard hex codes or named colors.

FormatExampleDescription
Hex (RGB)#FF0000Solid Red
Hex (ARGB)#80FF000050% Transparent Red
NamedBlueStandard Blue
Resource{Color.Accent}System Accent Color

2. Window Effects

Enable native Windows 10/11 background effects like Mica and Acrylic.

Blur
Acrylic
Mica
<!-- Windows 11 Mica Effect -->
<App Mica="true" Theme="Dark"> ... </App>

<!-- Windows 10 Acrylic Effect -->
<App Acrylic="true" AcrylicOpacity="80"> ... </App>

<!-- Standard Blur -->
<App Blur="true"> ... </App>
info
Note: Mica effect requires Windows 11. On older versions, it gracefully falls back to a solid color.

3. Shadow & Glow

Add depth to your UI with drop shadows and glows. Use the <Shadow> and <Glow> commands.

<Logic>
    <Handler Name="ApplyEffects">
        <!-- Basic Drop Shadow -->
        <Shadow Control="card1" Color="Black" BlurRadius="20" Opacity="0.4"/>
        
        <!-- Neon Glow -->
        <Glow Control="btnAction" Color="#00D4FF" Intensity="15"/>
    </Handler>
</Logic>

4. Animations

Animate properties like Opacity, Scale, and Position using the <Animate> command.

Syntax

<Animate 
    Control="myBox" 
    Property="Scale" 
    To="1.2" 
    Duration="300" 
    Easing="BounceEase"/>

Properties

  • Opacity - Fade in/out
  • Scale / Zoom - Resize element
  • Rotate - Rotate in degrees
  • TranslateX / TranslateY - Move element
  • Width / Height - Resize dimensions

Easing Functions

Control the speed curve of the animation.

  • CubicEaseIn / CubicEaseOut (Default)
  • BounceEase
  • ElasticEase
  • BackEase