Quick Start

Learn how to enable conditional compilation in shared XAML files of a Universal App project (available in Visual Studio 2013 Update 2).

Step 1) Create project and share MainPage.xaml

Create a new Blank Universal App project. Copy the MainPage.xaml from the Windows 8.1 project to the Shared project. Remove the MainPage from both Windows and Windows Phone project. The MainPage.xaml is now shared in both projects.

UniversalShared.png

Step 2) Enable XCC

Open the solution context menu and select Manage NuGet Package for Solution.... Search for xcc and install the XAML Conditional Compilation NuGet package in both projects.

xccnuget.png

Step 3) Create XML attributes

Open MainPage.xaml in the Shared project and add (or update) the following attributes to the root element

<Page ...
  xmlns:win81="condition:WINDOWS_APP"
  xmlns:wp81="condition:WINDOWS_PHONE_APP"
  mc:Ignorable="d win81 wp81"
  mc:ProcessContent="win81:* wp81:*">
 ..
</Page>

The xmlns:win81 and xmlns:wp81 attributes define the namespaces for conditional compiled XML elements and attributes. The condition:xxx syntax is used to associate the XML namespace with the actual compilation symbols defined for the project. Elements and attributes prefixed with win81: are included when the project is compiled with symbol WINDOWS_APP. The prefix wp81: ensures the element or attribute is emitted only when the WINDOWS_PHONE_APP symbol is defined.

The mc:Ignorable attribute ensure the new xmlns prefixes are ignored by designers and compilers. The mc:ProcessContent attribute enables Intellisense inside conditional regions.

Step 4) Start using conditional compilation

With the conditional compilation namespaces in place we can now enter the following XAML

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button Content="Default button"  />
    <Button Content="Colored button" win81:Background="Red" wp81:Background="Green" />
    <win81:Button Content="Windows 8.1" />
    <wp81:Button Content="Windows Phone 8.1" />
    <win81:Grid>
        <Button Content="Another Windows 8.1 button" />
    </win81:Grid>
</StackPanel>

Step 5) Run

Compile and run the Windows 8.1 project. The following page is shown:

Mainpage.Win81.png

Run the Windows Phone 8.1 project and the following page is shown:

Mainpage.WP81.png

Last edited Apr 7, 2014 at 11:18 AM by kozw, version 13