Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

WPF Wonders: Getting Started with WPF : Page 2

Learn how to use Windows Presentation Foundation to build engaging, dynamic user interfaces that can really grab the user's attention.


advertisement
Getting Started
The point to remember is that WPF is not XAML, XAML is just a language that you can use to define an interface built from WPF objects. However, it's usually easier to use XAML to build those objects, and then load the XAML files into your projects.

Microsoft provides two tools for building programs that use XAML-defined interfaces: Visual Studio (VS) and Expression Blend (see the sidebar "Microsoft's XAML Tools" for more information). Both VS and Blend use the same project format; you can seamlessly open and edit projects you create in one product with the other. Blend is primarily a design tool. It lets you build the WPF user interface, set properties on objects, defines styles, create animations for properties, attach animations to some property changes and events, and so forth.

VS does all this plus it lets you add code-behind to the project—the code that sits behind the user interface, providing business and navigation logic, event handlers for WPF controls, and control manipulation capabilities. Code-behind can create and execute WPF animations, build new controls, and do anything else that you can do interactively using the Blend or VS WPF designers.

Unfortunately, neither Blend nor VS is a perfect solution; each has its weaknesses. VS's XAML IntelliSense is better than Blend's (although neither handles quoted attribute values very well) and its toolbars and designer experience are easier to understand, particularly if you're already used to VS. On the other hand, Blend provides a nice tool for building animations (you'll see more about animations later) that VS lacks. If you're using VS alone, you'll have to write the XAML code for animations by hand. Each tool occasionally does something strange, and the XAML gets a bit messed up so it's very useful to be able to modify the XAML by hand to remove property values, clear transformations, and generally check the sanity of the automatically-generated code.

Blend and VS also seem to understand XAML bugs in slightly different ways, so if you're having problems, one tool may be able to provide a more meaningful error message than the other. That alone makes using the tools together a particularly powerful combination. In fact, Blend has a nice link to VS. Simply right-click on a window and select "Edit in Visual Studio" to open the file in VS. There's a little strange synching of files as you move back and forth between the two applications but overall it works pretty well.

Microsoft's intent is for graphic designers to use Blend to build the user interface and for programmers to use VS to write the code-behind. Unfortunately, while there are VS Express Editions, there is no Blend Express Edition—and at $499.00 it's not a product everyone can afford. Many development groups cannot afford separate graphic designers and programmers, either.

If you don't want to shell out almost $500, I recommend that you wait until you're ready to really jump into WPF, download Blend's free 30-day trial, and really give it a good workout. If you want to do a lot of animation, you may find it worth the cost. Meanwhile, you can use VS to get your feet wet.

WPF Capabilities
Microsoft and enthusiastic developers can provide a long list of advantages for WPF. Some of these are really new and exciting. Others have been around for a long time in some form or another within VS.

The following sections briefly summarize some of the more widely trumpeted WPF capabilities.

Property Animation
This is a big one. WPF allows you to define animations that change an object's property from one value to another over time. For example, you could change a Button's Left position from 0 to 1000 over a one-second period to make the button move from the left edge of a window to a position 1000 pixels to the right.

Animations let you change positions, sizes, colors, opacities, transformation (scale, offset, or rotation), value, and so forth. The results are similar to those provided by Adobe Flash.

This feature is admittedly cool but for most applications it probably isn't strictly necessary. I've written a lot of business applications over the years and I can't think of a case where I thought, "Gee, I really wish I could make this button wiggle back and forth."

When overused, animations can be distracting and annoying. Property animation is like cooking with habañero peppers: A little bit can add some spice but if you use too many you're going to get burned.

DirectX
 
Figure 2. Terrific Transformations: WPF controls support simple rotation, scale, and skew transformations.
This is another big one. WPF controls are built using the newer DirectX drawing library rather than the venerable GDI (Graphics Device Interface) and GDI+ tools used by Windows for so long. By using DirectX, WPF controls immediately get big improvements in rendering speed. They also get transformations, better multimedia support, and three-dimensional graphics. The next three sections describe these in a bit more detail.

Transformations
WPF uses DirectX to allow you to transform just about anything in the user interface. That means you can translate, stretch, and rotate drawings, text, and controls relatively easily. The Transformations example program shown in Figure 2 uses simple transformations to rotate a Button -30 degrees, stretch a TextBox to three times its normal height, skew a Label by 30 degrees along the X axis, and horizontally flip a menu.

The following XAML code shows how the sample program Transformations builds its controls. The various transform objects (RotateTransform, ScaleTransform, and SkewTransform) give the controls in Figure 2 their unusual geometries.

<Button Margin="50" RenderTransformOrigin="0.5,0.5" Content="Rotated Button"> <Button.RenderTransform> <RotateTransform Angle="-30"/> </Button.RenderTransform> </Button> <TextBox Margin="50" Height="30" RenderTransformOrigin="0.5,0.5" Grid.Column="1" Text="Stretched TextBox"> <TextBox.RenderTransform> <ScaleTransform ScaleX="1" ScaleY="3"/> </TextBox.RenderTransform> </TextBox> <Label Margin="70,13,70,13" RenderTransformOrigin="0.5,0.5" Content="Skewed Label" Grid.Row="1" > <Label.RenderTransform> <SkewTransform AngleX="-30" AngleY="0"/> </Label.RenderTransform> </Label> <Menu Margin="8" Grid.Column="1" Grid.Row="1" Height="30" RenderTransformOrigin="0.5,0.5"> <Menu.RenderTransform> <ScaleTransform ScaleX="-1" ScaleY="1"/> </Menu.RenderTransform> <MenuItem Height="29" Header="Flipped MenuItem 1"/> <MenuItem Height="29" Header="Flipped MenuItem 2"/> </Menu>

I encourage you to download the example program and take a few minutes to experiment with the XAML transformation objects.

 
Figure 3. Video Variety: Transformations even allow you to display video that has been scaled, rotated, or skewed.
Better Multimedia Support
DirectX includes high-performance multimedia tools, so it's natural to think that WPF might include improved multimedia support—and you won't be disappointed. The TransformedVideo program example shown in Figure 3 uses MediaElement controls to display four copies of the same video. The XAML for the last three controls includes transformations so they display the video stretched, rotated, and skewed.

The following XAML code shows how this program defines the MediaElements shown in Figure 3. The first control shows the video in a normal manner. The others include transformations to scale, rotate, and skew the results.

<MediaElement Width="148" Height="112" Source="Bear.wmv" /> <MediaElement Margin="5" Width="95" Height="49.875" Source="Bear.wmv"> <MediaElement.LayoutTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="4"/> </TransformGroup> </MediaElement.LayoutTransform> </MediaElement> <MediaElement Margin="5" Width="148" Height="112" Source="Bear.wmv"> <MediaElement.LayoutTransform> <TransformGroup> <RotateTransform Angle="-30"/> </TransformGroup> </MediaElement.LayoutTransform> </MediaElement> <MediaElement Width="148" Height="112" Source="Bear.wmv"> <MediaElement.LayoutTransform> <TransformGroup> <SkewTransform AngleX="30" AngleY="10" /> </TransformGroup> </MediaElement.LayoutTransform> </MediaElement>

As you can see, there's no program code involved, just XAML. The MediaElement control provides simple methods for performing such actions as starting and stopping the media. It doesn't get much easier than this.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap