Commands in .NET MAUI Effects View (SfEffectsView)

28 Jul 202615 minutes to read

The .NET MAUI Effects View exposes ICommand properties for each touch interaction, letting you bind view-model logic directly to the view. Each command is paired with an object-typed CommandParameter property so you can pass context to the bound logic.

The Effects View control provides the following Commands and CommandParameter:

  • LongPressedCommand
  • LongPressedCommandParameter
  • TouchDownCommand
  • TouchDownCommandParameter
  • TouchUpCommand
  • TouchUpCommandParameter

Prerequisites

Before using the SfEffectsView, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.Core

For a step-by-step setup, refer to the Getting Started documentation.

TouchDownCommand

The TouchDownCommand property fires when the user presses the view.

<syncEffectsView:SfEffectsView x:Name="effectsView"
                               HorizontalOptions="Center" 
                               VerticalOptions="Center"
                               TouchDownCommand="{Binding TouchDownCommand}"
                               TouchDownCommandParameter="{x:Reference effectsView}">
    <syncEffectsView:SfEffectsView.BindingContext>
        <local:EffectsViewModel/>
    </syncEffectsView:SfEffectsView.BindingContext>
    <Grid Padding="12" 
          WidthRequest="350" 
          HeightRequest="150"
          HorizontalOptions="Center" 
          VerticalOptions="Center">
        <Grid.Background>
            <LinearGradientBrush EndPoint="1,1">
                <GradientStop Color="#FF6B6B" 
                              Offset="0.0" />
                <GradientStop Color="#4ECDC4" 
                              Offset="1.0" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
</syncEffectsView:SfEffectsView>
var viewModel = new EffectsViewModel();
this.BindingContext = viewModel; 

var grid = new Grid
{
    Padding = new Thickness(12),
    WidthRequest = 350,
    HeightRequest = 150,
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Background = new LinearGradientBrush
    {
        EndPoint = new Point(1, 1),
        GradientStops = new GradientStopCollection
        {
            new GradientStop(Color.FromArgb("#FF6B6B"), 0.0f),
            new GradientStop(Color.FromArgb("#4ECDC4"), 1.0f)
        }
    }
};

var effectsView = new SfEffectsView
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Content = grid
};

effectsView.TouchDownCommand = viewModel.TouchDownCommand;
effectsView.TouchDownCommandParameter = effectsView;

this.Content = effectsView;

TouchUpCommand

The TouchUpCommand property fires when the user releases the press.

<syncEffectsView:SfEffectsView x:Name="effectsView"
                               HorizontalOptions="Center" 
                               VerticalOptions="Center"
                               TouchUpCommand="{Binding TouchUpCommand}"
                               TouchUpCommandParameter="{x:Reference effectsView}">
    <syncEffectsView:SfEffectsView.BindingContext>
        <local:EffectsViewModel/>
    </syncEffectsView:SfEffectsView.BindingContext>
    <Grid Padding="12" 
          WidthRequest="350" 
          HeightRequest="150"
          HorizontalOptions="Center" 
          VerticalOptions="Center">
        <Grid.Background>
            <LinearGradientBrush EndPoint="1,1">
                <GradientStop Color="#FF6B6B" 
                              Offset="0.0" />
                <GradientStop Color="#4ECDC4" 
                              Offset="1.0" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
</syncEffectsView:SfEffectsView>
var viewModel = new EffectsViewModel();
this.BindingContext = viewModel; 

var grid = new Grid
{
    Padding = new Thickness(12),
    WidthRequest = 350,
    HeightRequest = 150,
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Background = new LinearGradientBrush
    {
        EndPoint = new Point(1, 1),
        GradientStops = new GradientStopCollection
        {
            new GradientStop(Color.FromArgb("#FF6B6B"), 0.0f),
            new GradientStop(Color.FromArgb("#4ECDC4"), 1.0f)
        }
    }
};

var effectsView = new SfEffectsView
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Content = grid
};

effectsView.TouchUpCommand = viewModel.TouchUpCommand;
effectsView.TouchUpCommandParameter = effectsView;

this.Content = effectsView;

LongPressedCommand

The LongPressedCommand property fires when the user long-presses the view.

<syncEffectsView:SfEffectsView x:Name="effectsView"
                               HorizontalOptions="Center" 
                               VerticalOptions="Center"
                               LongPressedCommand="{Binding LongPressedCommand}"
                               LongPressedCommandParameter="{x:Reference effectsView}" >
    <syncEffectsView:SfEffectsView.BindingContext>
        <local:EffectsViewModel/>
    </syncEffectsView:SfEffectsView.BindingContext>
    <Grid Padding="12" 
          WidthRequest="350" 
          HeightRequest="150"
          HorizontalOptions="Center" 
          VerticalOptions="Center">
        <Grid.Background>
            <LinearGradientBrush EndPoint="1,1">
                <GradientStop Color="#FF6B6B" 
                              Offset="0.0" />
                <GradientStop Color="#4ECDC4" 
                              Offset="1.0" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
</syncEffectsView:SfEffectsView>
var viewModel = new EffectsViewModel();
this.BindingContext = viewModel; 

var grid = new Grid
{
    Padding = new Thickness(12),
    WidthRequest = 350,
    HeightRequest = 150,
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Background = new LinearGradientBrush
    {
        EndPoint = new Point(1, 1),
        GradientStops = new GradientStopCollection
        {
            new GradientStop(Color.FromArgb("#FF6B6B"), 0.0f),
            new GradientStop(Color.FromArgb("#4ECDC4"), 1.0f)
        }
    }
};

var effectsView = new SfEffectsView
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Content = grid
};

effectsView.LongPressedCommand = viewModel.LongPressedCommand;
effectsView.LongPressedCommandParameter = effectsView;

this.Content = effectsView;

End-to-End Example

The example below wires a complete view model and a XAML page together so the commands fire when the user interacts with the SfEffectsView.

public class EffectsViewModel : INotifyPropertyChanged
{
    public ICommand TouchDownCommand { get; }
    public ICommand TouchUpCommand { get; }
    public ICommand LongPressedCommand { get; }

    public EffectsViewModel()
    {
        TouchDownCommand = new RelayCommand(p => OnTouchDown(p));
        TouchUpCommand = new RelayCommand(p => OnTouchUp(p));
        LongPressedCommand = new RelayCommand(p => OnLongPressed(p));
    }

    private void OnTouchDown(object? parameter)
    {
        // React to the touch-down here.
    }

    private void OnTouchUp(object? parameter)
    {
        // React to the touch-up here.
    }

    private void OnLongPressed(object? parameter)
    {
        // React to the long-press here.
    }

    public event PropertyChangedEventHandler? PropertyChanged;
}
<syncEffectsView:SfEffectsView x:Name="effectsView"
                               HorizontalOptions="Center" 
                               VerticalOptions="Center"
                               TouchDownCommand="{Binding TouchDownCommand}"
                               TouchUpCommand="{Binding TouchUpCommand}"
                               LongPressedCommand="{Binding LongPressedCommand}"
                               TouchDownCommandParameter="{x:Reference effectsView}"
                               TouchUpCommandParameter="{x:Reference effectsView}"
                               LongPressedCommandParameter="{x:Reference effectsView}" >
    <syncEffectsView:SfEffectsView.BindingContext>
        <local:EffectsViewModel/>
    </syncEffectsView:SfEffectsView.BindingContext>
    <Grid Padding="12" 
          WidthRequest="350" 
          HeightRequest="150"
          HorizontalOptions="Center" 
          VerticalOptions="Center">
        <Grid.Background>
            <LinearGradientBrush EndPoint="1,1">
                <GradientStop Color="#FF6B6B" 
                              Offset="0.0" />
                <GradientStop Color="#4ECDC4" 
                              Offset="1.0" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
</syncEffectsView:SfEffectsView>

See also