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:

image

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

image

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):

image

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

image

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):

<phone:PhoneApplicationPage
x:Class="TestProject.Pages.PageOne"
....
</phone:PhoneApplicationPage>

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:

image

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

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):

SNAGHTMLb6d65df

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:

SNAGHTMLb8c13f9

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

SNAGHTMLb8f9a29

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

image

we have situation in Project:

image

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:

image

How to Fix this?

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

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

to:

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

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

image

Navigation from code-behind file are now possible:

image

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 Senior Software Developer working with Microsoft technologies. Leader of .NET User Group Bijeljina, speaker at Microsoft events, writter and blogger. Microsoft MVP for Visual C#.
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: http://visualstudiogallery.msdn.microsoft.com/9d6ef0ce-2bef-4a82-9a84-7718caa5bb45.
    VSCommands also has the same UI shortcut, but this time it is called Group/Ungroup items: http://visualstudiogallery.msdn.microsoft.com/d491911d-97f3-4cf6-87b0-6a2882120acf/.

    Cheers

  2. francis says:

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

    http://stackoverflow.com/questions/13387527/add-existing-xaml-files-to-visual-studio-2012
    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.
    http://embedded101.com/Blogs/David-Jones/entryid/727/GEMS-XAML-page-not-link-to-its-CS-Codebehind-Page-Solution

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s