How to display Spotify data on a UI using C#?

I am building a C#
application and I want to display Spotify data on the UI. I have already retrieved the currently playing track using the Spotify API. How can I update the UI with the track name, artist name, song image, and duration? Here's my code so far:

Xaml file:

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:av="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="av" x:Class="MyApp.MainWindow"
Title="My App" Height="450" Width="800" ResizeMode="NoResize" WindowStyle="None" AllowsTransparency="True">
<Window.Resources>
<Style x:Key="CustomWindowStyle" TargetType="Window">
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome CaptionHeight="40"
GlassFrameThickness="0"
NonClientFrameEdges="None"
ResizeBorderThickness="4"
UseAeroCaptionButtons="False" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Window">
<Grid>
<Border Background="#CC808080"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="10">
<AdornerDecorator>
<ContentPresenter />
</AdornerDecorator>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#CC808080" />
<SolidColorBrush x:Key="TextColorBrush" Color="Black" />
<SolidColorBrush x:Key="AccentColorBrush" Color="{Binding Source={x:Static SystemParameters.WindowGlassColor}}" />
</Window.Resources>
<Window.Style>
<StaticResource ResourceKey="CustomWindowStyle" />
</Window.Style>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="80.72" />
<RowDefinition Height="Auto" MinHeight="82.28" />
<RowDefinition Height="Auto" MinHeight="105" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock x:Name="nameTextBlock" Text="Welcome back, {userName}!" FontSize="24" Grid.ColumnSpan="2" Margin="159,66,269,83" Foreground="{StaticResource TextColorBrush}"/>
<TextBlock Text="Last Login: " FontSize="18" VerticalAlignment="Top" Grid.Column="0"  Margin="0,163,309,0" Grid.RowSpan="2"  />
<TextBlock x:Name="lastLoginTextBlock" FontSize="18" VerticalAlignment="Top" Margin="91,163,25,0" Grid.RowSpan="2" Foreground="{StaticResource TextColorBrush}"/>
<TextBlock Text="Last Used Programs:" FontSize="24" FontWeight="Bold" Grid.Row="1" Margin="0,38,0,11" Foreground="{StaticResource TextColorBrush}"/>
<ListBox x:Name="lastUsedProgramsListBox" FontSize="18" Margin="0,82,0,59" Grid.Row="1" Grid.RowSpan="2" av:ItemsSource="{av:SampleData ItemCount=5}" Foreground="{StaticResource TextColorBrush}"/>
<Image x:Name="avatarImageControl" Width="200" Height="200" Margin="0,-50,230,16" Stretch="UniformToFill">
</Image>
<TextBlock Text="Currently Playing:" FontSize="24" FontWeight="Bold" Grid.Row="1" Margin="5,70,-5,131" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="2" Foreground="{StaticResource TextColorBrush}"/>
<TextBlock Text="{Binding TrackName}" x:Name="trackNameTextBlock" FontSize="18" VerticalAlignment="Top" Grid.Column="1" Margin="215,76,-5,0" Grid.Row="1" Height="37" Grid.ColumnSpan="2" Foreground="{StaticResource TextColorBrush}"/>
<TextBlock Text="Artist: " FontSize="18" VerticalAlignment="Top" Margin="5,110,344,0" Grid.Row="1" Height="30" Grid.Column="1" Foreground="{StaticResource TextColorBrush}"/>
<TextBlock Text="{Binding ArtistName}" x:Name="artistNameTextBlock" FontSize="18" VerticalAlignment="Top" Grid.Column="1" Margin="56,113,254,0" Grid.Row="1" Foreground="{StaticResource TextColorBrush}"/>
<TextBlock Text="Duration: " FontSize="18" VerticalAlignment="Top" Grid.Column="1" Margin="156,110,164,0" Grid.Row="1" Grid.RowSpan="2" Foreground="{StaticResource TextColorBrush}"/>
<TextBlock Text="{Binding SongDuration}" x:Name="songDurationTextBlock" FontSize="18" VerticalAlignment="Top" Grid.Column="1" Margin="236,110,62,0" Grid.Row="1" Grid.RowSpan="2" Foreground="{StaticResource TextColorBrush}"/>
<Image x:Name="songImageControl" Width="200" Height="200" Margin="115,45,85,71" Grid.Column="1" Grid.RowSpan="2"/>
<TextBlock x:Name="noSongTextBlock" Text="No song playing" FontSize="18" FontWeight="Bold" HorizontalAlignment="Center" Visibility="Collapsed" Foreground="{StaticResource TextColorBrush}"/>
</Grid>
</Window>

Xaml.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Speech.Synthesis;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Media.Imaging;
using Newtonsoft.Json.Linq;
namespace MyApp
{
public partial class MainWindow : Window, INotifyPropertyChanged
{
public event PropertyChangedEventHandler? PropertyChanged;
private DateTime _lastLoginTime;
private List<string> _lastUsedPrograms;
private readonly SpeechSynthesizer _speechSynthesizer;
private HttpClient _httpClient;
private string _accessToken;
public MainWindow()
{
InitializeComponent();
// Create a SpeechSynthesizer instance
_speechSynthesizer = new SpeechSynthesizer();
// Retrieve user's name
string userName = Environment.UserName ?? string.Empty;
nameTextBlock.Text = $"Welcome back, {userName}!";
// Say the welcome message
SayWelcome(userName);
// Retrieve last login time
_lastLoginTime = System.IO.File.GetLastWriteTime(@"C:\Windows\System32\winevt\Logs\Microsoft-Windows-Winlogon%4Operational.evtx");
lastLoginTextBlock.Text = $"{_lastLoginTime}";
// Retrieve list of programs used on last login
_lastUsedPrograms = new List<string>();
var eventLog = new EventLog("Security", ".");
var entries = eventLog.Entries.Cast<EventLogEntry>().Where(x => x.TimeGenerated > _lastLoginTime && x.InstanceId == 4624 && x.UserName == userName);
foreach (var entry in entries)
{
var message = entry.Message;
int startIndex = message.IndexOf("NewProcessId=") + 13;
int endIndex = message.IndexOf(',', startIndex);
string processId = message.Substring(startIndex, endIndex - startIndex);
var processName = Process.GetProcessById(int.Parse(processId)).ProcessName;
if (!_lastUsedPrograms.Contains(processName))
{
_lastUsedPrograms.Add(processName);
}
}
lastUsedProgramsListBox.Items.Clear(); // Clear existing items
lastUsedProgramsListBox.ItemsSource = _lastUsedPrograms;
lastUsedProgramsListBox.SelectionChanged += LastUsedProgramsListBox_SelectionChanged;
// Retrieve the user's avatar profile picture
string userProfileImagePath = Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData);
string avatarImagePath = Path.Combine(userProfileImagePath, @"AppData\Roaming\Microsoft\Windows\AccountPictures\user.jpg");
// Check if the avatar image file exists
if (File.Exists(avatarImagePath))
{
try
{
if (Uri.TryCreate(avatarImagePath, UriKind.Absolute, out Uri? avatarImageUri))
{
BitmapImage avatarImage = new BitmapImage(avatarImageUri);
avatarImageControl.Source = avatarImage;
}
else
{
// Handle the invalid URI case
}
}
catch (Exception)
{
// Handle any exceptions that occur during image loading
}
}
else
{
// Handle the case when the avatar image file does not exist
}
// Initialize the HttpClient
_httpClient = new HttpClient();
_accessToken = string.Empty;
Task.Run(() => InitializeSpotify());
// Bind the properties to the corresponding elements in the UI
trackNameTextBlock.DataContext = this;
artistNameTextBlock.DataContext = this;
songDurationTextBlock.DataContext = this;
songImageControl.DataContext = this;
// Start retrieving and displaying the currently playing track
Task.Run(() => RetrieveAndDisplayCurrentlyPlayingTrack());
}
public string? TrackName { get; set; }
public string? ArtistName { get; set; }
public TimeSpan? SongDuration { get; set; }
public BitmapImage? SongImage { get; set; }
private async Task InitializeSpotify()
{
string clientId = "ee07bfeb35b44b188b2dce37f278a6c7";
string clientSecret = "28a640d1265b4344a63540fec3be467d";
string credentials = $"{clientId}:{clientSecret}";
byte[] credentialsBytes = System.Text.Encoding.UTF8.GetBytes(credentials);
string base64Credentials = Convert.ToBase64String(credentialsBytes);
_httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", base64Credentials);
// Retrieve the access token
var tokenRequest = new Dictionary<string, string>
{
{ "grant_type", "client_credentials" }
};
var tokenResponse = await _httpClient.PostAsync("https://accounts.spotify.com/api/token", new FormUrlEncodedContent(tokenRequest));
var tokenResponseContent = await tokenResponse.Content.ReadAsStringAsync();
var tokenData = JObject.Parse(tokenResponseContent);
_accessToken = tokenData?["access_token"]?.ToString() ?? string.Empty;
}
private void SayWelcome(string userName)
{
string welcomeMessage = $"Welcome back, {userName}! I'm your personal assistant. How can I assist you today?";
_speechSynthesizer.Speak(welcomeMessage);
}
private void LastUsedProgramsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (lastUsedProgramsListBox.SelectedItem != null)
{
string? selectedProgram = lastUsedProgramsListBox.SelectedItem?.ToString();
if (selectedProgram != null)
{
string programMessage = $"You last used {selectedProgram}. How can I assist you with {selectedProgram}?";
_speechSynthesizer.Speak(programMessage);
}
}
}
private async Task RetrieveAndDisplayCurrentlyPlayingTrack()
{
// Make an API request to retrieve the currently playing track
var request = new HttpRequestMessage(HttpMethod.Get, "https://api.spotify.com/v1/me/player/currently-playing");
request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", _accessToken);
var response = await _httpClient.SendAsync(request);
if (response.IsSuccessStatusCode)
{
var content = await response.Content.ReadAsStringAsync();
Console.WriteLine(content); // Log the API response content to the console
var trackObject = JObject.Parse(content);
if (trackObject.TryGetValue("item", out var itemToken) && itemToken != null)
{
var track = itemToken.ToObject<Track>();
// Retrieve the track name and artist name
string? trackName = track.Name ?? "Unknown";
string? artistName = track.Artists?.First()?.Name;
// Update the UI with the track and artist information
Dispatcher.Invoke(() =>
{
TrackName = trackName;
ArtistName = artistName;
});
// Retrieve the song image
string? imageUrl = track.Album?.Images?.First()?.Url;
// Create a BitmapImage from the song image URL
if (!string.IsNullOrEmpty(imageUrl))
{
BitmapImage songImage = new BitmapImage();
songImage.BeginInit();
songImage.UriSource = new Uri(imageUrl);
songImage.EndInit();
// Assign the song image to the Image control
Dispatcher.Invoke(() =>
{
SongImage = songImage;
});
}
// Retrieve the song duration
TimeSpan? songDuration = TimeSpan.FromMilliseconds(track.DurationMs);
// Update the UI with the song duration
Dispatcher.Invoke(() =>
{
SongDuration = songDuration;
});
}
}
else
{
// Handle the case when the API request is not successful
}
}
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private void Window_Closing(object sender, CancelEventArgs e)
{
_speechSynthesizer?.Dispose();
_httpClient?.Dispose();
}
}
public class Track
{
public string? Name { get; set; }
public List<Artist>? Artists { get; set; }
public Album? Album { get; set; }
public int DurationMs { get; set; }
}
public class Artist
{
public string? Name { get; set; }
}
public class Album
{
public List<Image>? Images { get; set; }
}
public class Image
{
public string? Url { get; set; }
}
}

I would like to know the best approach to update the UI with the Spotify data in real-time. Specifically, I want to display the following information on the UI:

• Track name
• Artist name
• Song image (album cover)
• Duration

I'm using C# for my application. Are there any libraries or techniques I can use to accomplish this? Any guidance or code examples would be greatly appreciated.

spotfiy not offically package gave alots of errors and restsharp gave alots of errors and I expected it to pull the data and put it in the ui so it could display on the ui.

You are halfway there.

1. You correctly are using bindings to bind the UI values to properties in your data context. E.g.<TextBlock Text="{Binding TrackName}" ... will cause the UI to update the textblock's text whenever the TrackName property is changed.
2. You are setting the TrackName property.
3. You are implementing INotifyPropertyChanged on the window's data context

However, you are missing code that bridges setting TrackName with notifying the UI that the property has chnaged: you never invoke PropertyChanged. Without calling this method, your UI does not know the properties have new values that should cause the UI to update its bindings.

There are several ways to implement this:

1. Manually call OnPropertyChanged after updating each property. For example,

this.TrackName = "foo";
this.OnPropertyChanged(nameof(TrackName));

2. Use backing fields for each property, and call OnPropertyChanged in their setters. E.g.

private string trackName;
public string TrackName
{
get { return this.trackName; }
private set
{
this.trackName = value;
this.OnPropertyChanged(nameof(this.TrackName));
}
}

You can simplify this by adding [CallerMemberName] to the OnPropertyChanged parameter. Then you can just do this.PropertyChanged().

3. Use something like the Microsoft Community Toolkit to simplify a lot of this property changed boilerplate. In particular, your data context (which I suggest you move to a separate class that isn't your window) can extend ObservableObject, and then you can use the ObservableProperty attribute.