Upgrade Existing WinRT Application to Universal Windows Platform (UWP)
This article describes upgrading C1Calendar sample application from WinRT to Universal Windows Platform (UWP). Attached WinRTCalendarSample is Universal Windows 8.1 application targeting Windows and WindowsPhone platforms. We will convert it into Windows 10 Universal application.
There are a number of blog posts and msdn articles about migrating existent projects (for example, this one). In many cases it would be much easier to start from the new empty UWP project. Let’s start!
Create UWP Application
1. Create a blank UWP application.
2. Add reference with C1.UWP and C1.UWP.Calendar according to the WinRT sample reference.
Here's how it looks for WinRT solution:
And here's how it should look for UWP solution:
Note, Visual Studio Extensions have UWP prefix instead of XAML. But all namespaces and control names remained the same as in WinRT Edition and still use XAML, so you don’t need to worry about this when porting your code.
So far the basic UWP project structure is created and you can build the project to check if it is working. Now we will port sample code starting from desktop.
Convert Desktop sample to UWP Application
1. Let’s use the same data, copy all files from Data and CommonData folder to UWP.
2. Copy MainPage.XAML and MainPage.XAML.cs files from Desktop to Replace MainPage.XAML and MainPage.XAML.cs files for UWP.
3. Check whether you have missing StaticResources. If it is your case, you should either replace them by ThemeResource references, or copy corresponding resources from the old application. In our sample we don’t need any modifications.
4. Update the App Logo in package manifest file.
First Copy the Desktop App Logo under the Assets folder to replace UWP Logo, then open the Package.appxmanifest file in your project. You need to edit the Package.AppxManifest file for UWP APP logo. Note that in UWP, we need to update the 30x30 logo to 44x44 logo. Also if you want your application logo look to conform to other Windows 10 apps, update the logo background.
5. Rebuild your UWP project and fix errors about incorrect namespaces
6. Run it on the Local Machine to check how it works. Note that the UWP APP default RequestedTheme is Light, you can change this.
Desktop Calendar App:
UWP Calendar App:
So far we converted Desktop sample to UWP. The old desktop sample was made without AppointmentManager because this feature was unavailable in Windows 8. Now it's possible, so after converting Phone sample, we will also add using AppointmentManager on desktop devices to keep sample working in the same way regardless of device.
Convert Phone sample to UWP Application
There are three ways to set specific DeviceFamily XAML Views in UWP. The new Universal Windows Platform brings a new feature known as DeviceFamily specific views, which allows developers to define specific XAML views for specific device families (Desktop, Mobile, etc.). This can be really useful if you want to have major differences in your UI for different device families. In this sample, we will use device-specific XAML page as it allows application to download device-specific XAML only. The most common way to accomplish this is to specify a new folder in your project, called DeviceFamily-Type, where Type is the name of the device family type (Mobile, Desktop, etc.). Let’s start.
1. Create new folder DeviceFamily-Mobile. Then add a XAML view with the same name as the desktop page (in this case, copy MainPage.XAML from Phone to UWP under the DeviceFamily-Mobile folder). This file will use the same code-behind with desktop page (MainPage.XAML.cs).
2. Copy all files under Template folder from Phone to UWP.
3. Note that code-behind file is the same for desktop and mobile pages, and you don’t need to do anything special to run one or another XAML; the environment will do this for you. So now we need to merge phone sample code to UWP MainPage.XAML.cs.
4. Add all missing using statements:
5. Rebuild the UWP app and fix errors about incorrect namespaces.
6. Check static resources in XAML page. The TextStyleMediumFontSize doesn’t exist in Windows 10 ThemeResources, so we need to change it. You can try to search appropriate style in Windows 10 ThemeResource. In this sample we will just set font size to 16.
WinRT Phone Xaml:
UWP Xaml:
7. Rebuild the UWP App to check if build process is successful. Change the RequestedTheme to Dark and run the sample on Mobile Emulator.
Windows 8.1 phone App vs UWP Phone App:
We converted Phone sample to UWP. On the next step we will add using AppointmentManager on desktop devices to keep sample working in the same way regardless of device.
Use AppointmentManager in desktop environment
1. Update the MainPage.XAML.cs. Combine cal1_DoubleTapped and calendar_DoubleTapped event handlers into single method calendar_DoubleTapped with 2 code paths depending from UseAppointmentManager field value. If it is true - application will work with device calendar applications, if false - with custom business logic:
private async void calendar_DoubleTapped(object sender, RoutedEventArgs e)
{
// show the list of appointments for the bolded day
FrameworkElement fel = e.OriginalSource as FrameworkElement;
if (fel != null)
{
DaySlot slot = fel.DataContext as DaySlot;
if (slot != null)
{
DateTime date = slot.Date;
string message = date.ToString();
if (slot.DataSource == null || slot.DataSource.Count == 0)
{
if (UseAppointmentManager)
{
// create new appointment and fill initial properties
Windows.ApplicationModel.Appointments.Appointment app = new Windows.ApplicationModel.Appointments.Appointment();
app.StartTime = date;
app.AllDay = true;
app.Subject = "Test C1 appointment";
// Show the Appointments provider Add Appointment UI, to enable the user to add an appointment.
// The returned id can be used later to edit or remove existent appointment.
string id = await AppointmentManager.ShowAddAppointmentAsync(app, new Windows.Foundation.Rect());
Refresh(calendar.DisplayDate);
return;
}
else
{
// Desktop using custom appointment
if (!Device.IsWindowsPhoneDevice())
{
DataTemplate boldedDaySlotTemplate = this.Resources["BoldedDaySlotTemplate"] as DataTemplate;
calendar.BoldedDaySlotTemplate = boldedDaySlotTemplate;
Appointment app = new Appointment();
app.Start = calendar.SelectedDate;
app.Duration = TimeSpan.FromDays(1);
app.Subject = "test event - " + app.Start.ToString();
_appointments.Add(app);
calendar.DataSource = _appointments;
return;
}
else
{
message += "\\r\\nNo events for this day.";
}
}
}
else
{
if (!UseAppointmentManager)
{
foreach (Appointment app in slot.DataSource)
{
message += "\\r\\n" + app.Subject;
}
}
else
{
foreach (Windows.ApplicationModel.Appointments.Appointment app in slot.DataSource)
{
message += "\\r\\n" + app.Subject;
}
}
var dialog = new MessageDialog(message);
dialog.ShowAsync();
}
}
}
}
2. Update desktop Xaml page
a. The BoldedDaySlotTemplate will be loaded dynamically when using custom appointment.
b. Add the same App bar as in mobile version:
c. In AlterAppearance event, application will use the DaySlotTemplateSelector resource, so copy it from the mobile XAML page:
Foreground="Plum" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontWeight="SemiBold" Margin="6,0,0,4"/>
3. Note that you need to add appointments capability to the app manifest, otherwise AppointmentManager won’t allow you to work with device calendar applications:
4. Note that C1Calendar control uses reflection to get data from the DataSource property value. To make sure that getting device appointments doesn't fail when application is compiled with .Net Native tool chain, add the next runtime directive to your default.rd.xml file:
Summary
You can find converted UWP sample in attachment. Note, it didn’t require any changes in C1Calendar-related functionality, neither in code nor in XAML. All changes are related to different project structure and platform differences. In UWP sample we got single project working on all devices instead of 3 projects in Windows 8.1 Universal app. It looks cleaner, lighter and we were able to re-use almost all code and XAML with minimal changes.
To run UWP sample you need to download our ComponentOne's UWP Beta Edition.
MESCIUS inc.