Windows Presentation Foundation User Education

Write Your Own Surface App with WPF!

Margaret Parsons [MSFT] — Tue, 12 Jul 2011 22:15:00 GMT

Hey WPF devs - as of today you can get the Microsoft Surface 2.0 SDK and write your own surface app. You can even use a Windows 7 touch computer to create and test your app! To start playing and get more info, go to the www.surface.com!

Inspire Improvements to Windows Phone Documentation

snoutholder — Fri, 03 Dec 2010 19:47:00 GMT

We are doing a study to see how we are doing with our documentation. Your input will inform and inspire improvements and new features for developers.
We’re looking for developers who

Code at least 20 hours per week
Are employed as software developers
Do not have a degree in user experience or usability
Have NOT worked for Microsoft in the past 5 years (including CSG and v-)
Do not have development experience with the Windows Phone 7

To participate, contact yannr@microsoft.com
We also encourage interested participants to fill out the survey at https://illumeweb.smdisp.net/Collector/Survey.ashx?Name=FY2011

A WPF Lab right in Visual Studio!

Carole Snyder - MSFT — Wed, 10 Nov 2010 00:27:48 GMT

I recently learned about Ron Jacob's Hand on Lab for Windows Workflow Foundation 4 and I liked it so much that I decided to create one for WPF. Check out the WPF Simple Application Walkthough on Visual Studio Gallery! I adapted an existing topic on MSDN to integrate directly with Visual Studio. The lab demonstrates creating a WPF application and doing some simple data binding. Those of you who are familiar with WPF won't learn anything new, but I'm hoping you will check it out anyway, to let us know if you like this method of learning.

A few things to keep in mind: You need Visual Studio Pro, Premium, or Ultimate to install the lab. The lab is presently in C# only. No Visual Basic. I know that overcoming those limitations are important to many of you and I hope we can do so in the future, but I wanted to get something to the community so we can get your feedback!

MSDN Magazine - A Coder’s Guide to Writing API Documentation

Jim Walker - MSFT — Fri, 05 Nov 2010 22:19:20 GMT

Peter Gruenbaum has written a great article in the November 2010 issue of MSDN Magazine about the why and how of documenting APIs . You can read it online here: Hello World! A Coder's Guide to Writing API Documentation.

My favorite feature of the WPF and Silverlight Tools update

Carole Snyder - MSFT — Thu, 26 Aug 2010 20:33:00 GMT

Update: I guess I didn't check the link I originally posted well enough. It's fixed, now. Thanks to Thomas Freudenberg for providing the correct link.

OK, I know this update is several months old, but I was so excited to see this feature that I wanted to share. If you're like me, you spend a fair amount of time in XAML files. These files, of course, get long and unwieldy. I've long appreciated the ability to collapse sections in Visual Studio to make navigating the files quicker, but I've been less that happy with the amount of information you see when elements are collapsed. For example, if you collapse the following style elements:

You only see <Style…/>, which doesn't give you enough information to know what each element really is.

The update for WPF and Silverlight tools in Visual Studio 2010 changes this feature so that the first line is shown. This is a great addition because now you have control over what you see when an element is collapsed.

The entire first line is shown, so you can decide how much information is shown. In the following illustration, I moved the TargetType property of each style to the first line of the element. Now you see the key and target type for the styles.

Thanks, Visual Studio, for this great addition!

Experiments with WindowChrome

Jim Walker - MSFT — Wed, 25 Aug 2010 18:25:00 GMT

In July, the Microsoft Ribbon for WPF was released. Hopefully you saw the announcements from the WPF Team and on Pete Brown’s blog, and have already downloaded the Ribbon. A little bonus that you get with the Ribbon is the WPF Shell Integration Library and documentation for it on MSDN. This library includes the WindowChrome class, which the RibbonWindow uses to draw things like the QuickAccessToolbar and contextual tab headers in the non-client area of the window. You can use the shell integration features without using the Ribbon, or you can download and use it on its own from MSDN Code Gallery.

Since the WindowChrome documentation only shows an example of creating a standard looking window, I wanted to share some other experiments that look a little more interesting. I built a simple calculator application, and gave it some different looks using WindowChrome. Double-clicking the system button switches to the next style. In these screen shots, only the window style is changing; the calculator control is the same.

In this post, I’ll quickly walk through creating the last style shown, which is modeled after the Gadgets window in Windows 7.

Using the WindowChrome class

The first thing to do to use the WindowChrome class is to add a reference to the Microsoft.Windows.Shell assembly. If you have the WPF Ribbon installed, you’ll find it listed under Assemblies > Extensions > Microsoft.Windows.Shell. If you are using the stand-alone library from Code Gallery, you’ll need to browse to where you put the .dll file.

Next, we’ll do some basic set up of the project and application window.

Add an Images folder to the project for icons and backgrounds.
Add XML namespace references for the Shell library and the local application.
Set the name, title, size, and icon properties.
(You’ll also need to add the icon to the project. Calculator.ico is from the Visual Studio Image Library (> Objects >ico_format > WinVista). The other images in this example were created using Paint.NET.)

When you're done, the XAML will look like this:

<Window x:Class="WpfChromeCalculator.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:shell="clr-namespace:Microsoft.Windows.Shell;assembly=Microsoft.Windows.Shell"
  xmlns:local="clr-namespace:WpfChromeCalculator"
  Title="Chrome Calculator" Height="260" Width="300"
  Icon="Images/calculator.ico" x:Name="CalcWindow">

    <Grid>
        
    </Grid>
</Window>

Now we can use WindowChrome to add some styles to the application. The WindowChrome documentation gives an overview of how to style the window using WindowChrome, so I won't cover everything in detail here. Check out the overview, and then we’ll get to customizing a style...

Styling WindowChrome

First, we’ll add a style to our window resources with a target type of local:MainWindow. We attach the WindowChrome object to the MainWindow using the WindowChrome attached property.

To get the transparent look of the gadget window, we’ll set the WindowChrome.GlassFrameThickness property to -1. This makes the glass effect cover the entire window. We’ll also set the ResizeBorderThickness and CaptionHeight properties. These areas are not visible, but respond to the mouse to provide window resizing and dragging.

<Window.Resources>
  <Style x:Key="GadgetStyle" TargetType="{x:Type local:MainWindow}">
    <Setter Property="shell:WindowChrome.WindowChrome">
      <Setter.Value>
        <shell:WindowChrome GlassFrameThickness="-1" 
                            ResizeBorderThickness="4"
                            CaptionHeight="36"/>
      </Setter.Value>
    </Setter> …

Next, we’ll add a control template that specifies the elements of the application window. The first thing to do here is to provide a ContentPresenter that displays the contents of the window. To make the content fit within the window border, we’ll put it inside an invisible Border and set the margins to match the widths of the window border (0 on the sides, 25 on the bottom, and 40 (RisizeBorderThickness + CaptionHeight) on the top).

Finally, we can specify any controls or other content that will appear in the border. This is the main point of using WindowChrome - the ability to put your own interactive WPF content in the window border. For the sake of this demonstration, the content will be a simple button to represent the System button, and a TextBlock to display the window title.

… <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:MainWindow}">
        <Grid>
          <!-- This is the ContentPresenter that displays the window content. -->
          <Border Margin="0,40,0,25" >
            <ContentPresenter Content="{TemplateBinding Content}"/>
          </Border>
<!--This is the transparent white rectangle that goes behind the window content.-->
          <Border Margin="1,40,1,25" BorderBrush="Gray" BorderThickness="0,1,0,1" 
                  Grid.ZIndex="-1">
            <Rectangle Fill="White" Opacity="0.5" /> 
          </Border>
          <!-- Window Border Content -->
            <!-- System Button -->
            <Button VerticalAlignment="Top" HorizontalAlignment="Left" Padding="1"
                    Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                    Path=(shell:WindowChrome.WindowChrome).ResizeBorderThickness}" 
                    shell:WindowChrome.IsHitTestVisibleInChrome="True"
                    Command="{x:Static shell:SystemCommands.ShowSystemMenuCommand}"
                    CommandParameter="{Binding ElementName=CalcWindow}">
               <Image Source="{Binding RelativeSource=
                                      {RelativeSource TemplatedParent}, Path=Icon}" 
                      Width="16" Height="16"
                      shell:WindowChrome.IsHitTestVisibleInChrome="True"/>
            </Button>
            <!-- Window Title -->
            <TextBlock VerticalAlignment="Bottom" TextAlignment="Center" 
                       Padding="0,0,0,8" 
                       Text="{Binding RelativeSource=
                                     {RelativeSource TemplatedParent}, Path=Title}" />
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</Window.Resources>

There are a few interesting things to note in this XAML.

The button margin is bound to the ResizeBorderThickness property. This keeps the button from covering the resize border, so you can resize the window from the upper left corner.
The button command is set to SystemCommands.ShowSystemMenuCommand. This shows the system menu when the button is clicked, just like the real system button. Download the project to see the full implementation.
On both the button and the image, we set the IsHitTestVisibleInChrome attached property to true. This allows the button to receive mouse input. By default, elements that are placed in the window border are not interactive.
The image that is in the button is bound to the Window.Icon property, so the replacement “system” button displays the application icon. Similarly, the TextBlock is bound to the Window.Title property.

Applying the Style to the Window

Now that the window style is defined, we need to apply it to the window. To do this, we’ll handle the Window.Loaded event and set the Window.Style property. Since this style uses Aero glass effects, it won’t render correctly on systems that aren’t using Aero glass (Windows XP, or Vista/ Window 7 with Aero disabled). Before we apply the style, we’ll want to check if glass effects are enabled, and only apply the style if they are. Fortunately, the Microsoft.Windows.Shell namespace also includes the SystemParameters2 class, which provides an easy way to access system settings that are useful with WindowChrome. We can simply check the IsGlassEnabled property before setting the style.

        public MainWindow()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainWindow_Loaded);
        }
 
        void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            Style _style = null;
            if (Microsoft.Windows.Shell.SystemParameters2.Current.IsGlassEnabled == true)
            {
                _style = (Style)Resources["GadgetStyle"];
            }
            this.Style = _style;
        }

With just this XAML and code, we’ve got a window that resembles the Windows 7 gadget window. Now we just need to add some content.

You can download the complete sample from MSDN Code Gallery.

Getting Started with WPF

Margaret Parsons [MSFT] — Tue, 17 Aug 2010 20:29:00 GMT

The writers on the WPF Developer Content team own over 30K topics in the MSDN library. But one of the most viewed topics is Getting Started (WPF). I'm trying to make the topic more helpful, relevant, to the point, etc. I updated the page a few months ago and was hoping I'd get some feedback from customers who either loved it or hated it. So far, I've heard crickets. Basically, I took the old page, which was just a list of links to all the topics down one level in the tree and replaced that with a list of what I thought people might be looking for when they click on a topic called "Getting Started." I was trying not to make it a long topic that you'd have to read though but more of a jumping off point. If you are interested, here is the link to the 3.5 version and the 4 version. What do you think? Is it more useful? Not? If not, why not? Send me feedback via the feedback on MSDN or just leave a comment here.

Thanks,
Margaret

Have you started developing for Windows Phone 7 yet?

Carole Snyder - MSFT — Fri, 30 Jul 2010 17:07:00 GMT

If you haven't heard the latest buzz about the Windows Phone 7, you must be living under a rock. Or at least away from the Internet! Now you can develop applications for Windows Phone before it even debuts! The Windows Phone 7 Developer Toolkit is available for download. Also, be sure to check out the Windows Phone 7 Training Kit for Developers. This neat little package comes with walkthroughs to help you get started developing for the Windows Phone with Visual Studio 2010 and Expression Blend. Enjoy!

Principles of software development from an alumnus of the WPF team

Margaret Parsons [MSFT] — Wed, 28 Jul 2010 23:54:52 GMT

I got an email the other day from Ivo Manolov who worked for several years as the test lead for WPF and then for a bit as the PM lead. He's recently moved to a new group, but he summarized what he's learned from his experience leading the WPF team into two blog posts. One on driving projects (Principles 1: The Essence of Driving – A Crash Course in Project Management) and one on testing (Principles 2: Principles of Software Testing).

Enjoy!

Margaret

The new WPF Team Blog - one place to get it all!

Margaret Parsons [MSFT] — Wed, 21 Jul 2010 14:22:53 GMT

The WPF team has put together a new blog where you can go and find out what the people who create WPF are up to. We'll still be here writing the developer content and blogging about that, but if you want to find out what your favorite WPF developer (or tester, PM, architect, etc.) is thinking about, check out the new WPF Team Blog. They've even got a WPF Twitter Feed!

Margaret

Finding code in the MSDN Library

Margaret Parsons [MSFT] — Wed, 07 Jul 2010 22:26:07 GMT

At Tech Ed, one of the things we heard over and over is “More code!” This is not a new comment. We hear it a lot and believe me we are trying to get the code you want (simpler, more complex, full downloadable sample) where you want it. But there are a few tricks to finding code already out there.

1. Use MSDN search

MSDN Search has a new feature which will show you which pages have code examples. It isn’t always 100% accurate but it is pretty good most of the time. For searching tips, see the blog post Tips and Tricks for searching for Silverlight content on MSDN and replace the word “Silverlight” with “WPF.” And for more info on MSDN URLs, see Too many pages with the same name.

2. Look for titles that start with “How To” or “Walkthrough”

We have two content types that are specifically intended to included code, not just words. In general, a “How To” is going to be a short topic showing you how to accomplish a (relatively) simple task. While a “Walkthrough” is usually going to be a long, step-by-step list of instructions that (usually) results in a full, running sample at the end. Walkthroughs almost always have a downloadable sample that you can get.

3. Look for Example sections in the Class Library

Whenever you land on what we call our reference topics (e.g., Control.Foreground Property (System.Windows.Controls)), the pages have a specific set of sections, including Syntax, Remarks and Examples. The syntax sections are all auto-generated so they are provided for your convenience. The authored content is in the Remarks, Examples and See Also. In addition to the example provided, WPF content uses a unique system where we can include “How To” topics in the reference pages. If we have linked to more than one, the first will appear as an example and you will find a table, way down at the bottom of the page which contains links to more code using this API. The See Also section frequently contains links to more useful content, so don’t forget to scroll to the bottom of the page when you are looking for help.

4. Take advantage of the various community sites that contain sample code.

We post all the full samples used in our documentation on code gallery. You can download one at a time or all of them from WPF Documentation Samples.

In addition to what we provide, there are several other places to look.

WindowsClient.Net provides starter kits and samples to get you started writing your applications.

MSDN Code Gallery contains a lot of sample apps provided by the community.

MSDN Blogs often have a lot of interesting code examples. Also note that when you use MSDN Search, it includes blog entries and uses the same “Includes Example Code” listed in #1.

And as always, you can get help with your code from the community (as well as a lot of people who work on WPF) on the Forums. And if you have requests, comments, issues, etc for our documentation, use the Feedback button (at the bottom of the page in Lightweight and the stars at the top in Classic MSDN view. And if you don’t know what I’m talking about see this post.

Margaret

Find the WPF sample you want with this "map"

Margaret Parsons [MSFT] — Wed, 30 Jun 2010 20:43:06 GMT

I got an email the other day that included a twitter post with a link to this "map" of our documentation samples. It is a pretty fun way to see what all we have available. I don't know who created it but I really like it! Especially since we had a hard time designing our wiki page on code gallery. Check it out and see what you think. http://vivamind.net/maps/detail/70/WPF-Documentation-Samples

Margaret

Greetings from TechEd 2010

Margaret Parsons [MSFT] — Mon, 07 Jun 2010 17:40:20 GMT

This week I'm hanging out at TechEd 2010 to find out more about what customers are interested in learning about in our documentation. I'll be attending sessions and attempting to get people to tell me all about their experience with the MSDN Library. If you are at TechEd, you can find me (or my friend Cheryl) lurking in the Exhibition Hall in the TLC Blue section, either by the WPF or paterns & practices booth. We'll be trying to get customers to fill out our survey to let us know more about how they use the Library and what they like and don't like about it. You can also go here to fill out this survey online. The survey was created by our content architect, Kathleen McGrath, who is also here running around waving surveys! Your feedback is extremely important to us and we get very little of it. So if you use the Library, please take a few moments to fill out the Visual Studio and .NET Framework Library Content Survey.

Margaret

More tools for WPF 4 application development

Margaret Parsons [MSFT] — Wed, 26 May 2010 22:40:43 GMT

You might have heard a lot of buzz about the recent release of the Silverlight 4 Tools for Visual Studio 2010. But what you might not have heard is that a lot of the features in the new tools work just as well for developing a WPF application! Here’s some of the features you might find interesting:

When you are working with styles, you now get intellisense based on the target type (yay!)
“Go To Value Definition” feature that will take you to where style being applied is defined.
Drag and drop data sources to create resources
Right-click context menu on Grid design that lets you add and remove rows and columns

Go here for the download and see the blog post by Mark Wilson-Thomas for way more details.

Also, the Performance Suite is now available for WPF 4 developers. Now you can use all the great profiling tools you loved for 3.5 with your 4 app. See Jossef Goldberg’s blog post for details.

Help Viewer Power Tool Provides Index and Standalone Window

Carole Snyder - MSFT — Fri, 14 May 2010 17:48:00 GMT

Microsoft released a Power Tool that adds keyword index capability to the Help Viewer with an option to display help in a standalone window. If you've been missing these features in Visual Studio 2010, check it out! If you have any questions or problems with the Power Tool, you can go to the Developer Documentation and Help System forum at http://social.msdn.microsoft.com/Forums/en-US/devdocs/threads.

Calling a Stored Procedure from your WPF app

Margaret Parsons [MSFT] — Tue, 04 May 2010 22:59:00 GMT

Recently I needed to get data from a database by calling a stored procedure. This seemed like it should be easy to do but it ended taking me 2 days to find the right feature that would work. My knowledge of databases is extremely limited and I ended up winding along a not very helpful path. Hopefully this blog post will help you avoid the same pitfalls.

I started off thinking I needed something from LINQ to SQL so I searched for that and came up with the LINQ to SQL ORM. This seemed like it would be SUPER easy, but for reasons I still don’t understand (I found this forum post which I think might be related) I could never get the return type to auto-generate correctly so I could run the query but I couldn’t get the data out. I have since discovered that the Entity Framework provides similar (seemingly better) functionality. In fact MSDN states “For new applications, however, Microsoft recommends using the the Entity Framework that can accommodate both direct mapping and a higher-level conceptual mapping between the application object model and the relational model of the database.” But for some reason this still doesn’t work for me. If I were starting out again (with a stored procedure that had a defined return type), I would start with the Entity Framework. Try these docs as it took me a while to figure out what I was doing: Entity Data Model Wizard and How to: Import a Stored Procedure (Entity Data Model Tools).

Instead I finally found the ADO .NET docs which had exactly what I was looking for and it did turn out to be super easy. Go to this page and scroll down to the Using Parameters with a SqlCommand and a Stored Procedure section.

In my example, I read the data and write it to an XElement.

Here’s some code to retrieve the data:

//Get all data

connection.Open();

XElement data = new XElement("Data");

try

{

SqlDataReader reader = command.ExecuteReader();

int numCol = reader.FieldCount;

while (reader.Read())

{

int i;

XElement temp = new XElement("Topic");

for (i = 0; i < numCol; i++)

{

temp.Add(new XAttribute(reader.GetName(i),

reader[i].ToString()));

}

data.Add(temp);

}

catch (Exception e)

{

MessageBox.Show(e.Message);

}

connection.Close();

Then I had to define each column and bind it to the XElement data. See my post on A DataGrid sample using XML data for example code. I happen to like LINQ a lot so I use XElement all the time, but if you are not a big fan, you could put your data into a DataTable or any of the Binding Sources available for WPF apps.

That’s it. Happy coding,

Margaret

Keep Offline Help Up-to-Date in Visual Studio 2010

wcsdkteam — Thu, 15 Apr 2010 23:54:43 GMT

One of my favorite features offered by the new help system in Visual Studio 2010 is the ability to easily update offline content with the latest documentation from MSDN. If you use offline documentation in Visual Studio, one of the first things you should do after installation is to check for the latest updates to the documentation. (Hopefully you’ve noticed that the .NET 4 WPF docs are no longer in ‘preview mode’ on MSDN…)

In previous versions of Visual Studio, there was no way to update the documentation that shipped in the box. When documentation bugs were fixed or new content was added, you had to go to the online library to see the latest content. Now you can use the Help Library Manager to easily find and install the latest fixes and additions.

There are two ways that you can get to the Help Library Manager.

Through the Start menu: Start > Microsoft Visual Studio 2010 > Visual Studio Tools > Manage Help Settings

Through the Help menu in Visual Studio 2010:

In the Help Library Manager, you can select whether to use online or local help, install content, and check for updates.

You can only check for updates to content that you have installed locally, so if you haven’t installed content, select ‘Install content from online’ to select content to be installed locally.

If you have content installed, select “Check for updates online”.

You’ll be shown a list of the content that you have installed, whether updates are available, and the size of the download. Click ‘Update’ to download and install the latest content.

You have to check for updates manually, so how often should you check? If the download size is not an issue and you want to have the very latest content available, I recommend checking every 4 to 6 weeks to keep your local help updated with newly published content.

For more information about the new help system, see this video on Channel 9 and the official documentation on MSDN.

OpenFileDialog sample

Margaret Parsons [MSFT] — Fri, 26 Mar 2010 21:00:00 GMT

I finally got some time to dig through all my customer feedback requests and found a glaring problem! The OpenFileDialog class has basically no content on it and so I set about correcting that. It turned out there was a nice little example already living in the Dialog Boxes Overview topic but with no links to that topic from the class, it doesn't help you out much. Anyway, here is the code sample and some art showing the new updated look for the dialog boxes with .NET Framework 4 Release Candidate. Also, I want to point out that if you choose to take the time to submit feedback on the documentation (which we really, really, REALLY appreciate), not only does an actual real person read every single comment, but we also try our best to fix it. In this case, all the comments said "need sample" so if you have a sample in mind or a property or method you want to see in action, please be specific and then you will, most likely, see something show up in the content sometime in the future.

Anyway, here is the sample code and the promised image of the new dialog. This sample creates the OpenFileDialog object, open's the dialog box and shows how you can handle the result.

' Configure open file dialog box
Dim dlg As New Microsoft.Win32.OpenFileDialog()
dlg.FileName = "Document" ' Default file name
dlg.DefaultExt = ".txt" ' Default file extension
dlg.Filter = "Text documents (.txt)|*.txt" ' Filter files by extension

' Show open file dialog box
Dim result? As Boolean = dlg.ShowDialog()

' Process open file dialog box results
If result = True Then
' Open document
Dim filename As String = dlg.FileName
End If

// Configure open file dialog box
Microsoft.Win32.OpenFileDialog dlg = new Microsoft.Win32.OpenFileDialog();
dlg.FileName = "Document"; // Default file name
dlg.DefaultExt = ".txt"; // Default file extension
dlg.Filter = "Text documents (.txt)|*.txt"; // Filter files by extension

// Show open file dialog box
Nullable<bool> result = dlg.ShowDialog();

// Process open file dialog box results
if (result == true)
{
// Open document
string filename = dlg.FileName;
}

And here is the image:

Margaret

Finding an Object TreeViewItem

Carole Snyder - MSFT — Tue, 23 Feb 2010 21:22:00 GMT

The question often comes up, "how do I get to a certain TreeViewItem?" The question arises because a TreeView is bound to a data source, TreeViewItems are implicitly created and wrap the data object. However, the TreeView.SelectedItem property returns the data object, not the TreeViewItem. This is good when you need to access the data, but what if you need to manipulate the TreeViewItem? It has been suggested that if you design your data model correctly, you can avoid needing to manipulate TreeViewItems directly. While that is good general advice, there might be cases where manipulating the TreeViewItem is unavoidable.

Finding the TreeViewItem in a TreeView is more involved than finding item containers in other ItemControls (such as a ListBoxItem in a ListBox) because TreeViewItems are, naturally, nested. For example, to return the ListBoxItem of an object in a ListBox, you can call ListBox.ItemContainerGenerator.GetContainerFromItem. But if you call GetContainerFromItem on a TreeView, the ItemContainerGenerator searches only the direct child objects of the TreeView. So you need to recursively traverse the TreeView and child TreeViewItem objects. A further complication is that if the TreeView virtualizes its items (you enable virtualization by setting the VirtualizingStackPanel.IsVirtualizing property to true), the child items need to be created before you can check its data object.

Given the complexity of the problem, I (with help from the development team) created a method that traverses the TreeView and realizes any virtualized items.

/// <summary>

/// Recursively search for an item in this subtree.

/// </summary>

/// <param name="container">

/// The parent ItemsControl. This can be a TreeView or a TreeViewItem.

/// </param>

/// <param name="item">

/// The item to search for.

/// </param>

/// <returns>

/// The TreeViewItem that contains the specified item.

/// </returns>

private TreeViewItem GetTreeViewItem(ItemsControl container, object item)

{

if (container != null)

{

if (container.DataContext == item)

{

return container as TreeViewItem;

}

// Expand the current container

if (container is TreeViewItem && !((TreeViewItem)container).IsExpanded)

{

container.SetValue(TreeViewItem.IsExpandedProperty, true);

}

// Try to generate the ItemsPresenter and the ItemsPanel.

// by calling ApplyTemplate. Note that in the

// virtualizing case even if the item is marked

// expanded we still need to do this step in order to

// regenerate the visuals because they may have been virtualized away.

container.ApplyTemplate();

ItemsPresenter itemsPresenter =

(ItemsPresenter)container.Template.FindName("ItemsHost", container);

if (itemsPresenter != null)

{

itemsPresenter.ApplyTemplate();

}

else

{

// The Tree template has not named the ItemsPresenter,

// so walk the descendents and find the child.

itemsPresenter = FindVisualChild<ItemsPresenter>(container);

if (itemsPresenter == null)

{

container.UpdateLayout();

itemsPresenter = FindVisualChild<ItemsPresenter>(container);

}

Panel itemsHostPanel = (Panel)VisualTreeHelper.GetChild(itemsPresenter, 0);

// Ensure that the generator for this panel has been created.

UIElementCollection children = itemsHostPanel.Children;

MyVirtualizingStackPanel virtualizingPanel =

itemsHostPanel as MyVirtualizingStackPanel;

for (int i = 0, count = container.Items.Count; i < count; i++)

{

TreeViewItem subContainer;

if (virtualizingPanel != null)

{

// Bring the item into view so

// that the container will be generated.

virtualizingPanel.BringIntoView(i);

subContainer =

(TreeViewItem)container.ItemContainerGenerator.

ContainerFromIndex(i);

}

else

{

subContainer =

(TreeViewItem)container.ItemContainerGenerator.

ContainerFromIndex(i);

// Bring the item into view to maintain the

// same behavior as with a virtualizing panel.

subContainer.BringIntoView();

}

if (subContainer != null)

{

// Search the next level for the object.

TreeViewItem resultContainer = GetTreeViewItem(subContainer, item);

if (resultContainer != null)

{

return resultContainer;

}

else

{

// The object is not under this TreeViewItem

// so collapse it.

subContainer.IsExpanded = false;

}

return null;

}

/// <summary>

/// Search for an element of a certain type in the visual tree.

/// </summary>

/// <typeparam name="T">The type of element to find.</typeparam>

/// <param name="visual">The parent element.</param>

/// <returns></returns>

private T FindVisualChild<T>(Visual visual) where T : Visual

{

for (int i = 0; i < VisualTreeHelper.GetChildrenCount(visual); i++)

{

Visual child = (Visual)VisualTreeHelper.GetChild(visual, i);

if (child != null)

{

T correctlyTyped = child as T;

if (correctlyTyped != null)

{

return correctlyTyped;

}

T descendent = FindVisualChild<T>(child);

if (descendent != null)

{

return descendent;

}

return null;

}

Note that this code looks for a Panel called, MyVirtualizingStackPanel. This new type exposes a method that allows you to bring an item into view by passing in the item's index.

public class MyVirtualizingStackPanel : VirtualizingStackPanel

{

/// <summary>

/// Publically expose BringIndexIntoView.

/// </summary>

public void BringIntoView(int index)

{

this.BringIndexIntoView(index);

}

The final step is to use the custom VirtualizingStackPanel as the TreeView's ItemsPanel:

Now that you have the code, you can search for any object in any TreeView, regardless of its depth in the tree.

I attached a sample that uses this technique to find any item in the TreeView. The sample asks for a number, finds the corresponding data object in the data model, and then selects the TreeViewItem that contains the object. Note that the way I find the data object in the model is specific to the organization of my data. I could have kept track of the data object's location within the data hierarchy, and then find the corresponding TreeViewItem in the TreeView.

For example, the item that corresponds to 41 is, starting from the root of the TreeView, under the second item, then under the first item, then under the second item, and finally the first item. I could have kept track of its location with a list of indices, 2,1,2,1, and then used those to navigate the TreeView. However, this approach is dependent on the organization of the underlying TreeView. The implementation I show above works on any TreeView and it doesn't require knowledge of the data model.

The attached sample has C# and Visual Basic versions.

WPF Shell Integration Library for .NET 3.5

Jim Walker - MSFT — Mon, 22 Feb 2010 21:10:00 GMT

One of the exciting new features in .NET 4 is the ability to use Windows 7 Shell features like Jump Lists, Thumbnail Buttons, and progress indicators in Taskbar buttons, with your WPF applications. These features are found in the System.Windows.Shell namespace in .NET 4.

However, if you need to target .NET 3.5SP1, which ships with Windows 7, you can still use these features thanks to the WPF Shell Integration Library that is now available on MSDN Code Gallery.

The WPF Shell Integration Library shares the same features that are found in .NET 4, and the APIs are very compatible. This means it will be easy to upgrade your application to .NET 4 with only minor changes to the shell integration code. It also means that almost all of the documentation for the System.Windows.Shell namespace also applies to the WPF Shell Integration Library. There are a few differences, as noted on Code Gallery:

TaskbarItemInfo is implemented as an attached property on the TaskbarItemInfo class, and is attached to an instance of a Window. In .NET 4, the TaskbarItemInfo is a property directly on Window.
A TaskbarItemInfo instance has a strong affinity to a single window and cannot be shared.
Features are in the Microsoft.Windows.Shell namespace, and in the http://schemas.microsoft.com/winfx/2006/xaml/presentation/shell xmlns. In .NET 4, the taskbar integration APIs are within the System.Windows.Shell namespace and the standard WPF xmlns.

To see how similar the APIs are, and what the differences are, I took the sample code for the TaskbarItemInfo class from the MSDN documentation, and converted it to work with the WPF Shell Integration Library on .NET 3.5SP1. What changes were needed? Let’s see…

First, I downloaded the library from Code Gallery.

Then I added a reference to Microsoft.Windows.Shell.dll to my sample project, and in MainWindow.xaml, I added the required xmlns: xmlns:shell=http://schemas.microsoft.com/winfx/2006/xaml/presentation/shell.

From there, I changed <Window.TaskbarItemInfo> to <shell:TaskbarItemInfo.TaskbarItemInfo>, and then added the shell: prefix to the rest of the tags.

<shell:TaskbarItemInfo.TaskbarItemInfo>

<shell:TaskbarItemInfo x:Name="taskBarItemInfo1"

Overlay="{StaticResource ResourceKey=StopImage}"

ThumbnailClipMargin="80,0,80,140"

Description="Taskbar Item Info Sample">

<shell:TaskbarItemInfo.ThumbButtonInfos>

<shell:ThumbButtonInfoCollection>

<shell:ThumbButtonInfo

DismissWhenClicked="False"

Command="MediaCommands.Play"

CommandTarget="{Binding ElementName=btnPlay}"

Description="Play"

ImageSource="{StaticResource ResourceKey=PlayImage}"/>

<shell:ThumbButtonInfo

DismissWhenClicked="True"

Command="MediaCommands.Stop"

CommandTarget="{Binding ElementName=btnStop}"

Description="Stop"

ImageSource="{StaticResource ResourceKey=StopImage}"/>

</shell:ThumbButtonInfoCollection>

</shell:TaskbarItemInfo.ThumbButtonInfos>

</shell:TaskbarItemInfo>

</shell:TaskbarItemInfo.TaskbarItemInfo>

In the code behind page, I just changed my using/Imports statement from System.Windows.Shell to Microsoft.Windows.Shell.

That’s it. With these few changes, the TaskbarItemInfo sample runs on .NET 3.5 exactly as it does on .NET 4.

What's new in .NET Framework 4 Release Candidate documentation

Margaret Parsons [MSFT] — Fri, 19 Feb 2010 16:00:00 GMT

The Visual Studio 2010 and .NET Framework 4 Release Candidate is now available along with the documentation online at MSDN.

There are a few new things you might want to check out.

The Getting Started with WPF walkthrough has been completely updated for this release. You'll find downloadable sample code for both C# and VB that goes with the content.
Many client applications now target the .NET Framework Client Profile by default. You can find the list of Visual Studio templates in the .NET Framework Client Profile documentation.
You can find even more information about using the .NET Framework XAML Services with this update.

As always, we look forward to your feedback on these topics and any others. So please click the big, orange feedback button often!

Margaret

Angled Headers in the DataGrid

Margaret Parsons [MSFT] — Wed, 06 Jan 2010 21:50:00 GMT

In my last post, I demonstrated how to rotate the text inside a DataGrid header. And I suggested that you might want to actually create angled headers that look something like this.

My friend Cheryl, from the Silverlight UE team, and I decided to try this out. To make this work you need to know that a) the DataGridColumnHeader is a content control and b) you can retemplate the ControlTemplate to look like whatever you want and maintain the functionality. To make the shape we wanted, we decided to go with a skewed rectangle. At first things seemed pretty straightforward and we were able to get things looking pretty good after re-reading the topic on Transforms and a lot of trial and error with the angles and centers for rotation and skews. A few notes on this:

1. We wanted to skew the Rectangle from the bottom of the header so we bound the CenterY of the SkewTransform to the Height of the Rectangle.

2. We had to both rotate and translate the text to get it in the correct position.

3. I ended up using the LayoutTransform for the rotation in my code since it makes the column width a bit smaller when the Header text is long. You can put both transforms in the RenderTransform but then you can end up with even wider columns since the layout pass assumes you need columns wide enough for the text before the transform. I messed around with trying to get the columns even narrower and if you rotate the text 90 degrees in the LayoutTransform and then rotate it back 45 degrees in the RenderTransform, you get much narrower columns. But it was going to take me a lot more time to figure out the center of the rotation and I think you need another converter because the width of the header isn’t quite wide enough after you skew it, so I’m leaving that undone.

Once we had this working, we realized that we’d hard coded the Height of the columns when we were playing around and we had trouble figuring out how to calculate the height. In the end, I created a MultiBinding where I pass in the DataGrid (so that you can get the Header values off the columns) and all the font information. Then I calculate the length of the longest Header string using a FormattedText object and pad that a bit for the height.

The one thing that still doesn’t work is that the hit region for the headers doesn’t change. So, you have to click low in the header to sort or drag the header. I’m going to ask around and see if I can get a solution to this and I’ll post it if I do. The other thing is that the drag visual is still the old header style too. You can override that with the DragIndicatorStyle (I believe) but I haven’t tested it.

Here is the new ControlTemplate. If you want to see the entire XAML and code behind (VB and C#), I’ve posted those here.

<Rectangle Name="HeaderRect" Width="{TemplateBinding Width}" Fill="LightBlue" Stroke="Black"

StrokeThickness="1" >

<Rectangle.Height>

</MultiBinding>

</Rectangle.Height>

<Rectangle.RenderTransform>

<SkewTransform CenterX="0" CenterY="{Binding ElementName=HeaderRect, Path=Height}"

AngleX="-45" AngleY="0" />

</Rectangle.RenderTransform>

</Rectangle>

<ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="Bottom"

HorizontalAlignment="Left" >

<ContentPresenter.LayoutTransform>

</ContentPresenter.LayoutTransform>

<ContentPresenter.RenderTransform>

<TranslateTransform X="{Binding RelativeSource={RelativeSource TemplatedParent},

Path=ActualWidth, Mode=OneWay, Converter={StaticResource WidthConverter}}" />

</ContentPresenter.RenderTransform>

</ContentPresenter>

</Grid>

</ControlTemplate>

In addition to some of the issues I mentioned, I wasn’t very thorough about checking the original template for all the TemplateBindings so there may be some other TemplateBindings you need to set up if you want to be able to set a value on the DataGrid. For the Silverlight version, see Cheryl’s post.

Margaret

Rotate your text in the WPF DataGrid column headers

Margaret Parsons [MSFT] — Wed, 16 Dec 2009 19:00:00 GMT

I was talking to Cheryl who writes for the Silverlight User Education team and she was trying to make DataGrid column headers with angled text. She was having trouble getting it to work so we sat down to look at it. We couldn't make it work, but I went back to my office and started working on it in WPF. Before long, I'd come up with a solution. However, since it was trickier than I thought it would be, I'm sharing it here. (By the way, I'm using .NET Framework 4 Beta 2 but you can get the DataGrid from the WPF toolkit too.)

To get angled text in the column header (as opposed to actually angling the column headers themselves which is a different problem and one I may have to try next now that I've thought of it), you want to update the DataTemplate for the content in the header. So, first I created a DataTemplate to hold the text. You need to apply the transform before the layout pass otherwise your header will get a layout slot with a size to hold the text horizontally, then the rotation is applied and your text gets clipped. LayoutTransform is a property on FrameworkElement which does exactly what I wanted. Here is my DataTemplate:

<TextBlock.LayoutTransform>

</TextBlock.LayoutTransform>

</TextBlock>

</DataTemplate>

Then I needed to apply this to all the header templates. This was what took me a while to figure out. I was trying to find something like ColumnHeaderDataTemplate but that didn't exist. There is a HeaderTemplate property on the DataGridColumn class but I couldn't use that since its an abstract class. You can apply the template to each column individually which I tried, but I really wanted to use a Setter in a Style. Finally, I figured out that I could apply the style to DataGridColumnHeader which inherits from ContentControl and therefore has a ContentTemplate. The ContentTemplate is the DataTemplate for the ContentControl. Exactly what I needed.Here is the Style.

</Style>

And that's it. Now all of my headers are angled. Here's what it looks like.

Don’t forget to check the MSDN documentation if you have other DataGrid questions. For the solution in a Silverlight application, see Using the Silverlight Toolkit LayoutTransformer Control for Angled Column Header Text.

Margaret

Karl Shifflett’s WPF and Silverlight shared design-time code

JGalasyn — Sat, 21 Nov 2009 16:39:02 GMT

Here’s a most excellent demonstration of how to author a custom design experience that’s shared between WPF and Silverlight controls. Karl gives you a detailed, step-by-step walkthrough, complete with Task List breadcrumbs:

Walkthrough guidance in the form of Task List hints

That’s so clever it blows my mind. Karl shows you precisely how to isolate and package design-time logic that’s specific to WPF and Silverlight, as well as VS and Blend – the table showing which design-time assemblies are loaded in which design tool (VS or Blend) is worth the price of entry by itself. And he shows you the key to code sharing: how to abstract SL- and WPF-specific types through a little type resolver class. It’s all very slick.

Karl’s blog post is here, and the code is here at WPF and Silverlight Designer Extensibility Samples. Have fun with your custom design experiences.

Fishbowl – A Facebook sample app in WPF

wcsdkteam — Fri, 20 Nov 2009 21:20:00 GMT

uxlabs@Microsoft has just released Fishbowl, a sample client application for Facebook, complete with source code. Fishbowl requires .NET 3.5 and uses WPF and ClickOnce. If you’re using Windows 7, it also demonstrates new features such as Jump Lists, taskbar previews, and multitouch.

You can get more information and install the application from http://www.fishbowlclient.com.

You can get the source code from http://fishbowl.codeplex.com.