Articles in this section
Category / Section

How to make sound on tapping an item in Xamarin.Forms ListView (SfListView)

3 mins read

Xamarin.Forms SfListView supports the use of common API to load audio data from shared locations across UWP, iOS & Android using the SimpleAudioPlayer plugin.

You can refer to the following steps to achieve the requirement.

STEP 1: Install the Xam.Plugin.SimpleAudioPlayer Nuget package to the shared code project.

STEP 2: Place the audio file in the shared code project and set the Build action as follows,

Project

Location

Build action

Android

Assets

AndroidAsset

iOS

Resources

BundleResource

UWP

Assets

Content

You can also refer to the link below to use audio files in Xamarin.Forms.

https://devblogs.microsoft.com/xamarin/adding-sound-xamarin-forms-app/

XAML

Bind the TapCommand to the SfListView.

<syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}" TapCommand="{Binding TappedCommand}">
    <syncfusion:SfListView.ItemTemplate >
        <DataTemplate>
            <Grid x:Name="grid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/>
                <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center">
                    <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/>
                    <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/>
                </Grid>
            </Grid>
        </DataTemplate>
    </syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>

C#

Load the audio file in the ViewModel class. Play the audio by calling the Play method in the command execution method.

public class ContactsViewModel : INotifyPropertyChanged
{
    ISimpleAudioPlayer Player;
    public ObservableCollection<Contacts> ContactsInfo { get; set; }
    public Command TappedCommand { get; set; }
 
    public ContactsViewModel()
    {
        ContactsInfo = new ObservableCollection<Contacts>();
        TappedCommand = new Command(OnTapped);
 
        Player = CrossSimpleAudioPlayer.Current;
        Player.Load("TapSound.wav");
 
        GenerateInfo();
    }
 
    private void OnTapped()
    {
        Player.Play();
    }
}

View sample in GitHub

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied