tompaana edited this page Nov 12, 2014 · 3 revisions
Clone this wiki locally

Media Viewer is a Windows Phone example application implemented with Silverlight. The application is ported from the FileList Qt Quick example.

Media Viewer enables the user to explore a list of pictures and music files stored on their device. It's also possible to preview an image, play a music file, and check the details of the selected file on a separate page.

Picture preview  Music pivot view  Song details

Porting from Qt to Windows Phone


The project is ported from the FileList Qt Quick example. The main goal of the project was to present to the user media files stored on the device. To achieve this, we need to scan for media files in the device file system. In the case of a Qt application for Symbian this was not a problem, since the Symbian file system is fully accessible for developers. However, Windows Phone 7 has a much more restrictive policy. WP7 applications can only access their own private drive space called Isolated Storage. The rest of the file system is inaccessible for security reasons. For more information, please refer to Windows Phone Platform Security.

Fortunately Windows Phone provides a XNA library (Microsoft.Xna.Framework.Media) which enables access to songs, playlists, and pictures in the device's media library. In Windows Phone 7.1 (Mango), developers are able - with some restrictions - to mix XNA and Silverlight in the same application, so it was possible to make use of the library. The usage is quite straightforward:

MediaLibrary library = new MediaLibrary();
List<Song> songs = new List<Song>();

foreach (var song in library.Songs)

The MediaPlayer class from the same library was used to play audio files.

User Interface

In this Windows Phone version, the UI of the app is based on 3 simple views. The first one is the main page, containing a Pivot control with two items representing the categories: pictures and music. Selecting a list item from the category view takes the user to the picture preview or song details page. On the song details page, the audio file is played in the background.

The MVVM (Model-View-ViewModel) pattern was used to bind data with particular pages.

Below is a comparison of the application main view between the Qt Quick and the Windows Phone version.

UI comparison

The red squares represent the items with the same role: The list view with list items and the controller for switching between different media types. In Qt Quick version switching between photos, music and video is done with the tab buttons on the tool bar. The Windows Phone version utilizes the Pivot design for switching between pictures and music. The back button in FileList example is placed in the tool bar (green square) according to Symbian design guidelines, where as the back button on Windows Phone is a hardware button. The status bar on Symbian (purple square) is always visible (although the visibility can be changed in application code). On Windows Phone status bar is shown on top of the application layer when the user taps the top end of the screen. Since this Media Viewer example application cannot access the file system, the interactive header and the list heading displaying the current path (blue square) is unnecessary in Windows Phone version.