LinkedIn principal author Doug Winnie describes how to add in icons and splash screens to your Universal Windows app using the package manifest interface in Microsoft Visual Studio 2015 Community Edition. In addition to adding branding graphics, Doug also highlights other areas of the customization options in the manifest including app description, capabilities, and more.
- [Voiceover] To add more customization to your app it is important to have icons and other design elements added in. In addition, if you ever want to release your app to Microsoft to list on the Windows store, you need to add additional information about the app defining what it can do and the asks that are used in it to display it in the store. This information is stored in the application manifest file. The file is an XML document, but when you open it in Visual Studio it is laid out as tabs that you can navigate to customize the app. Open the package.appx manifest file to display it in Visual Studio.
Let's go through the tabs one by one. But first is the application tab. This defines the name of the app and general information about it including which orientations it supports on a device. The visual assets tab is where you upload your icons and splash screen graphics to go with your app. We'll be working with this in a little bit. The capabilities tab defines what your app requires from the device. In order for an app to access the bluetooth capabilities of that device it needs to register what it requires.
This will allow Windows to notify the user that an application requires certain capabilities. Our app doesn't require anything, but by default, it states that it requires the internet. Declarations to find additional requirements of the app, for instance, if it requires a file picker, certificates, media playback, and more. Content URIs are used for certain types of notifications. And the packaging tab defines the package display name, version number, and the publisher. Let's go back to the visual assets tab.
As you go through the various items you'll see that it allows you to select images for specific icon sizes. Windows allows you to have icons that are small, square, wide, and large. Based on the size and resolution of that device it could be scaled at lots of different sizes. At a minimum we're going to upload one for each of these and provide a graphic for the 100% scale. If you're submitting the app to the store I'd recommend completing each one of the options. In the exercise files there are images for each resolution that is displayed here.
So let's add them for each tile and local option. The first one is 71 x 71. If I click the ellipse here and then I can navigate to my exercise files. And you'll see the icons are named appropriately. So I can use the 71 x 71. Then I can continue doing this for all of the other images. Finally, there is the splash screen. If you've noticed the splash screen currently is a square with a big X in it.
We can replace it with another image. The image I created has a solid background. By default it will be placed at the center of the window. You can use the background color to fill in around the image if it is smaller than the window to help keep a seamless appearance. The color used is #006837. We enter it in as a hexadecimal number. If there are any issues with the manifest file they'll be indicated with a red icon with a X.
In this case you'll see that lock screen notifications are not set. We can change that and put in badge. This was triggered because in the visual assets area we added a badge logo to our asset. With all the information entered let's go ahead and run the app. You'll notice that we now have a customized splash screen. And if I got to the start menu you'll see that we now have an icon for our app. I can pin this to the start menu and change the size to see all the various icons that were added to the manifest.
This is just the basics of customizing your app for your computer. There are lots of other options available as you learn more about universal Windows app development.
Finally, you'll experiment with your app to learn more about how Windows apps work, and then find out where to go next.
- Installing Visual Studio Community edition
- Working with C#, XAML, and the Windows SDK
- Getting a head start with starter templates
- Testing apps with device emulators
- Creating your first app
- Building interactions, game logic, and scoring
- Adding custom components
- Modifying design parameters in XAML
- Experimenting and updating the final app