Grouping XAML and code-behind file in Visual Studio

If you work with projects (Windows Phone app, Windows 8 app) that have XAML files using Visual Studio you noticed that xaml and code-behind files are grouped as follows:


But what if we have situation when XAML and code-behind file are not connected like this:


So, first I would explain how this grouping is obtained and then explain how to fix it if it is broken.

If we look at one page, i.e. PageOne in Windows Phone app it consist of XAML that is .xaml file and code-behind files .cs (if we use C# as programming language). When you are in the XAML file you can go to code-behind file with View Code command from context menu (F7):


When you are navigated to code-behind you can go back to XAML file with View Designer (Shift + F7):


Visual Studio helps this grouping on two places. In XAML the location of the XAML code-behind file is identified by specifying a namespace and class as the x:Class attribute of the root element of the XAML (PageOne.xaml):


XAML content is treated as partial class definition for a class PageOne (with TestProject.Pages namespace) derived from PhoneApplicationPage.

On the other side, Visual Studio set dependencies for code-behind files using .csproj project file:


  <Compile Include="Pages\PageOne.xaml.cs">

But what if this grouping of files are damaged. We can get this situation if we make copy of xaml and code-behind files in Windows explorer (from PageTwo make PageThree):


The point is that using existing page – PageTwo make copy then rename to PageThree and make some modification in files (real life scenario). First in xaml file change:


then in code-behind file .cs rename PageTwo to PageThree:


As a result, after adding existing files from folder Pages in solution explorer:


we have situation in Project:


Note that PageThree files (xaml and .cs) are not grouped as other pages (PageOne and PageTwo). One of the result of this situation is that you don’t have navigation from .cs file to .xaml file with View Designer-F7:


How to Fix this?

Easily, by changing TestProject.csproj file by adding DependentUpon element in xml file from:

<Compile Include="Pages\PageThree.xaml.cs" />


<Compile Include="Pages\PageThree.xaml.cs">

After fixing csproj file we have in solution explorer in Visual Studio:


Navigation from code-behind file are now possible:


Remarks: If you don’t fix this in non-grouped project files by changing csproj file by adding DependentUpon element, you will be able to navigate from .xaml file to .cs file and then from .cs file to .xaml file, but you can’t navigate if you have only .cs file opened and then try to navigate to correspondent .xaml file).

Whenever you add a page to a Visual Studio project (using Add New Item), Visual Studio automatically creates a XAML file (.xaml) with x:Class on its root, creates the code-behind source file with the partial class definition (.cs), and links the two together so they are built properly.

About Spaso Lazarevic

Spaso Lazarevic is Software Engineer working with Microsoft technologies. Microsoft MVP for Visual C# 2012 - 2016.
This entry was posted in Programming and tagged , . Bookmark the permalink.

4 Responses to Grouping XAML and code-behind file in Visual Studio

  1. Toni Petrina says:

    Great post. If you want quick and dirty UI solution, use NestIn extension:
    VSCommands also has the same UI shortcut, but this time it is called Group/Ungroup items:


  2. francis says:

    Very nice explanation – and here’s a little extra help on how to edit the .csproj file:
    Your work is appreciated!

  3. iotcoreview says:

    I’ve referred to this on my blog as a gem and added some further help wrt editing the project file.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s