Our next step in this project is to build the user interface for controlling the audio. Add a new file called AudioPlayerPage.cs inside the Views folder; don't forget to add the attribute above the class declaration to register the view-model for the MVVMCross framework:

[MvxViewFor(typeof(AudioPlayerPageViewModel))] 
public class AudioPlayerPage : MvxViewController 
{ 
   private UIButton playButton; 
 
        private UISlider _progressSlider; 
 
        private bool _playing; 
 
        private AudioPlayerPageViewModel _model; 
} 

Now let's create the UI elements via the ViewDidLoad function:

public override void ViewDidLoad() 
        { 
            base.ViewDidLoad(); 
 
            var mainView = new UIView() 
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
                BackgroundColor = UIColor.White 
            }; 
 
            var buttonView = new UIView() 
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
                BackgroundColor = UIColor.Clear 
            }; 
 
            var imageView = new UIImageView() 
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
                ContentMode = UIViewContentMode.ScaleAspectFit, 
                Image = new UIImage("moby.png") 
            }; 
 
            var descriptionLabel = new UILabel() 
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
                TextAlignment = UITextAlignment.Center 
            }; 
 
            var startLabel = new UILabel() 
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
                TextAlignment = UITextAlignment.Left, 
            }; 
 
            var endLabel = new UILabel() 
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
                TextAlignment = UITextAlignment.Right, 
            }; 
 
            _progressSlider = new UISlider() 
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
                MinValue = 0 
            }; 
 
            _playButton = new UIButton(UIButtonType.Custom) 
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
            }; 
            var rewindButton = new UIButton(UIButtonType.Custom) 
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
            }; 
            var fastForwardButton = new UIButton(UIButtonType.Custom) 
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
            }; 
        } 

We have labels for displaying the current track name, the start time, and the end time. We also have our buttons for controlling the audio stream (play, pause, rewind, and forward). Finally, we have our progress slider for animating the current time of the audio; we are also going to be using this to change the position of the audio.

We now want to add the button events for controlling some UI changes on the button images; add the event handler assignation under the declaration of the play button:

_playButton.TouchUpInside += HandlePlayButton; 
            _playButton.SetImage(UIImage.FromFile("play.png"), UIControlState.Normal); 

Then create the function for the event handler:

        private void HandlePlayButton(object sender, EventArgs e) 
        { 
            _playing = !_playing; 
            _playButton.SetImage(UIImage.FromFile(playing ? "pause.png" : "play.png"), UIControlState.Normal); 
        } 

Every time we click the play button, it will move the image back and forth between the play and pause icon. Now let's add the rewind and forward button handlers; add the following lines under each UI element declaration:

rewindButton.TouchUpInside += HandleRewindForwardButton; 
            rewindButton.SetImage(UIImage.FromFile("rewind.png"), UIControlState.Normal); 
fastForwardButton.TouchUpInside += HandleRewindForwardButton; 
            fastForwardButton.SetImage(UIImage.FromFile("fast_forward.png"), UIControlState.Normal); 

Now we add the event handler function:

        private void HandleRewindForwardButton(object sender, EventArgs e) 
        { 
            _playing = false; 
            _playButton.SetImage(UIImage.FromFile("play.png"), UIControlState.Normal); 
        } 

This is similar to the play button handler, but this time we always set the playing status to false, and set the play button image to the play icon.