Hello again, everyone!

Being in the ADM role, or any role in Microsoft for that matter, requires some knowledge of the different technologies that Microsoft offers. I've recently been studying a lot to better serve my customers, and one piece of technology that has captured my fascination is Windows Presentation Foundation. Being the type of person that appreciates UI aesthetic, I really like what WPF has to offer and take delight in experimenting with the different ways you can easily customize UI of applications with it.

But, of course, you may be asking yourself, what the heck is Windows Presentation Foundation?

Windows Presentation Foundation (WPF) is a newer way of going about developing applications. The key differentiator between Windows Presentation Foundation and Windows Forms is that in WPF the code for working with the user interface is separate from the rest of the code. Not only that, but it's in its own language built for designing user interfaces. That language is Extensible Application Markup Language, better known as XAML (if you're wondering how to say it, I like to think of it like saying camel, but with a z at the beginning instead of a c) When you create the interface with the XAML file, you then have files running behind the scenes in either Visual Basic .NET or C#-your choice when you make the project. I'm going to mostly stick with C#.

If you're not very familiar with creating graphical applications but you do know how to code (a little xml/html experience helps so you understand the idea of tags), you'll find that WPF is a great way to really control your user interface and make sure that you understand what's going on in your applications.

Let's play with WPF and see what we can do with it using  XAML. We'll begin with a really easy application-a window with a button, and when you click the button, "Hello, World" appears in the window-but we’ll have a little fun with it and change up the look of the button.

 

This is what Visual Studio 2010 Looks like when you open a WPF project.  You can see your window, as well as the xaml associated with it.  You can change the position of the code and window however you like using the middle bar in between the code and the window.

Adding a button is really easy: you can either click and drag one to the window from your toolbox (I placed my toolbox on the right), put one down in code in XAML, or create one from C# or VB code. Let’s put one down in XAML, in between the two grid tags. The Grid is a control that holds other controls, like buttons or textboxes.

<Grid>   

      <Button Content="Button" Height="150" Width="150" />

</Grid> * This source code was highlighted with Source Code Highlighter.

We don’t need to fill in every single property of the Button control if we code it out, but it’s best to at least put in width and height for starters. With those basic properties set up, your button will appear in the window.

Now from here, you can change different properties of the button-let’s say I wanted my button to be a big, red, round button-you know, the kind you’re never supposed to push :) . I can do that by changing the properties of the button to what I want them to be, and applying a clipping to make the button round. Here’s how the xaml looks:

<Grid>
    <Button Content="Button" Height="150" Width="150" Background="Red">

      <Button.Clip>

        <EllipseGeometry Center="75,75" RadiusX="70" RadiusY="70"/>

      </Button.Clip>

    </Button>
</Grid>

* This source code was highlighted with Source Code Highlighter.

What’s happening here is pretty simple- I’m changing the Background property of the button to Red, which is a preset setting for a color in Visual Studio. As you type in the value in the quotes, you’ll see the list pop up as you go, then you can press tab to fill it in-isn’t IntelliSense great? I personally feel pretty savvy whenever I take advantage of it :).

Anyway, next I’m using the clip capability to essentially crop the button to fit within the ellipse that I describe in the EllipseGeometry shape. The Center property represents the coordinates within the button control that I want the center of the ellipse to be.  The RadiusX and RadiusY property adjust the horizontal and vertical radius of the Ellipse, respectively, as an ellipse technically has two radii-that’s why they look the way they do. By making the two properties have the same value, you get a circle! Here’s what our button looks like now:

Looking pretty good! But it doesn’ t look very dangerous. Let’s change what the button says by changing the Content property.

<Button Content="DON'T PUSH ME!!" Height="150" Width="150" Background="Red">

* This source code was highlighted with Source Code Highlighter.

Here’s the result-

 

Ok, so now that we’ve got our button set up, let’s get a message to appear when we click on the button-you can set up an event handler easily in one of two ways-you can write the name of the handler in the XAML code and jump to it by right-clicking on it and choosing to Navigate to the Handler:

<Button Content="DON'T PUSH ME!!" Height="150" Width="150" Background="Red" Click="Button_Click">

* This source code was highlighted with Source Code Highlighter.

Or, since we’re making the handler for the most common button event, click, we can double-click on the button and jump straight to the code.

Either way, you get introduced to a page of C# or VB-whichever  language you chose your project to be in. This is called the code-behind, and it’s the underlying code of your application. Here, you carry out your functions and events separate from worrying about the UI. You can reference controls from the UI here and do with them what’s needed. So, let’s go ahead and enter in our code to handle clicking on the button.

private void Button_Click(object sender, RoutedEventArgs e)
{
  MessageBox.Show("Hello, World!");
}

* This source code was highlighted with Source Code Highlighter.

And there we have it! Now we can run our little project smoothly:

 

While this was just an example of what WPF can do, you can see how easy it is to change and customize your UI.  If you wanted your buttons or other controls to have more complex looks or for more than one control to share the same color scheme, you could create styles and resources to help with that.

If you want to know more about creating styles for your project, here’s a link explaining how it’s done, and I may at some point blog about it, too!

http://wpftutorial.net/Styles.html

Here’s another link that explains the differences between WPF and the other way of writing applications, Windows Forms, and an explanation of which is better to use for different situations

http://joshsmithonwpf.wordpress.com/2007/09/05/wpf-vs-windows-forms/

Hope this helps you, and happy coding!