Developing WPF Browser Applications Online

2009-09-13T15:23:00Z

If you ever wondered if it is possible to develop WPF applications online, then the answer is yes. I recently stumbled upon a tool, called CodeRun. It is an online IDE that allows the developer to create various types of applications online, directly from the web browser, without the need to install any additional plug-ins or applications. One of the features of this tool is the possibility to create Windows Presentation Foundation applications. To be specific, it allows the developer to work on WPF Browser Applications (since it would not be possible at this time to run a client application).

The UI of the tool is fairly easy, and if you are familiar with Visual Studio, you won't find any trouble adapting to it. When you start it, you will see this UI:

I did not sign up for the service since the feature set provided without signing up is enough to get familiar with the WPF development capabilities using CodeRun. I am going to show you how it all works in the context of a generic WPF application. I will start creating the application in Visual Studio and will transfer the code to CodeRun.

Although CodeRun has many great features, it also has some drawbacks. First of all - no support for IntelliSense. So if you are used to type quickly and half way through the word select the appreopriate choice from the IntelliSense list, you won't be able to do this in CodeRun. Also, the debug/build performance isn't the same as in Visual Studio. It took me something like 20 seconds to build a blank WPF page. Also, at this moment CodeRun is lacking many features a client IDE (like Visual Studio) has to offer (like unit tests, plug-in support, various build/debug options etc.) I would call it an experimental model of an online IDE, but the whole concept and the development platform goes is very promising.

I created a simple WPF Browser Application using the File > New Project. The New Project window is very similar to the one of Visual Studio, so I just selected C# and then WPF Browser Application.

Same as in Visual Studio, there is auto-generated code, so you won't really have to build the page from scratch:

Another thing that is not yet implemented in CodeRun is a visual designer, so you have to do all in XAML/C# code, therefore you need to be quite familiar on how to work directly with XAML rather than just dragging and dropping controls on the page/window.

You can enter the code directly in the code window or upload a file from the computer (just right click the project name in the Solution window and select Add > File From My Computer) that contains code (for example, a .CS file). The performance of the code window also is a bit different compared to Visual Studio (expecially when it comes to syntax highlighting), but it is acceptable for development.

I created a sample application in Visual Studio that implements a generic button, progress bar and a text box on the page. Just like this:

I created an event handler for the button, so that with every button click, the progress bar value increments by 5. This is done quite easy:

private void button1_Click(object sender, RoutedEventArgs e)
{
if (progressBar1.Value != 100)
progressBar1.Value += 5;
}

The XAML code for the grid looks like this:

<Grid>
<Button Height="23" HorizontalAlignment="Left" Margin="12,14,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click">Button</Button>
<ProgressBar Height="26" Margin="97,12,12,0" Name="progressBar1" VerticalAlignment="Top" />
<TextBox Margin="10,63,12,12" Name="textBox1" />
</Grid>

The application runs fine from Visual Studio and does what it is supposed to:

I copied all the code above in CodeRun to see how it works. The directory structure is pretty much the same, so it shouldn't be a problem to find the Page1.xaml and the Page1.xaml.cs files.

It might take a while (as I mentioned - 20 to 30 seconds) to build the application.

Also, the application is compiled on the remote server (not on the client machine). After that, the application is downloaded.

And here it is, the same application up and running. It loads the XBAP file from the server and interprets it on the local machine (.NET Framework 3.5 is a prerequisite).

Overall, CodeRun is probably the first step in WPF development in the browser and it doesn't offer something you would get in Visual Studio, but it is a concept, that can be developed in a fully-functional WPF development environment pretty soon.

If you want to try this for yourself, just visit the CodeRun website.

Welcome

2009-09-11T13:03:00Z

Hi! I'm Dennis Delimarsky, the founder of this blog.

Wherever you come from (you could find my blog in so many different ways), welcome to the house of XAML (well, it is called The XAML Box). Here you will find articles and webcasts on Windows Presentation Foundation (WPF), that will help you improve your knowledge of WPF and some things that stand behind this technology, so check this blog once in while! If you have any comments regarding the content, ideas or you just want to ask me something, feel free to contact me or find me on one of the social networks listed here.

Thank you for visiting!
Dennis