What is Windows Presentation Foundation (Vista Development)

I thought write some chain articles on .NET 3.0 and Vista Development from here on.So you guys can keep watching the blog daily for next 2 weeks.Ok Let me start from WPF which is buzz word among the .NET developers.

Many .NET developers will need to learn WPF soon and if you already know th basics, the best way to learn is by example. I will try to showcase as many WPF features as I can,

Windows Presentation Foundation (WPF) is a productive, unified approach to UI, Media, and Documents that you can use to deliver unmatched user experiences to your customers.

Microsoft has created a new site called windowsclient.net in place of the existing

Deliver Innovative User Interfaces
Unified approach to UI, media, and documents
Vector-based composition engine, hardware acceleration, resolution independent graphics engine
Works on Windows Vista, Windows XP and Windows Server 2003
Increase Developer-Designer Productivity; Flexible Application Deployment
Visual Studio IDE for developers; Microsoft Expression for designers
Declarative programming (XAML) for better designer-developer collaboration
Common code base and flexible deployment as stand-alone client or in browser
Leverage Existing Code Base and Skill Set
Interoperability with Windows Forms, Win32, DirectX, MFC, ActiveX
Leverage vested knowledge in .NET Framework, CLR languages, and Visual Studio IDE

WPF is Microsoft’s strategic presentation technology for Windows smart client user experiences. Use WPF to deliver innovative user interfaces through support for UI, media, document services, hardware acceleration, vector graphics, resolution-independent DPI for different form factors, data visualization, and superior content readability. Increase developer-designer productivity and collaboration through Visual Studio, Microsoft Expression Interactive Designer, and XAML. Write code once, and deploy as stand-alone client or in a browser. Incrementally embrace WPF through interoperability with Win32 and Windows Forms. Leverage vested knowledge in .NET Framework, CLR languages and Visual Studio IDE. Derive business value through new paradigms of user experiences, business intelligence through data visualizations, brand awareness through differentiated customer experiences, and customer loyalty through higher customer satisfaction.

We will look into one example

Let’s presume the customer has asked for a listbox that he can use in his very own RSS reader. He will provide the items to put in the CustomListBox as XmlFeed classes that encapsulate all information required about an rss feed:

-the name, an alias the user provided

-the URL address

-the category to which the feed belongs.

In addition to displaying all this information, the customer wants us to offer the possibility to edit all these feeds in place.

The Solution

We will create a custom class called ListHeader that represents a category. It will contain the name of the category (in a normal Label control) and an Image corresponding to the category.

Note: WPF offers developers the possibility to isolate their work from that of the designers by using XAML files in which the designers make the layout of the application. XAML is a relatively easy to understand markup language and it is the way to go from now on, but for more complex interfaces it will not be enough; code-based interfaces will still need to be written, at least partially, because some controls cannot be created in XAML.

below is the code
public class ListHeader : StackPanel
        StackPanel feedsStack;
        Label catName;
        double width;
        public ListHeader(string s, double w)
            this.HorizontalAlignment = HorizontalAlignment.Left;  
            this.Background = Brushes.WhiteSmoke;  
            catName=new Label();
            catName.BitmapEffect = new System.Windows.Media.Effects.EmbossBitmapEffect(); 
            Grid headerPanel = new Grid();
            headerPanel.BitmapEffect =new System.Windows.Media.Effects.DropShadowBitmapEffect();     
            headerPanel.RowDefinitions.Add(new RowDefinition() );
            ColumnDefinition clm = new ColumnDefinition();
            clm.Width = new GridLength(w/8);
            headerPanel.ColumnDefinitions.Add(new ColumnDefinition());  
            //Add and format the name of the category
            catName.Foreground = new SolidColorBrush(Colors.Blue);
            catName.FontSize = 22;
            catName.FontStyle = FontStyles.Oblique;
            //Add the corresponding category image
            Image catImage = new Image();
            catImage.Width = 20;
            catImage.Height = 20;
            catName.Width = w * 7 / 8 – 5;
            catName.HorizontalAlignment = HorizontalAlignment.Left;
            catName.HorizontalContentAlignment = HorizontalAlignment.Left;
Working with images
First we create the source 

           BitmapImage bitmapSource = new BitmapImage();
            // BitmapImage.UriSource must be in a BeginInit/EndInit block
            bitmapSource.UriSource = new Uri(” … “);</PRE>
To save significant application memory, set the DecodePixelWidth
or DecodePixelHeight of the BitmapImage value of the image source
to the desired height or width of the rendered image. If you don’t do this, the
application will cache the image as though it were rendered as its normal size
rather then just  the size that is displayed. Note: In order to preserve
aspect ratio, set DecodePixelWidth  or DecodePixelHeight but not both

bitmapSource.DecodePixelWidth = 20;
            catImage.Source = bitmapSource;

Then add the image where it belongs.

           headerPanel.Children.Add(catImage );
            catImage.HorizontalAlignment = HorizontalAlignment.Center ;  
            Grid.SetColumn(catName, 1);
            feedsStack=new StackPanel();
            feedsStack.Visibility = Visibility.Collapsed;  
            this.MouseLeave += new System.Windows.Input.MouseEventHandler(ListHeader_MouseLeave);
            this.MouseEnter += new System.Windows.Input.MouseEventHandler(ListHeader_MouseEnter);

Bitmap Effects

Wpf offers many easy bitmap effects for your convenience. We set a shadow for the image like this:

headerPanel.BitmapEffect =new System.Windows.Media.Effects.DropShadowBitmapEffect();     
If you would like more info on Bitmapeffects see this page, or just have fun exploring by yourself, but dont forger that bitmap effects are software rendered and so they are not  recommended for large scale usage.

Note: One of the main advantages of WPF is that it uses the power of your video board for most task and BitmapEffects do not benefit from this feature.

The Visual Tree and Logical Tree

One of the most importnat notions in WPF is that of logical tree. WPF objects can easily be embedded one in another with few restrictions. Where in .NET 2.0 we found string properties now we can insert any visual objects, even 3D. Thus we obtain a tree like structure, the  logical tree. For more easy-to-grasp information on this topic, see this link.

Note: WPF controls separate the logical function (logical tree) from the visual implementation on a control (visual tree) . This technique is one of the major improvements in OO in WPF; this article gives more detail on this feature.

Note: WPF takes a step forward and offers the possibility to have 3d Interfaces. For more info on 3d in WPF go here, and to see 3d-d2 integration techniques, read this article.


In practice, we will use panels to host our controls. These Panels are: Grid, StackPanel, DockPanel and Canvas. For more information on basic WPF layout, see this article. It will introduce basic notions that we will have fun with later, when we add some interesting features to our ListBox.

For now, remember that all fedds in the category are hosted in a StackPanel (called FeedsStack )as it offers the possibility to lay out objects one under another, in a stack-like manner.
Note :Another WPF advantage is its resolution-independence; Ever tried to see how your VB6 or even .NET app looks with a higher DPI? there’s no such thing as high-DPI hell on Vista!

The Expander Control

WPF comes with a control called Expander (there was such a control in .NET 2.0 also, but it was less known ) It has two major components. A Header that always stays visible and a Content whose visibility is toggled on and off by pressing a small button located on the header. We will use this to hide or show the editiong part of the ListBox. If you want more information on the Expander control, see what the MSDN says about it.

WPF Grid

Lets look over the code that adds a feed to a category. You will find that many of the .NEt 2.0 controls are still there, but with the increased functionality that the Logical Tree offers.

Note: Pay close attention to the Grid usage, because the Grid is one of the most flexible Panel in WPF and very usefull in interface design, making the basis of most complex interfaces. For another interesting example of Grid usage, see this article.
public void AddFeed(XmlFeed feed,System.Windows.RoutedEventHandler handler)
            Expander extraInfoContainer = new Expander();
            extraInfoContainer.Width = catName.Width * 8 / 10;
            extraInfoContainer.HorizontalContentAlignment = HorizontalAlignment.Right;
            extraInfoContainer.HorizontalAlignment = HorizontalAlignment.Center;
            extraInfoContainer.BorderThickness = new Thickness(1);
            extraInfoContainer.BorderBrush = Brushes.Gray;

            Grid detailsGrid = new Grid();
            ColumnDefinition clm = new ColumnDefinition();
            clm.Width = new System.Windows.GridLength(extraInfoContainer.Width * 1 / 2 );
            detailsGrid.ColumnDefinitions.Add(new ColumnDefinition());
            detailsGrid.RowDefinitions.Add(new RowDefinition());
            detailsGrid.RowDefinitions.Add(new RowDefinition());
            detailsGrid.RowDefinitions.Add(new RowDefinition());
            Button viewFeed = new Button();
            viewFeed.Click += handler;
            viewFeed.Background = Brushes.Transparent;
            viewFeed.BorderBrush = Brushes.Transparent;
            viewFeed.FontSize = 16;
            viewFeed.Foreground = Brushes.SteelBlue;
            viewFeed.Content = feed;
            extraInfoContainer.Header = viewFeed;
            extraInfoContainer.Content = detailsGrid;
            //Add the editing textBox for feed name
            TextBox feedName = new TextBox();
            feedName.Background = Brushes.Transparent;
            feedName.BorderThickness = new Thickness(0);
            feedName.Width = extraInfoContainer.Width / 2 – 1;
            feedName.Foreground = Brushes.BlueViolet;
            feedName.HorizontalAlignment = HorizontalAlignment.Right;
            feedName.HorizontalContentAlignment = HorizontalAlignment.Left;
            feedName.Tag = feed;
            feedName.Text = feed.feedName;
            Grid.SetColumn(feedName, 1);
            Grid.SetRow(feedName, 0);
            //Add the editiong textBox for feed adress
            TextBox bURL = new TextBox();
            bURL.Background = Brushes.Transparent;
            bURL.BorderThickness = new Thickness(0);
            bURL.Width = extraInfoContainer.Width / 2 – 1;
            bURL.Foreground = Brushes.BlueViolet;
            bURL.HorizontalAlignment = HorizontalAlignment.Right;
            bURL.HorizontalContentAlignment = HorizontalAlignment.Left;
            bURL.Tag = feed;
            bURL.Text = feed.url;
            Grid.SetColumn(bURL, 1);
            Grid.SetRow(bURL, 1);
            //Add the comboBox for choosing a category for the feed.
            ComboBox catChooser = new ComboBox();
            catChooser.Background = Brushes.Transparent;
            catChooser.BorderThickness = new Thickness(0);
            catChooser.Width = extraInfoContainer.Width / 2 – 1;
            catChooser.SelectedIndex = 0;
            Grid.SetColumn(catChooser, 1);
            Grid.SetRow(catChooser, 2);
            //Add labels for each of these editable info.
            Label lblName = new Label();
            lblName.Content = “Feed name:”;
            Grid.SetColumn(lblName, 0);
            Grid.SetRow(lblName, 0);
            Label lblAdress = new Label();
            lblAdress.Content = “Feed adress:”;
            Grid.SetColumn(lblAdress, 0);
            Grid.SetRow(lblAdress, 1);
            Label lblCat = new Label();
            lblCat.Content = “Category:”;
            Grid.SetColumn(lblCat, 0);
            Grid.SetRow(lblCat, 2);


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s