Skip to content

touch-effects.md

Latest commit

 

History

History
118 lines (84 loc) · 3.73 KB

touch-effects.md

File metadata and controls

118 lines (84 loc) · 3.73 KB
Raw

Touch Effects

Touch Effects provide two things:

  1. Visual feedback — a configurable colour overlay/ripple that appears when a user touches a view.
  2. Command bindings — tap and long-tap ICommand bindings attachable to any view via XAML.

Platform Support

Platform Visual Effect Commands
Android Ripple (API 21+), colour overlay fallback Yes
iOS Animated UIView layer fade Yes
macOS Catalyst Animated UIView layer fade Yes
Windows Rectangle overlay with DoubleAnimation fade Yes

XAML Namespace

xmlns:touch="clr-namespace:Maui.FreakyEffects.TouchEffects;assembly=Maui.FreakyEffects"

TouchEffect — Visual Feedback

Attached Property

Property Type Default Description
TouchEffect.Color Color Transparent The highlight colour shown on press. Setting this automatically attaches the routing effect to the view. Setting it back to Transparent removes it

Usage

<Frame
    touch:TouchEffect.Color="#33000000"
    CornerRadius="12"
    Padding="16">
    <Label Text="Tap me" />
</Frame>

The overlay alpha is automatically reduced (to ~30%) for opaque colours so the highlight is subtle. If you provide a colour with an explicit alpha it is used as-is.

Behaviour Notes

  • The effect requires the view to be inside a container (ContentView, Grid, StackLayout, etc.). A Label or Button on its own will throw at runtime — wrap it.
  • On Android API 21+ a native RippleDrawable is used. On earlier APIs a plain colour overlay fades in/out with ObjectAnimator.
  • On iOS/macOS the overlay is a UIView subview constrained to fill the parent, animated with UIView.Animate.
  • On Windows the overlay is a Rectangle added to the container Panel, animated with a WinUI Storyboard/DoubleAnimation.

Commands — Tap / Long-Tap Bindings

Attached Properties

Property Type Default Description
Commands.Tap ICommand null Command executed on a single tap
Commands.TapParameter object null Parameter passed to Commands.Tap
Commands.LongTap ICommand null Command executed when the press exceeds 800 ms
Commands.LongTapParameter object null Parameter passed to Commands.LongTap

Setting either Tap or LongTap automatically attaches the routing effect. Clearing both removes it.

Usage

<Frame
    touch:Commands.Tap="{Binding OpenDetailCommand}"
    touch:Commands.TapParameter="{Binding Item}"
    touch:Commands.LongTap="{Binding ShowContextMenuCommand}"
    touch:Commands.LongTapParameter="{Binding Item}">
    <Label Text="{Binding Item.Name}" />
</Frame>

Combining with TouchEffect

Both effects can be applied to the same view simultaneously:

<Frame
    touch:TouchEffect.Color="#2200AAFF"
    touch:Commands.Tap="{Binding SelectCommand}"
    touch:Commands.TapParameter="{Binding .}">
    <Label Text="Tap with ripple" />
</Frame>

EffectsConfig

EffectsConfig contains global options applied to all touch effects:

Property Type Default Description
EffectsConfig.AutoChildrenInputTransparent bool false When true, automatically sets InputTransparent="True" on child views inside a layout that has a touch effect, so touches pass through to the container 
EffectsConfig.AutoChildrenInputTransparent = true;

Code-Behind Usage

// Visual effect
TouchEffect.SetColor(myView, Color.FromArgb("#33FF0000"));

// Commands
Commands.SetTap(myView, new Command(() => Console.WriteLine("Tapped")));
Commands.SetLongTap(myView, new Command(() => Console.WriteLine("Long-tapped")));