Construct a Beautiful Music Monitor UI Utilizing .NET MAUI ListView

A music observe UI will be designed as an inventory of tracks, every that includes a play button that enables customers to play the corresponding music file when the play icon is clicked. This user-friendly interface can considerably improve the general expertise of a music app by making it extra intuitive, environment friendly, and pleasant for customers.

Syncfusion .NET MAUI ListView makes it simpler to develop apps for iOS and Android. This weblog goals to information you thru the method of making a fascinating music observe UI utilizing the .NETMAUI ListView management.

This tutorial will cowl all the things from getting ready the audio participant service and designing the music observe UI by following three steps:

1. Creating audio participant service.
2. Implementing Mannequin and ViewModel.
3. Designing the UI.

Be aware: Earlier than continuing, consult with the getting began with .NET MAUI ListView documentation.

Making a music observe UI utilizing .NET MAUI ListView

Observe these steps to create the music observe UI utilizing our .NET MAUI ListView management:

Step 1: Develop an audio participant service

As there is no such thing as a direct assist for enjoying audio in .NET MAUI, we have to create a service on native platforms that performs audio information. This may be performed utilizing dependency injection.

Be aware: Audio service is supported solely on Android and iOS platforms.

Create a service to play the audio

Earlier than writing a service class for native platforms, we have to create an interface with strategies for invoking actions like taking part in, pausing, or stopping audio information.

Confer with the next code instance.

public interface IAudioPlayerService
{
    void PlayAudio(string filePath);
    void Pause();
    void Cease();
    string GetCurrentPlayTime();
    bool CheckFinishedPlayingAudio();
}

Then, create a service class to play music on each Android and iOS platforms.

Audio participant service for Android

Observe these steps to create a music-playing service for Android:

• Create an occasion of the MediaPlayer class to play an audio file.
• Assign the audio file path to the MediaPlayer utilizing the SetDataSource methodology.
• Put together the media participant by calling the Put together methodology after setting the info supply.
• As soon as ready, use the Begin methodology to start taking part in the audio.

Confer with the next code instance.

public partial class AudioPlayerService : IAudioPlayerService
{
    …
    #area Strategies
    public async void PlayAudio(string filePath)
    {
        if (mediaPlayer != null && !mediaPlayer.IsPlaying)
        {
            mediaPlayer.SeekTo(currentPositionLength);
            currentPositionLength = 0;
            mediaPlayer.Begin();
        }

        else if (mediaPlayer == null || !mediaPlayer.IsPlaying)
        {
            attempt
            {
                isCompleted = false;
                mediaPlayer = new MediaPlayer();                                  
                System.IO.Stream fileStream = GetStreamFromFile(filePath);

                var tempFile = System.IO.Path.Mix(System.IO.Path.GetTempPath(), "tempAudio.mp3");
                utilizing (var file = System.IO.File.Create(tempFile))
                {
                    fileStream.CopyTo(file);
                }   

                mediaPlayer.SetDataSource(tempFile);

                mediaPlayer.Put together();                    
                mediaPlayer.Ready += (sender, args) =>
                {
                    isPrepared = true;
                    mediaPlayer.Begin();
                };
                mediaPlayer.Completion += (sender, args) =>
                {
                    isCompleted = true;
                };
            }
            catch (Exception e)
            {
                mediaPlayer = null;
            }
        }
    }
    #endregion
    …………………
}

Audio participant service for iOS

Observe these steps to implement an audio playback service in iOS utilizing the AVPlayer class:

1. Initialize the audio file with the AVPlayerItem class.
2. Start playback by calling the Play methodology on the AVPlayer.

Confer with the next code instance.

public partial class AudioPlayerService : IAudioPlayerService
{
       ………………………………        
        #area Strategies

        /// <abstract>
        /// This methodology is used to play the recorder audio.
        /// </abstract>
        public void PlayAudio(string filePath)
        {
            isFinishedPlaying = false;
            if (participant == null)
            {
                AVAsset asset = AVAsset.FromUrl(NSUrl.CreateFileUrl(new[] { filePath }));
                AVPlayerItem avPlayerItem = new AVPlayerItem(asset);
                participant = new AVPlayer(avPlayerItem);
                participant.AutomaticallyWaitsToMinimizeStalling = false;
                participant.Quantity = 1;

                participant.Play();
                IsPlaying = true;
                isFinishedPlaying = false;
            }
            else if (participant != null && !IsPlaying)
            {
                participant.Play();
                IsPlaying = true;
                isFinishedPlaying = false;
            }
        }        
        #endregion
        ………………………
}

Register dependency injection to entry the objects within the constructor

Dependency injection permits an object (the consumer) to obtain different objects (providers) on which it relies upon. For extra particulars, take a look at the weblog Study Use Dependency Injection in .NET MAUI.

To implement dependency injection with the AudioInfoViewModel, register the ViewModel within the dependency injection container and inject it into the MainPage constructor. This strategy permits for cleaner, extra maintainable code the place the framework manages dependencies.

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Common.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });

        #if DEBUG
    	builder.Logging.AddDebug();
        #endif
           
            
        builder.Providers.AddTransient<App>();
        builder.Providers.AddTransient<MainPage>();
        builder.Providers.AddTransient<AudioInfoViewModel>();

        builder.Providers.AddSingleton<IAudioPlayerService, AudioPlayerService>();

        builder.ConfigureSyncfusionCore();

        return builder.Construct();
    }
}

Within the MauiProgram class, we now have registered the AudioInfoViewModel with the dependency injection container utilizing providers.AddTransient<AudioInfoViewModel>();. This enables the framework to robotically create an occasion of the ViewModel when wanted.

Step 2: Implement Mannequin and ViewModel

Now, embody the mannequin class to deal with the audio information properties and the view mannequin class to populate the binding assortment property to indicate the audio information record within the ListView.

Making a mannequin

Let’s create a knowledge mannequin and bind it to the .NET MAUI ListView management. Create a easy information supply in a brand new class file, as proven within the following code instance, and put it aside as AudioInfo.cs.

public class AudioInfo : INotifyPropertyChanged
{
    #area Fields

    personal string title;
    personal string creator;
    personal string? picture;
    personal string dimension;

    personal bool isPlayVisible;
    personal bool isPauseVisible;
    personal string currentAudioPostion;

    #endregion

    #area Properties

    /// <abstract>
    /// Will get or units a worth that signifies the music title. 
    /// </abstract>
    public string Title
    {
        get
        {
            return title;
        }
        set
        {
            title = worth;
            this.RaisePropertyChanged("Title");
        }
    }

    /// <abstract>
    /// Will get or units the worth that signifies the music creator.
    /// </abstract>
    public string Creator
    {
        get
        {
            return creator;
        }
        set
        {
            creator = worth;
            this.RaisePropertyChanged("Creator");
        }
    }

    /// <abstract>
    /// Will get or units the worth that signifies the music creator.
    /// </abstract>
    public string Picture
    {
        get
        {
            return picture;
        }
        set
        {
            picture = worth;
            this.RaisePropertyChanged("Picture");
        }
    }

    /// <abstract>
    /// Will get or units a worth that signifies music dimension. 
    /// </abstract>
    public string Measurement
    {
        get
        {
            return dimension;
        }
        set
        {
            dimension = worth;
            this.RaisePropertyChanged("Measurement");
        }
    }

    public bool IsPlayVisible
    {
        get { return isPlayVisible; }
        set
        {
            isPlayVisible = worth;
            this.RaisePropertyChanged("IsPlayVisible");
            IsPauseVisble = !worth;
        }
    }
    public bool IsPauseVisble
    {
        get { return isPauseVisible; }
        set 
        {
            isPauseVisible = worth;
            this.RaisePropertyChanged("IsPauseVisble") ; 
        }
    }
    public string CurrentAudioPosition
    {
        get { return currentAudioPostion; }
        set
        {
            if (string.IsNullOrEmpty(currentAudioPostion))
            {
                currentAudioPostion = string.Format("{0:mm:ss}", new TimeSpan());
            }
            else
            {
                currentAudioPostion = worth;
            }
            this.RaisePropertyChanged("CurrentAudioPosition");
        }
    }
    public string AudioURL { get; set; }


    #endregion

    public AudioInfo()
    {
    }

    #area INotifyPropertyChanged implementation

    public occasion PropertyChangedEventHandler PropertyChanged;

    personal void RaisePropertyChanged(String identify)
    {
        if (PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(identify));
    }

    #endregion
}

Making a View Mannequin

Now, create a mannequin repository class with the AudioInfo assortment property initialized with the required variety of information objects in a brand new class file. Then, put it aside as an AudioInfoViewModel.cs file.

public class AudioInfoViewModel : INotifyPropertyChanged
{
   personal ObservableCollection<AudioInfo> audioCollection;

   public AudioInfoViewModel(IAudioPlayerService audioPlayerService)
   {
        GenerateSource();
   }

   #area Generate Supply

   personal void GenerateSource()
   {
        AudioCollection = audioInfoRepository.GetSongs();
   }

   #endregion

   #area Properties

   public ObservableCollection<AudioInfo> AudioCollection
   {
        get { return audioCollection; }
        set { this.audioCollection = worth; }
   }

   #endregion

   #area INotifyPropertyChanged

   public occasion PropertyChangedEventHandler PropertyChanged;

   personal void OnPropertyChanged(string identify)
   {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(identify));
   }

   #endregion
}

Moreover, the AudioInfoViewModel consists of the audio participant service instructions to handle audio information and deal with playback-related implementations. The audioPlayerService will likely be outlined by dependency injection, invoking the platform-specific code for enjoying audio information.

The PlayAudioCommand and PauseAudioCommand properties will likely be used to invoke the dependency service strategies to play the audio with the assistance of audioPlayerService.

public class AudioInfoViewModel : INotifyPropertyChanged
{
    IAudioPlayerService audioPlayerService;

    public AudioInfoViewModel(IAudioPlayerService audioPlayerService)
    {
        this.audioPlayerService = audioPlayerService;
        PauseAudioCommand = new Command(PauseAudio);
        PlayAudioCommand = new Command(StartPlayingAudio);
    }

    #area Properties
   
    public ICommand PlayAudioCommand { get; set; }
    public ICommand PauseAudioCommand { get; set; }


    #endregion

    #area INotifyPropertyChanged

    public occasion PropertyChangedEventHandler PropertyChanged;

    personal void OnPropertyChanged(string identify)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(identify));
    }

    #endregion

    #area Participant command

    personal void StartPlayingAudio(object obj)
    {
        if (audioFile != null && audioFile != (AudioInfo)obj)
        {
            AudioFile.IsPlayVisible = true;
            StopAudio();
        }
        if (obj is AudioInfo)
        {
            audioFile = (AudioInfo)obj;
            audioFile.IsPlayVisible = false;
            string audioFilePath = AudioFile.AudioURL;
            audioPlayerService.PlayAudio(audioFilePath);
            SetCurrentAudioPosition();
        }
    }
    
    public void StopAudio()
    {
        if (AudioFile != null)
        {
            audioPlayerService.Cease();
            playTimer.Cease();
        }
    }
    #endregion
}

Step 3: Designing the UI

Now, we are going to create the UI to indicate the audio assortment utilizing the .NET MAUI ListView. Set up the required package deal to make use of the .NET MAUI ListView management within the app.

Binding information to the .NET MAUI ListView

The MainPage constructor accepts an AudioInfoViewModel parameter injected by the dependency injection container. The BindingContext for the MainPage is ready to the injected AudioInfoViewModel, enabling property binding between the web page and the ViewModel.

public partial class MainPage : ContentPage
{
    public MainPage(AudioInfoViewModel audioInfoViewModel)
    {
        InitializeComponent();
        BindingContext = audioInfoViewModel;
    }   
}

To populate the ListView, bind the merchandise assortment from the BindingContext to the SfListView.ItemsSource property.

<syncfusion:SfListView x:Title="listView" 
           ItemsSource="{Binding AudioCollection}"/>

Outline the merchandise template

Lastly, outline the ItemTemplate for the .NET MAUI ListView to show audio data together with the Play and Pause buttons. You can too create a customized template that features controls like labels for displaying audio particulars and buttons for dealing with play and pause actions.

<syncfusion:SfListView x:Title="listView" 
                        ItemsSource="{Binding AudioCollection}">        
    <syncfusion:SfListView.ItemTemplate>
        <DataTemplate>
          ……………………

           <Picture Grid.Column="0" Grid.Row="0" Supply="{Binding Picture}" HorizontalOptions="Middle" VerticalOptions="FillAndExpand" HeightRequest="72" WidthRequest="72" Facet="Fill"/>                                         

           <Label Grid.Row="0"  Textual content="{Binding Title}" LineBreakMode="WordWrap" FontFamily="Roboto-Common" FontSize="{OnPlatform Android={OnIdiom Cellphone=15, Pill=22}, iOS=16, WinUI=14,MacCatalyst=16}" CharacterSpacing="0.1"/>
           <Label Grid.Row="1" LineBreakMode="WordWrap" LineHeight="{OnPlatform iOS={OnIdiom Pill=1.2, Default=1.025}, Default=1.2}" Textual content="{Binding Creator}" FontFamily="Roboto-Common" FontSize="14" CharacterSpacing="0.1"  Opacity="0.8" />
           <Label Grid.Row="2"  Textual content="{Binding Measurement}" FontSize="{OnPlatform Default=10,WinUI=12,MacCatalyst=12}" FontFamily="Roboto-Common" CharacterSpacing="0.15" Margin="0,0,11,0" Opacity="0.8"/>

           ………………………

           <Button                                                 
            Grid.Row="1"                                         
            Command="{Binding Path=BindingContext.PlayAudioCommand, Supply={x:Reference listView}}"
            CommandParameter="{Binding .}"                          
            IsVisible="{Binding IsPlayVisible}"
            Textual content="&#xea15;"
            VerticalOptions="Finish"/>

            <Button                                                 
            Grid.Row="1"                          
            Command="{Binding Path=BindingContext.PauseAudioCommand, Supply={x:Reference listView}}"
            CommandParameter="{Binding .}"                          
            IsVisible="{Binding IsPauseVisble}"
                        VerticalOptions="Middle"
            Textual content="&#xea16;" />

           <Label
            Grid.Row="2"                                    
            FontSize="14"
            IsVisible="{Binding IsPauseVisble}"
            Textual content="{Binding CurrentAudioPosition}"
            TextColor="Black"
            HorizontalOptions="Middle"
            VerticalTextAlignment="Middle" />

            <BoxView Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" HeightRequest="1" VerticalOptions="Finish" />

        </DataTemplate>
    </syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView> 

You will get the next output when executing the above codes cumulatively.

GitHub reference

For extra particulars, consult with the making a music observe UI utilizing the .NET MAUI ListView GitHub demo.

Supercharge your cross-platform apps with Syncfusion’s strong .NET MAUI controls.

Attempt It Free

Conclusion

In conclusion, the weblog presents a complete information on setting up an interactive music observe UI, leveraging the capabilities of Syncfusion’s .NET MAUI ListView management.

In case you’re already a Syncfusion consumer, you possibly can obtain the product setup from our web site. In any other case, you possibly can obtain a free 30-day trial.

Please tell us within the feedback part beneath in case you have any questions. You can too contact us via our assist discussion board, assist portal, or suggestions portal. We’re at all times completely happy to help you!