This code template is a media viewer that enables a user to interact and view media files. Files provided to the template are handled differently depending on their extension. For example, PDF's and images are displayed in a webview2 where as audio is added to a global playlist that can be played throughout the application.
This code template is a UWP application as apps are all UWP.
Paste all of your media files into the DigitalContent Folder. Then build the project.
The current supported formats are:
Content displayed through WebView Browser:
.pdf.png.jpg
Audio Content:
.wav.mp3.flac
Video Content:
.webm.mkv.avi.mpg.mp4
You can generate a package through VS. Packaging MSIX apps - MSIX | Microsoft Learn
You can press shift on keyboard or up on the dpad to access a pop up window for the current audio track if there is any active. For navigation, use the Xbox thumbstick or standard mouse controls.
There are a few important files/directories that the application uses.
-
EDCAPP/DigitalContent
This directory is where all media for the app should be stored. This would be audio, video, pdf, files.
-
EDCAPP/DigitalContent/TitleScreen.png
This is the splash screen that is displayed when the app is initially loaded.
If you want to add your own custom experience for a specific file type, you would.
- Go to the solution explorer and ADD a blank page, this generates a UWP .xaml page and a .xaml.cs code-behind.
- If the page requires data binding for dynamic content, it would be benificial to also create a viewmodel(.cs file) for your xaml.
- Go to DataModel.cs, and add your new content type. It should extend the Content class.
- The "SourcePageType" passed into the Content constructor is the class of the xaml page. You can find the class definition in the xaml.cs file of the .xaml file that was generated.
- Add your desired mapping(s) to the Extension map in the Constructor.
- Add your ContentType to the CreateContent(...) function.
Maintains an interface “Content” Content represents any files/directories that can be clicked within a directory. Clicking on one creates/navigates to a new frame. All content has
- Name
- Path
- View to display the content
- For example, you could set up Wav and mp3 files to fall under AudioContent
The MainWindow is the main window of the application. It encapsulates the whole application and contains a Frame for navigating between different pages and a Popup for displaying pop-up content.
The PopUpView is a user control that can be displayed as a pop-up in the application. It can be activated by a global key. It contains controls for media playback, including buttons for rewind, play/pause, and fast-forward, and a text box for displaying the current song title.
The SharedUIView is the main container for the application's default experience loop. It contains a NavigationView for navigating between different sections of the application and a Frame for displaying the content of the current section. It also maintains the Navigation stack. All content specific views are displayed within this view.
The TitleScreenView displays the landing page of the application once its loaded.
Displays a list of settings. It is accessed through the settings icon on the nav bar
Displays a list of clickable Content items. This view is displayed when a directory content is clicked
Displays web content using a WebView2 control. This view is displayed when an image or PDF is clicked
Plays video content using a MediaPlayerElement control. This view is displayed when a video content is clicked
Plays audio content using a MediaPlayerElement control. This view is displayed when an audio content is clicked. Audio in this view is synced with the AudioService.
The InputService is responsible for handling user input in the application. It uses a DispatcherTimer to poll for input at regular intervals. It supports both keyboard and gamepad input.
The AudioService is responsible for managing audio playback in the application. It uses a MediaPlayer to play audio. It allows audio playback in the background.
The app automatically uses the OS's active language settings. Note that changing the system language may require a sign-out or restart for the new language to take effect. Currently, only English has a resource file, as this code serves as a template. To add another language, such as Japanese (ja-JP), simply create a ja-JP folder inside the Strings directory and add a corresponding .resw resource file with the appropriate translations. The app should recognize the new language automatically. You can find language codes here. https://learn.microsoft.com/en-us/gaming/gdk/_content/gc/system/overviews/localization/console_supported_languages