#9 – Styles

In WPF, a style is a set of property values that you can reuse when setting similar properties for a number of controls.  You can store a style as a resource and then apply that resource to multiple controls by setting their Style property.

Let’s say that you have a set of properties that you want to apply to several buttons in your UI.  You can first define a new style as a static resource:

<Window.Resources>
    <Style x:Key="StdButton" TargetType="Button">
        <Setter Property="Width" Value="100"/>
        <Setter Property="Control.Background" Value="AliceBlue"/>
        <Setter Property="Control.FontFamily" Value="Calibri" />
        <Setter Property="Control.FontWeight" Value="Bold" />
    </Style>
</Window.Resources>

Then you can apply this style using the Style property for individual Button controls:

    <Button Content="I'm stylish" Style="{StaticResource StdButton}" />
    <Button Content="Me Too" Style="{StaticResource StdButton}" />
    <Button Content="Not me"/>

#8 – Audio and Video

WPF makes it very easy to play audio or video content in your application.  You can play any media type supported by Windows Media Player including audio formats like WAV and MP3 or video formats like AVI, WMV, and MPG.

You play audio and video by including a media UI element directly in your XAML.  This allows rendering and playing video on a wide variety of user controls.  Here’s an example of a video playing on the surface of a Button.

<Button Height="258" HorizontalAlignment="Left" Margin="26,21,0,0" Name="button1" VerticalAlignment="Top" Width="436" >
    <Button.Content>
       <MediaElement Source="C:\Users\Public\Videos\Sample Videos\Wildlife.wmv" Stretch="Fill"/>
    </Button.Content>
</Button>

More Info: MSDN or CodePlex

#7 – Property-Based Animation

Animation is one of the core features of WPF.  Unlike older frameworks, like Windows Forms, you don’t implement animation using timers and rendering the animation frame by frame.  Instead, WPF uses property-based animation, where you animate graphical elements by declaratively specifying how one of its properties should change, over time.

You can implement animation by writing code or by specifying the desired animated effect declaratively, in XAML.  You can also use the tools in Blend 4 to create WPF animations.

As an example, here’s a snippet of XAML that defines a button that will change it’s Height and Width properties, forever expanding and contracting:

<Button Content="Click Me" Height="25" HorizontalAlignment="Left" Margin="25,25,0,0" Name="button1" VerticalAlignment="Top" Width="100" >
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="button1"
                        Storyboard.TargetProperty="Width"
                        From="100" To="105" Duration="0:0:0.3"
                        AutoReverse="True" RepeatBehavior="Forever"/>
                    <DoubleAnimation
                        Storyboard.TargetName="button1"
                        Storyboard.TargetProperty="Height"
                        From="25" To="30" Duration="0:0:0.5"
                        AutoReverse="True" RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

More

#6 – WPF Layout

WPF uses a flow-based layout model for positioning controls, rather than a coordinate-based model where the location of each control is specified using exact pixel coordinates.  This is a layout model that is similar to how web pages are laid out using CSS.

The flow-based layout model allows WPF controls to be adjusted to fit the window that they are being rendered in.  A WPF GUI is therefore both size- and resolution-independent.

All WPF controls are hosted in a container.  The main flow-based containers are:

  • DockPanel
  • Grid
  • StackPanel
  • WrapPanel

#5 – Vector Graphics and Resolution Independence

In WPF, you render things using vector graphics, rather than bitmaps.  This is true both of built-in controls and custom controls that you create.

Instead of coming up with a bitmap pattern that specifies every pixel to be drawn on the screen, you draw elements using basic graphical primitives, e.g. shapes, lines, and polygons.

Because WPF uses vector graphics, user interface elements will be rendered independently from actual device resolution.  The size of graphical elements in WPF is specified using device independent units, where each unit is 1/96th of an inch.  This means that user interface elements will always render at the specified size and not be affected by the pixel density (DPI) of an output device.

#4 – WPF Replaces Windows Forms

Windows Presentation Foundation (WPF) is Microsoft’s replacement for Windows Forms as a platform for developing client applications for Windows.  Windows Forms will continue to be supported, but WPF is the future for Windows client application development.

WPF provides many advantages over Windows Forms and the tooling in Visual Studio for WPF applications is now excellent.  (Visual Studio 2010).

#3 – Tools for Developing WPF Applications

The only tool that you’ll need for developing WPF (version 4) applications is Visual Studio 2010.  You can download Visual Studio 2010 Express for free.  (For a single development language).

To develop applications in other languages and for other platforms (e.g. 64-bit), or to take advantage of other advanced features, you’ll want a paid version of Visual Studio 2010.

To get more advanced functionality for designing user interfaces, you’ll also want Expression Blend 4.

#2 – Rendering Tiers

WPF applications automatically examine graphics card capabilities at runtime and assigns a rendering tier value, indicating what functions can be performed by the graphics card.

  • Tier 0 – No hardware acceleration, all rendering done using software
  • Tier 1 – Some hardware acceleration available.  DirectX version >= 9.0.  Hardware acceleration for:
    • Radial gradients
    • 3D lighting calculations
    • Text rendering
    • 3D anti-aliasing
  • Tier 2- Most features use hardware acceleration.  DirectX version >= 9.0

To determine the current rendering tier:

 int renTier = (RenderCapability.Tier >> 16);
 MessageBox.Show(string.Format("Tier = {0}", renTier));

#1 – What is WPF?

WPF (Windows Presentation Foundation) is a .NET class library that allows building graphically rich client programs that run on Windows.  WPF applications can either run as separate windowed programs or can run inside a web browser.

WPF renders graphical elements using 3D vector-based graphics, independent of screen resolution.  WPF uses DirectX for rendering graphical elements, which allows it to take advantage of hardware acceleration.  If hardware acceleration is not available, WPF renders elements using software, rather than hardware.

WPF replaces Windows Forms as a programming environment for creating client applications on Windows.