Converting from Silverlight To Universal Apps – Themes and Styles

Converting a Windows Phone Silverlight app to a Universal WinRT app isn’t straight forward, and it’s hard to Google for answers. I converted one of my not too advanced apps to universal Windows/Phone and here are some of the things I had to do. The quick-list for Xaml changes is here.

In my Windows Phone Silverlight app I used a whole bunch of built in static resources for the control styles. You’ll have to go through them all and create your own or use new ones that work well on both Windows-devices and the Phone. To get better control of how controls are styled for shared views in Windows and Phone, I create 2 different MyStyles.xaml resources and place one in each project, then reference them in the App.xaml like this: 

<Application
    x:Class="Danforth.Matchkalender.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:viewModel="using:danforth.matchkalender.matchkalender.ViewModel">
    <Application.Resources>
        <ResourceDictionary >
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ms-appx:///MyStyles.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
            <!-- MVVMLight viewmodel locator -->
            <viewModel:ViewModelLocator x:Key="Locator" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

This way I can fine tune font sizes and such in both Windows and Phone view. The MyStyles.xaml for the Windows project may look like this:
<!--     WINDOWS      -->
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="MyTitleStyle" TargetType="TextBlock">
        <Setter Property="FontSize" Value="40"></Setter>
        <Setter Property="Foreground" Value="DarkOliveGreen"></Setter>
    </Style>
    <Style x:Key="MyGameDetailsBigStyle" TargetType="TextBlock">
        <Setter Property="FontSize" Value="60"></Setter>
    </Style>
    <Style x:Key="MyDateBorderStyle" TargetType="Border">
        <Setter Property="Height" Value="100" />
        <Setter Property="Width" Value="100" />
    </Style>
</ResourceDictionary>

And in the same file in the Windows Phone project I can actually use a resource that displays the phone accent color:

<!--     WINDOWS PHONE    -->
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="MyTitleStyle" TargetType="TextBlock">
        <Setter Property="FontSize" Value="30"></Setter>
        <Setter Property="Foreground" Value="{ThemeResource PhoneAccentBrush}"></Setter>
    </Style>
    <Style x:Key="MyGameDetailsBigStyle" TargetType="TextBlock">
        <Setter Property="FontSize" Value="30"></Setter>
    </Style>
    <Style x:Key="MyDateBorderStyle" TargetType="Border">
        <Setter Property="Height" Value="60" />
        <Setter Property="Width" Value="60" />
    </Style>
</ResourceDictionary>

No Comments