Mind <Your .NET> Talk

WPF: How To Write Code Inside XAML

As you know doing with wpf, you'll see the common XAML specification rules that map .NET namespace like this:

xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

If you need to test your code <it might be usefull sometimes, which I don't recommend it under serious apps>  , Create a new project from visual studio just point to new WPF application or open your saved project. After that add new item under your selected project, under wpf select class or flowdocument , after new class or new flowdocument appear, just replace all the code on your new class/flowdocument with this code below. ( when you're create a new class make sure it save with xaml extention file , mine in this sample named Tes.XAML)

<Button  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     
         Width="200" Height="50"  Content="Hello Click Me Please !" />

Just after you're saved this xaml file, now you can test it as your StartupURI and run it. It should appears like this :

note that the runtime compiler know how to show the button, it not show only the button, instead it automaticly use the page class as parent container of the button, if you open this xaml file using IE , you will also see almost the same result :

But the point when test this result is, if you open your solution explorer, under obj\debug (make sure you already click 'show all buttons' on solution explorer toolbar), you'll see similar result as I have, in picture below:

If you're notice, the parser and compiler create another file respectively, since I have App.xaml it will have App.g.cs so Windows1.g.cs and not for Tes... other things is compiler also create BAML (Binary Application Markup Languange) which xaml file that compiled, including Tes.Baml and Window1.Baml, this BAML file actually will embedding in assembly being built, and performing the plumbing that connect to XAML (using procedure code..sure!)

Back to our sample, we'll learn interesting point when we create a event handler for our Tes.xaml file.

<Button  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
         x:Class="Tes"
         Width="200" Height="50"  Content="Hello Click Me Please !" Click="Click_This" >
    <x:Code>
        <![CDATA[
  
          void Click_This(object sender, RoutedEventArgs e)
          {
          MessageBox.Show("XAML IS COOL !");
          }
  
        ]]>   
    </x:Code>
</Button>

I've added couple things now, you see that the Italic and bold was new declarative, eventhandler and code:

1. x:Class="Tes", tell the compiler that I have declared Tes class under my XAML
2. Create a new click event handler for button that point to click_this procedure
3. Add <x:Code> , meaning that embeds procedural code to be inserted into the class specified by x:Classname (in this sample x:Tes)

You can try to run it, and click the button it should have result this:

Now the interesting part is, again open your solution explorer, you notice that Tes.BAML also companion with Tes.g.cs

If you try to open again the Tes.xaml, the parser will give error that you have to compiled the specified events, that means that the parser is only responsible to render the xaml not the procedural code. ( Btw WPF support run on Browser that's called XBAP, XAML Browser Application ) 

Conclusion

• One XAML should specify at least one XML namespace
• Pure XAML without proc should appear with Browser
• compiler will create xx.g.cs (for c#) so it does with vb I guess xx.gc.vb, when x:class declarative was inserted
• IMHO, writing proc code inside XAML is not recommended since misleading with the natural strategy to divide Designer and developer as ASP.NET has !!

Share this post: | | | |