Writing inline Code in WPF

Generally when you create a WPF window, you will get two files automatically created for you. One which represents the XAML, which is stored in .XAML extension file, and another is a class which is stored in a Code-Behind file with .cs extension. But in certain scenarios, it is actually required to write your Code – behind directly in XAML using inline x:Code styles. This post will give you a short tip to publish inline code in WPF.

Steps to create Inline Code:

1. Create an application to start with and delete the class files from it.
2. We use x:Code to embed our code inside a XAML file. Lets add the code below to the XAML :

   <Grid>
   
   <Button Margin="50"
   Width="300"
   Height="100"
   Click="Button_click" Content="Click Me"/>
   <x:Code>
   <![CDATA[
   
   void Button_click(object sender, RoutedEventArgs args)
   {
   Button btn = sender as Button;
   MessageBox.Show("Button is clicked","Inside x:Code");
   }
   ]]>
   </x:Code>
   
   

3. Remember to add the code inside ![CDATA[ ]] block. It is important.
4. Once you are done with it, execute the project and you will see the project runs fine.

Now lets see how it works.

You must have already know that XAML is actually converted to BAML (BinaryXAML) when we compile the project and also been added as Resource. In case of a XAML which holds code inside it, the XAMLC compiler is smart enough to separate the code from the actual design elements. If you see it in reflector, you will see a separate class is already created for the applicaiton which loads up the xaml of MainWindow and also lists the eventhandler we wrote inside Code block.

The generated code looks like :

[GeneratedCode("PresentationBuildTasks", "4.0.0.0")]
public class MainWindow : Window, IComponentConnector
{
// Fields
private bool _contentLoaded;

// Methods
private void Button_click(object sender, RoutedEventArgs args)
{
Button btn = sender as Button;
MessageBox.Show("Button is clicked", "Inside x:Code");
}

[DebuggerNonUserCode]
public void InitializeComponent()
{
if (!this._contentLoaded)
{
this._contentLoaded = true;
Uri resourceLocater = new Uri("/InlineCodeSample;component/mainwindow.xaml", UriKind.Relative);
Application.LoadComponent(this, resourceLocater);
}
}

[EditorBrowsable(EditorBrowsableState.Never), DebuggerNonUserCode]
void IComponentConnector.Connect(int connectionId, object target)
{
if (connectionId == 1)
{
((Button) target).Click += new RoutedEventHandler(this.Button_click);
}
else
{
this._contentLoaded = true;
}
}
}

So even though you write inline Code, the runtime actually does not include any code in XAML.

Limitation :

Even though XAML has flexibility to consume C# code as shown, it is in fact not at all recommended to be used in practice. In terms of architecture, it is always preferred to separate the designer and the code to keep developer and designer roles distinct. On the other hand XAML does not have intellisense defined in designer, so it is really messy to write code in XAML itself. You cannot add using statements inside XAML too, leading to use long fully qualified naming of classes etc. Another important limitation is that you cannot even define a member of the partial class it generates inside XAML.

Even though it is not a good idea to use this technique, I hope you like this approach.

Thanks for reading