Customizing your UWP app
We saw in the previous recipe that creating a new UWP app is pretty simple, but in VS2015, the choices are limited to some basic types. Rather than provide some pre-made templates around common design themes (such as Hub, Split, Items, and so on) as was done previously in VS2013, Microsoft has instead decided to provide us with a blank canvas with which to work. Let's see how we can spruce it up a bit.
Getting ready
Windows 10 is required for this recipe. Visual Studio Community will be used to provide the example screenshots, but of course, a premium edition or VS Express for Windows 10 would also be suitable. If you still have the UWP app created in the previous recipe, open that solution file.
How to do it...
We are going to start with a brand new UWP app, so create a Blank App template. For our example, we will use C#:
- Create a new UWP app using the Blank App template.
- Once the project has opened, open the file
MainPage.xaml, as shown in the following screenshot:
- Once that file opens, your display should resemble the following screenshot. Next, click on the Toolbox label, indicated by the arrow:
- After opening the Toolbox, you will observe that the items previously separated into distinct templates are available in addition to several more XAML controls that can be used to implement your app's design. The following screenshot provides an excerpt:
- In our example, we will add a Button control and proceed. The following screenshot shows this addition:
- Now that we have a control added (or more, if you choose to do so), let's see what other design tools are available to us. The following screenshot illustrates the different sections that we will examine:
The following is the legend for the highlighted items in the preceding screenshot:
- This drop-down menu allows you to set the display for a particular device form factor. In this preceding screenshot, it is set to a 5" screen running at a 1920x1080 resolution. Options include various tablets, phone, desktop, Xbox, Surface Hub, and IoT style devices.
- The next two options allow you to toggle between portrait and landscape layout. In this screenshot, portrait has been chosen.
- There are several options in this section. Starting from the left, the drop-down menu allows you to set the zoom. The screenshot shows a zoom of 16.67%—several more are available, including Fit All. Next is the option to toggle the grid (for aligning controls), a toggle as to whether controls should be snapped to the grid, a toggle as to whether controls should align to snap lines, and whether or not the project code should be disabled.
Note
Snap lines are the red guidelines that appear when aligning controls in a similar region (left margin, top margin, and so on).
- After you have set the preview settings that you want, and possibly added some more design elements, you can view the changes by pressing F5 (debugging mode).
Tip
If you lose track of the Toolbox palette, you can return it to view via Ctrl + Alt + X, or through View | Toolbox.
- The following screenshot shows a running sample with a couple of controls:
How it works…
With VS2015, UWP app development has been streamlined so that creating a user-facing project (as opposed to a Class Library or Windows Runtime Component) is started with a Blank App template. Then you can add the components needed for your app, and select the layout that best fits the device(s) you are targeting:
Note
The Toolbox can be put to work for your needs. Right-clicking within the Toolbox lets you Sort Items Alphabetically. If you would like to make the list of controls more manageable to fit your particular workflow, you can create a new tab with a unique name (Example Toolbox was used here), as shown in the preceding screenshot. Controls can then be dragged from the existing tabs to your new grouping.
There's more…
As you have probably noticed from the tool box, there are numerous XAML controls available for use in your app. This includes the expected button and checkbox controls similar to those introduced with Windows 8.X app development, including Flyout and Hub controls.
Let's take a look at the some of the new controls added with Windows 10 for UWP apps.
SplitView
This is used to define a main content area for the most common presentation/interaction with your app, while also creating a work area for controls that can display on demand (if desired). Typically, this lets controls to be available as needed without clogging the view when they are not:
Tip
As of VS2015 Update 1, when using SplitView, be sure to wrap the content with <SplitView.Content> the same way as the pane content is wrapped with <SplitView.Pane>.
RelativePanel
RelativePanel is a more flexible layout, which can be used when the app's style isn't compatible with more linear layouts like Grid or StackPanel. With a RelativePanel, relative alignments of XAML controls can be specified so that they maintain the desired positioning during resizing or different device form factors. The following screenshot demonstrates an example of this panel:
In the RelativePanel shown in the preceding screenshot, the Left button anchors the design, and is placed in the top-left corner. The Right button is located on its right, and its position is defined to be to the right of the Left button, wherever that will be. Then the text block below is defined to be below the Left button, aligned with that button's left edge, while its right edge is aligned with that of the Right button. This allows the TextBlock (containing the lorem ipsum text) position to be dynamic based on the positioning of the buttons.
CalendarView
CalendarView is a calendar control that provides data picking for the user while allowing the developer to specify various options to configure blackout dates, acceptable date ranges, and how the dates are formatted. Unlike the CalendarDatePicker, the calendar is always displayed. The following screenshot illustrates this control:
CalendarDatePicker
CalendarDatePicker is similar to the CalendarView in that it lets a user select a date; the difference is that this control is used to choose a specific date rather than a range. Unlike the DatePicker, a familiar calendar display is used for date selection. The following screenshot illustrates this control:
MediaTransportControls
MediaTransportControls provides the ability to give your app the traditional media file playback controls: play/pause, seek bar, stop, rewind, and so on. Developers can customize which of these various components are displayed:
See also
- Creating a UWP app recipe
- Microsoft MSDN documentation on XAML controls at https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.aspx