What you did in Hello WPF isn’t much different from what you could have done in Windows Forms. There are a few differences, however, even in this simple application, which aren’t readily apparent. For example, run the program again, and try stretching out the borders of the window, as shown in Figure 19-4.

Notice how the “Say Hello” button stretches as you stretch the window. That wouldn’t happen in Windows Forms without some extra tweaking on your part (you can load one of the examples from Chapter 18 if you want to check that). In fact, the label stretches too, but you can’t see that because the Label control has no border, and it’s the same color as the background.

Figure 19-4. When you stretch the window in WPF, the controls stretch with it.

Close the application and go back to the Window1.xaml window to see how that happened. Expand the XAML part of the window so that you can see it better. You’ll find that it looks something like Example 19-1, although the actual values will probably be different in your case.

<Window x:Class="Example_19_1_ _ _ _Hello_WPF.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>
        <Label Height="28" Margin="77,28,81,0" Name="lblHello" 
            VerticalAlignment="Top">Label</Label>
        <Button Height="23" Margin="77,66,126,0" Name="btnHello" 
            VerticalAlignment="Top" Click="btnHello_Click">
            Say Hello</Button>
    </Grid>
</Window>

We talked about the Window and Grid elements earlier. Within the Grid, you can see two elements: the Button and the Label that you added. The label has a handful of properties: the Name property that you changed earlier; a Height property that defines the height of the window, in units; a VerticalAlignment property that indicates which side of the window the control is aligned with; and finally, the Margin property.

The Margin property requires a bit of explanation; its value is set with four integers, separated by commas. Those integers indicate the distance between the control and each of the four sides, in a strict order: left, top, right, and bottom. If any of the values are zero, as is the case with the bottom values in this example, the distance doesn’t matter. If you use a single integer, all four sides use that value as the margin. You can also use two integers, in which case the first integer sets the left and right margins and the second sets the top and bottom margins.

In our example, the button is always 77 units from the left side of the window, and 126 units from the right. It’s 66 units from the top, but the bottom doesn’t matter. So, if you resize the window horizontally, the button stretches to keep the distances constant (unless you make the window too small). If you resize the bottom edge, though, the button doesn’t move.

Now you’re going to alter the properties of the controls in the XAML window, just to see what it can do. First, select the Grid element. You can do this either by clicking in the window, anywhere that’s not one of the controls, or by simply clicking on the <Grid> element in the XAML window. Either way, you’ll see the properties of the Grid element in the Properties window. In the Brushes section, click the Background property and set it to whatever you like (we chose IndianRed for this example). You can also simply type in the XAML window: type a space after the word Grid, and IntelliSense will provide a list of all the available properties and methods. Once you select Background, IntelliSense will provide a list of all the available background colors. You could do this with a Windows form as well, but your color choices would be somewhat more limited.

Now that you’ve changed the background color of the Grid, your Label control may be a bit harder to read. Click on the Label and scroll to the Brushes section in the Properties window. Set the Background property to whatever you like (we used SlateGray), and set the Foreground to White. Now scroll up to the Appearance section, and set the Opacity property to 0.5. This is a property that’s not available in Windows Forms. Click the Button control and set its Opacity to 0.5 as well. Run your application now, and you’ll see that the two controls have a translucent property to them, which is something similar to the Aero interface in Windows Vista. Example 19-2 shows the XAML for this application, simple as it is.

<Window x:Class="Example_19_2_ _ _ _Properties_in_WPF.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 Background="IndianRed">
        <Label Height="28" Margin="77,28,81,0" Name="lblHello" 
               VerticalAlignment="Top" Opacity="0.5" 
               Background="SlateGray" Foreground="White">
               Label</Label>
        <Button Height="23" Margin="77,66,126,0" Name="btnHello" 
                VerticalAlignment="Top" Click="btnHello_Click" 
                Opacity="0.5">Say Hello</Button>
    </Grid>
</Window>