Page 1 of 1

Code In Front instead of Code Behind

#1 StCroixSkipper  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 10
  • View blog
  • Posts: 121
  • Joined: 23-December 08

Posted 22 February 2010 - 08:51 AM

The other day I came across a XAML file with code in embedded in the XAML. What an intriguing idea. I'm not sure I like it or would even use it in an actual application. I still think the code should be with the code.

But since the idea is interesting and maybe it has a place, especially for designers or maybe quick prototyping here is a quick example.

First, quick create a WPF project. I called my project 'CodeInFrontTutorial'.

I like to change the 'Window1' names to friendlier names so I take the initial XAML which looks like

<Window x:Class="CodeInFrontTutorial.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        
    </Grid>
</Window>



and modify it to look like
<Window x:Class="CodeInFrontTutorial.CodeInFront"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Code In Front - embed C# code in XAML" Height="300" Width="300">
    <Grid>
        
    </Grid>
</Window>


To get my application to compile I need to make a few additional changes to the project.
1. go to the solution explore and right click on the 'Window1.xaml' entry and select the rename menu item and change the name to CodeInFront.xaml.

2. in the CodeInFront.xaml.cs file you'll need to change all of the occurences of 'Window1' to 'CodeInFront'.

3. in the App.xaml file change StartupUri="Window1.xaml" to StartupUri="CodeInFront.xaml".

Now the application should build with the improved names.

I use StackPanels a lot and in this instance I prefer them to the default Grid. So change Grid to StackPanel in the CodeInFront.xaml file.

For the record, I know I could write pure XAML code the do the same thing.

So let's define a Button in our StackPanel with HorizontalAlignment 'Center', Margin '20', and a Click event handler of 'MyButtonclick'. Now your CodeInFront.xaml file should look like

<Window x:Class="CodeInFrontTutorial.CodeInFront"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Code In Front - embed C# code in XAML" Height="300" Width="300">
    <StackPanel>
        <Button Name="btn" HorizontalAlignment="Center" Click="MyButtonclick">My Button</Button>
    </StackPanel>
</Window>



You have to be a little careful because Visual Studio will want to create the event handler in the CodeInFront.cs file automatically. If it does, simply select the MyButtonclick method and delete it.

To keep things simple, when we click our button, we want it change the background color and display "CodeInFront" and change the text to bold and italic. Pretty simple but you get the idea. You can actually add almost any code you want to get your button to behave exactly as you want it to behave.

Here goes.

at the end of the <Button></Button> element add the following lines.

<x:Code>
            <![CDATA[
            void MyButtonclick(object sender, RoutedEventArgs args)
            {
                Button btn = (Button)sender;
                btn.Background = Brushes.RosyBrown;
                btn.FontStyle = FontStyles.Italic;
                btn.FontWeight = FontWeights.Bold;
            }
            ]]>
</x:Code>



The [CDATA[]] section within the <x:Code> element stands for 'character data'.

As you can probably discern there are many restrictions to embedded code in XAML files. First, you code could not contain the characters ']]' as in 'int j = list[list[i]];'. Certainly not a big deal because you could write your code 'int j = list[list[i] ];' and it would work fine.

But there are other restrictions. You can't use 'using' directives in your embedded code so you may have to use fully qualified names.

Although this is technically 'pure' XAML, it doesn't work with applications that render .xaml files because xaml files that contain embedded code 'must be compiled'.

Here is what the finished CodeInFront.xaml file should look like:

<Window x:Class="CodeInFrontTutorial.CodeInFront"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Code In Front - embed C# code in XAML" Height="300" Width="300">
    <StackPanel>
        <Button Name="btn" HorizontalAlignment="Center" Click="MyButtonclick">My Button</Button>
        <x:Code>
            <![CDATA[
            void MyButtonclick(object sender, RoutedEventArgs args)
            {
                Button btn = (Button)sender;
                btn.Background = Brushes.RosyBrown;
                btn.FontStyle = FontStyles.Italic;
                btn.FontWeight = FontWeights.Bold;
            }
            ]]>
        </x:Code>
    </StackPanel>
</Window>



Now that you've seen embedded code in a xaml file, can we all agree that it is not good, even ugly, in most instances to fracture the code across .xaml and .cs files? What do you think? What instances do you see where this feature of xaml might be used to good advantage?

Is This A Good Question/Topic? 0
  • +

Page 1 of 1