In Visual Studio and Expression Blend whenever you create a XAML file, you'll also get a code behind file. What does it mean, when I say code behind? If you recall, XAML is really XML text, primarily used to specify the visual object tree for your control. The Visual Studio and Expression Blend designer tools write XML bits into this text file. Whenever you add non-markup code, let's say you're writing a button-click function in C#, that code must go in a separate C# specific file. The code behind file is the default location for this affiliated code, you can store the code elsewhere but that requires extra work on your behalf.
Visual Studio and Expression Blend add these files automatically whenever you create a new XAML file. In Silverlight each bit of code that you write is placed inside a code wrapper. This wrapper is known as a Type. The most common types using .NET are the Class type and the Struct type. If you are new to .NET be sure and watch the C# Essential Training to see how .NET handles the type system. Visual Studio always uses a class as the container-generated code. When you write your class, the code is placed inside a physical file on your computer. According to the rules of C# and VB Compiler you can define your types in these ways.
You could put one class in a single text file; you can put multiple classes in a single text file, let's say class A and class B. While this is possible, I find that it doesn't work very well in practice. Finally, you can split the class and put it in multiple text files. I can write class A and put it in a file, I can write other parts of class A and put it in a second file. And then I have to tell the compiler to put the two of them together with the partial keyword. I would like to show you how this works. I've switched to Visual Studio and I have opened the ExploringCodeBehind solution.
I have a project that contains three XAML files, App.xaml, MainPage.xaml and ProductEntry.xaml. Each one of these has a code behind file, you can see the code behind file by clicking on the Drop Arrow and looking at the sub element, here is one called ProductEntry.xaml.cs. When you add a new XAML file it automatically creates the code behind, I'll show you, right-click, choose Add>New Item, and then I'll select Silverlight User Control and call this ProductDetails.
Notice I am not specifying the XAML suffix. I'll click on Add and you'll see that in the Solution Explorer I now have our ProductsDetail.xaml and the affiliated code behind. If I double-click on the XAML, I see the XAML designer and if I double-click on the C# file I see the code designer, they are both linked. I will show you how these are linked. To do that I want to go to my XAML page. I would like to turn this into a text-only view, I can do that in Visual Studio by clicking on this Collapse Pane button and then switching from the designer to the XAML view.
In my XAML I have a root element named UserControl, this is the base class for my custom control which is called ProductEntry. If you look in the code behind page you will see that I have a class called ProductEntry that derives from User Control. This is the C# derivation character. Back to the XAML page. So that is my base class and then this section where it says x:Class. This tells the compiler where to find the code from my class. It's going to be in a namespace called ExploringCodeBehind and then a class called ProductEntry.
Again, let's return to my code file and look. Here is a namespace, ExploringCodeBehind and here is the name of my class, ProductEntry. You might remember earlier I said that if you have the partial keyword that means that you can define parts of your class in two separate text files. Now I'm not defining any code in the second file, but Visual Studio is. When I choose the build option, behind the scenes, the Build engine goes out and creates another partial file, and writes some designer-specific code in there. Let me show what I mean.
These files are normally hidden and you can't see them. So I am going to click on that Show All Files button and then I am going to go to my obj folder. This is used by the Compiler during the compile process. And look in here, drill down into the debug, and here is this partial file and the name of this is ProductEntry.g.i.cs. Now the g in this case stands for generated. There is a generated file, every time I compile it recreates this file. And if double-click on it, you'll see that it contains a public partial class, ProductEntry that derives from the UserControl.
Now I am not going into a lot of details about what's inside this file. This is used for wiring up event handlers and other things like that. I will close this window and return back to my product entries C# file. It's a code behind page, so I should probably add a little bit of code to show you how we can do that. I thought I would show you how to wire up a loaded event handler and change the background color of my ProductEntry page. I will make sure my product entry is the startup control, doing that in my App.xaml section and then I will go back to my code behind and I will wire up an event procedure, I will say this.Loaded += and I am going to press the Tab key twice.
Once to stub in this bit of code and then a second time to stub in the actual function. This code here on line 25 will run whenever my User Control is loaded into memory. I will say LayoutRoot.Background = new SolidColorBrush, and then I am going to come over here and use some of the built-in colors. So let's review what I did. I wrote a little bit of code in the code behind, that wires up an event procedure. This event code will run and my User Control is loaded into memory. Then I've got some code here that's creating a brand-new brush, and assigning that to the background of the layout which is the main grid on this control and I'm ready to test it, I'll press F5 and there is my custom-colored user control.
And now you've seen a few more details about the affiliated code behind file's work.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98974 Viewers
61 Video lessons · 86265 Viewers
71 Video lessons · 70107 Viewers
56 Video lessons · 102324 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Your file was successfully uploaded.