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):
<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:
<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):
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"> <DependentUpon>PageThree.xaml</DependentUpon> </Compile>
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.