Effects

Effects

Inline effects

<Button Text="With shadow" OnClick="Refresh">
  <Button.Effects>
    <ShadowEffect Radius="5" Color="Black" />
  </Button.Effects>
</Button>

Effect types

ShadowEffect

<ShadowEffect Radius="8" Color="Black"
              OffsetX="0" OffsetY="4"
              Spread="2" Inset="False" />

BlurEffect

<BlurEffect Radius="4" />

OpacityEffect

<OpacityEffect Value="0.8" />

ScaleEffect

<ScaleEffect Value="1.05" />

RotateEffect

<RotateEffect Angle="-8" />

Combining effects

<Container>
  <Container.Effects>
    <ShadowEffect Radius="12" Color="Black" OffsetY="4" />
    <ScaleEffect Value="1.02" />
    <OpacityEffect Value="0.95" />
  </Container.Effects>
  ...
</Container>

• Multiple shadows combine into a box-shadow list.
• Multiple blurs combine into filter.
• Multiple scale/rotate effects combine into transform.
• OpacityEffect uses the last value.

Set effects with Trigger

<Button Name="HoverButton" Text="Apply effect" />

<Trigger Event="Click" Control="HoverButton" Target="TargetCard">
  <Trigger.Effects>
    <ShadowEffect Radius="8" Color="Red" />
    <ScaleEffect Value="1.05" />
  </Trigger.Effects>
</Trigger>

• A Trigger can contain only Effects, without Function / Action.
• Target is the target node’s Target attribute.
• For Click, omitting Target uses Control.
• Trigger effects replace the target’s current effects; they do not stack indefinitely.
• After triggering, the target’s inline <Node.Effects> is overridden.

Limits

• Effects are CSS-only and do not define animation timelines.
• ShadowEffect / BlurEffect may paint outside the element box; a clipping parent can hide it.
• Input focus suppresses shortcuts; effects do not affect typing.