WPF

WPFPerf and software rendering

Brad Cunningham — Fri, 09 May 2008 14:37:00 GMT

The WPFPerf tool that is included with the windows SDK can be a very useful tool in finding areas of your application that is being rendered using the WPF software pipeline.

Recently I was profiling an application looking for areas that could be improved, performance wise, at the WPF level. One thing I thought to do was use the WPFPerf tool and look for elements that were being software rendered and see if I could modify them to use the hardware pipeline and still get desired effect. See here for more information on the two pipelines.

To find the areas that are using software rendering the Perfortator plug-in gives a nice, albeit cheesy, visual cue. By enabling "Draw software rendering with purple tint"

Come on guys, really? Is that really what the option is called? I wonder what the property is called in code ShowSoftwareRenderingUsingPurpleShadeBecauseMyKidWasWatchingBarneyWhileIWasWritingThisFuction.

But I digress, The functionality works well.

So a discovery I made was that WPF is able to use the hardware rendering pipeline to render bitmap drop shadows (which is typically documented as being software rendered) but only if the drop shadow is rectangular. In my case I had a button template that was using a border element ad applying a drop shadow to the border element to give the drop shadow effect on the button

<Style x:Key="SoftwareRenderTemplate">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid Height="22">
                            <Border Background="Gray" Height="22" Margin="0,0,0,0">
                                <Border.BitmapEffect>
                                    <DropShadowBitmapEffect Opacity="0.5" ShadowDepth="3" Softness="0.285"/>
                                </Border.BitmapEffect>
                                <ContentPresenter x:Name="ButtonContent" Width="Auto" Content="{TemplateBinding Content}" OpacityMask="{TemplateBinding Foreground}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="Auto" Margin="10,0,10,0"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

When I built the template this way and ran Perforator it showed me that the button was using software rendering. Which is what I would have expected. However, if I modify the template to use a rectangle shape instead of a border element. Then apply the drop shadow effect to the the rectangle I noticed that Perforator no longer indicated (which means to remove the lovely purple tint) that the button was using software rendering. This is not what I would have expected.

<Style x:Key="HardwareRenderTemplate">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid Height="22">
                            <Rectangle Fill="Gray" Height="22" Margin="0,0,0,0" Stroke="{x:Null}">
                                <Rectangle.BitmapEffect>
                                    <DropShadowBitmapEffect Opacity="0.5" ShadowDepth="3" Softness="0.285"/>
                                </Rectangle.BitmapEffect>
                            </Rectangle>
                            <ContentPresenter x:Name="ButtonContent" Width="Auto" Content="{TemplateBinding Content}" OpacityMask="{TemplateBinding Foreground}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="Auto" Margin="10,0,10,0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

I searched around a bit to try and determine what was going on here and the information is sparse (hence my blog entry) But I did find one source that hints to the fact that the underlying implementation of the drop shadow effect is optimized when sticking to rectangular shapes.

So there it is. If you really like drop shadows but don't want to get hammered by the performance this is one way to do it.

XML, XSL, XAML, XPS......XACTLY?

Brad Cunningham — Thu, 20 Dec 2007 11:41:00 GMT

For some reason at every company I have worked for I have been dubbed the "Reporting dude." I don't know how this title was bestowed on me but so be it. Unfortunately reports aren't particularly sexy, you never hear people saying "Whoa check out that pivot table!"

All that aside, recently I came across a reporting challenge that I thought was particularly interesting. Currently in WPF there isn't much in the way of report designers (at least none that I have seen). We do have some very simple integration with the XPS framework, which makes printing XAML very easy. However, all the examples out there of generating an XPS document relies on the fact that your created the XAML objects in code. Ok, but that goes against a major tenet of WPF of separating the design and the implementation.

The challenge I was faced with was to create a reporting architecture in WPF that would support changes to report formats without invasive code changes, Support multiple output formats if desired (XPS, HTML, Excel, etc..) and the nice to have feature is to allow reports to be built using a visual designer if possible.

Well looking at the requirements and the toolset available first thought we were going to have to make a lot of compromises. I thought some more about it and took a lesson from my web developer toolset. Why not use XML to model the data and XSL to transform the data to the desired format?

I knew this would work for HTML and Excel outputs, what I didn't know was how it would work for XAML. So I gave it a go and here is how it went.

1. Model some test data in XML:

We need a sample chunk of data to work with in order to test our idea. So I started with this :

<?xml version="1.0" encoding="utf-8" ?>
<EmployeeInfo>
    <Employee>
        <FirstName>Bob</FirstName>
        <LastName>Smith</LastName>
        <City>San Diego</City>
        <State>CA</State>
    </Employee>
</EmployeeInfo>

2. Transform the data in to a XAML document:

Now that we have sample data to work with we need to write and XSLT document that will take the XML data above and turn it into a XAML document (I wasn't sure what I was going to get with this step. I didn't know how nicely XSL would play with XAML.)

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="EmployeeInfo">
        <StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Orientation="Vertical">
            <TextBlock>
                <TextBlock.Text>
                    <xsl:value-of select="Employee/FirstName"/>
                </TextBlock.Text>
            </TextBlock>
            <TextBlock>
                <TextBlock.Text>
                    <xsl:value-of select="Employee/LastName"/>
                </TextBlock.Text>
            </TextBlock>
            <TextBlock>
                <TextBlock.Text>
                    <xsl:value-of select="Employee/City"/>
                </TextBlock.Text>
            </TextBlock>
            <TextBlock>
                <TextBlock.Text>
                    <xsl:value-of select="Employee/State"/>
                </TextBlock.Text>
            </TextBlock>
        </StackPanel>
    </xsl:template>
</xsl:stylesheet>

3. From here the rest is fairly straight forward. You do the actual transformation in code (something like this)

XmlReader xreader = XmlReader.Create("SampleData.xml");

MemoryStream mem = new MemoryStream();
TextWriter twriter = new StreamWriter(mem, System.Text.Encoding.UTF8);

XslCompiledTransform trans = new XslCompiledTransform();
trans.Load("XAMLOutput.xslt");
trans.Transform(xreader, null, twriter);

4. From there all we have to do is to take the transformed output and turn it into an XPS document. What I did was take the transformed output and get it in string format and then created a function to create an XPS document

void XamlToXPS(string srcXaml,string destXpsFile)
        {
            
            StringReader stringReader = new StringReader(srcXaml);
            XmlReader xmlReader = XmlReader.Create(stringReader);

            object parsedDocObject = XamlReader.Load(xmlReader);
           
            XpsDocument document = new XpsDocument(destXpsFile, FileAccess.ReadWrite);
            XpsPackagingPolicy packagePolicy = new XpsPackagingPolicy(document);
            XpsSerializationManager serializationMgr = new XpsSerializationManager(packagePolicy, false);
            
            serializationMgr.SaveAsXaml(parsedDocObject);
            document.Close();
        }

That's it!

I tested this much more complex chunks of xaml and didn't find any issues. One thing to note is that you have to make sure the XAML namespace is specified for the root element of the document in order for the

XAML reader to understand the XAML elements (see the bolded area of my sample XSLT).

This solution separates the data from the implementation, it allows for format changes to the report without invasive code changes, and it adds the nice to have feature of allowing report design through a visual designer. Since XPS is simply loose xaml packaged up, you can design the report using Blend. Then take that xaml and paste it into the XSLT file and manipulate it to show the data from the XML where needed.

WPF "Master Page" like functionality

Brad Cunningham — Wed, 21 Nov 2007 14:46:00 GMT

UPDATE: I found and issue with placing the default content elements in the Resources for the Page. When you place the elements directly in the resources, without wrapping them in a template, there is only one instance of the elements created. This means that after the MasterPage control is created the first time the elements will never get re-initialized. This causes problems when you have buttons or other interactions that bind to properties specific to current instance of the master page.

For example : If you had a ButtonContentArea defined and you placed a save button in that area with a Command "SaveCommand" that was bound to a command on the consumer of the MasterPage control, that command would be initialized the first time the MasterPage control is created. Then any subsequent consumers of the master page would use the Binding from the first instance of the master page. This means your save command would be routed to the wrong handler. If you make the Dependency Properties of Type DataTemplate and you wrap the elements in a DataTemplate then bind to the ContentTemplate property of the controls you can resolve this issue. The code below has been updated to reflect this change.

Now on with your regularly scheduled programming.

Coming from an ASP.NET background one of the things I really like are Master Pages. If you aren't familiar with master pages read this first.

In WPF there are several different ways to share styles and templates across pages. Recently I had a need to share a common layout across multiple pages while still allowing for different content and behaviors on each page. The first thing I thought was Master Page. However this feature doesn't come out of the box with WPF.

However it is easy enough to implement your own version. A quick search provided me with Karin Huber's code project article about this very subject. This approach uses a user control as the master page. After playing around with this example one problem I found is that you are unable to name elements that are inside of the master page user control (others have discovered this as well if you view the comments on the codeplex project or you view Rob Relyea's blog post) This isn't a deal breaker by any means but I wanted to give a go at implementing it myself. It was surprisingly easy when I got down to it.

First I created a simple custom control named Master Page and a few dependency properties for the different content zones I am going to expose. Here is what that looks like

    public class MasterPage : Control
    {
        public static DependencyProperty MainContentAreaProperty =
            DependencyProperty.Register("MainContentArea", typeof (DataTemplate), typeof (MasterPage));

        public static DependencyProperty HeaderContentAreaProperty =
            DependencyProperty.Register("HeaderContentArea", typeof(DataTemplate), typeof(MasterPage));

        public static DependencyProperty RightContentAreaProperty =
            DependencyProperty.Register("RightContentArea", typeof(DataTemplate), typeof(MasterPage));

        public static DependencyProperty FooterContentAreaProperty =
           DependencyProperty.Register("FooterContentArea", typeof(DataTemplate), typeof(MasterPage));

        static MasterPage()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(MasterPage), new FrameworkPropertyMetadata(typeof(MasterPage)));
        }

        public DataTemplate MainContentArea
        {
            get { return (DataTemplate)GetValue(MainContentAreaProperty); }
            set { SetValue(MainContentAreaProperty, value); }
        }

        public DataTemplate HeaderContentArea
        {
            get { return (DataTemplate)GetValue(HeaderContentAreaProperty); }
            set { SetValue(HeaderContentAreaProperty, value); }
        }

        public DataTemplate RightContentArea
        {
            get { return (DataTemplate)GetValue(RightContentAreaProperty); }
            set { SetValue(RightContentAreaProperty, value); }
        }

        public DataTemplate FooterContentArea
        {
            get { return (DataTemplate)GetValue(FooterContentAreaProperty); }
            set { SetValue(FooterContentAreaProperty, value); }
        }

    }

The generic.xaml is straightforward. I placed ContentControls where I wanted "content zones." I named them accordingly and I bound the ContentTemplate property to the appropriate dependency property

<Style TargetType="{x:Type local:MasterPage}">
        <Setter Property="HeaderContentArea" Value="{StaticResource HeaderContent}"/>
        <Setter Property="MainContentArea" Value="{StaticResource MainContent}"/>
        <Setter Property="RightContentArea" Value="{StaticResource RightContent}"/>
        <Setter Property="FooterContentArea" Value="{StaticResource FooterContent}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:MasterPage}">
                    <Grid ShowGridLines="True">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                            <ColumnDefinition Width="225"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>
                            <RowDefinition Height="25"></RowDefinition>
                            <RowDefinition Height="25"></RowDefinition>
                        </Grid.RowDefinitions>
                        <ContentControl Grid.Column="0" Grid.Row="0" x:Name="HeaderContentArea" ContentTemplate="{TemplateBinding HeaderContentArea}"/>
                        <ContentControl Grid.Column="0" Grid.Row="1" x:Name="MainContentArea" ContentTemplate="{TemplateBinding MainContentArea}"/>
                        <ContentControl Grid.Column="0" Grid.Row="2" x:Name="FooterContentArea" ContentTemplate="{TemplateBinding FooterContentArea}"/>
                        <ContentControl Grid.Column="1" Grid.RowSpan="3" x:Name="RightContentArea" ContentTemplate="{TemplateBinding RightContentArea}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

This allows a consumer of this control to bind any piece of content they want to the dependency property of their choice and that content will be displayed in the "content zone" defined in the generic.xaml.

For example your Window1.xaml would look something like this

    <Window.Resources>
        <DataTemplate x:Key="HeaderContent">
            <StackPanel>
                <TextBlock Text="Header Text"/>
                <Rectangle Fill="Black" Width="25" Height="25"/>
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="RightContent">
            <StackPanel Grid.RowSpan="3">
                <Rectangle Width="100" Height="50" Fill="DarkBlue"/>
            </StackPanel>
        </DataTemplate>
        
    </Window.Resources>
   
    <local:MasterPage  HeaderContentArea="{StaticResource HeaderContent}" RightContentArea="{StaticResource RightContent}" />

Pretty simple right?

Well what if we don't bind to all the available content zones like in the example above? With the current setup the layout elements (in this case grid rows / columns) will still be rendered but they will be empty. This may or may not be the desired behavior for your situation.

Furthermore you don't want to build this nice layout template and still force your consumers to bind content that will be static across multiple consumers. So we want to provide default content for the content zones from within the generic.xaml.

Easy enough we just need to bind the content property of our zone to a static resource defined in generic.xaml right?

Something like this :

<DataTemplate x:Key="FooterContent">
    <StackPanel>

        <TextBlock Text="Copyright 2007. All rights reserved"/>
    </StackPanel>
</DataTemplate>

<ContentControl Grid.Column="0" Grid.Row="2" x:Name="FooterContentArea" Content="{StaticResource FooterContent}"/>

This will work and will give you a distinct behavior. By doing this you are no longer binding to the dependency property defined in the control and therefore you are forcing the content zone to use the content defined in the generic.xaml. Your consumer will not be able override the content for this zone. This may or may not be the desired behavior.

For my situation I wanted to provide default content for the different zones but I also wanted to let the consumer override the content if they wanted to. I also wanted to provide specific defaults for zones that give the user a visual cue they have not bound to a "required" content zone.

First we defined default content for each of our zones in the generic.xaml file like this.

<DataTemplate x:Key="HeaderContent">
        <StackPanel>
            <TextBlock Text="Header" FontSize="15" FontWeight="Bold"/>           
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="MainContent">
        <StackPanel>
            <TextBlock Opacity="0.25" FontSize="18" Text="CONTENT ERROR! Bind content to the MainContentArea dependency property" TextWrapping="Wrap"/>
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="RightContent">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Right Text"/>
        <Rectangle Fill="AliceBlue" Width="25" Height="25">
            <Rectangle.BitmapEffect>
                <DropShadowBitmapEffect/>
            </Rectangle.BitmapEffect>
        </Rectangle>
        <Ellipse Fill="YellowGreen" Width="25" Height="25"/>
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="FooterContent">
        <StackPanel>
            <TextBlock Text="Copyright 2007. All rights reserved"/>
        </StackPanel>
    </DataTemplate>

Then we modified our control template to use Setters to set the dependency properties to the Static Resources in our generic.xaml.

<Style TargetType="{x:Type local:MasterPage}">
        <Setter Property="HeaderContentArea" Value="{StaticResource HeaderContent}"/>
        <Setter Property="MainContentArea" Value="{StaticResource MainContent}"/>
        <Setter Property="RightContentArea" Value="{StaticResource RightContent}"/>
        <Setter Property="FooterContentArea" Value="{StaticResource FooterContent}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:MasterPage}">
                    <Grid ShowGridLines="True">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                            <ColumnDefinition Width="225"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>
                            <RowDefinition Height="25"></RowDefinition>
                            <RowDefinition Height="25"></RowDefinition>
                        </Grid.RowDefinitions>
                        <ContentControl Grid.Column="0" Grid.Row="0" x:Name="HeaderContentArea" ContentTemplate="{TemplateBinding HeaderContentArea}"/>
                        <ContentControl Grid.Column="0" Grid.Row="1" x:Name="MainContentArea" ContentTemplate="{TemplateBinding MainContentArea}"/>
                        <ContentControl Grid.Column="0" Grid.Row="2" x:Name="FooterContentArea" ContentTemplate="{TemplateBinding FooterContentArea}"/>
                        <ContentControl Grid.Column="1" Grid.RowSpan="3" x:Name="RightContentArea" ContentTemplate="{TemplateBinding RightContentArea}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Notice that we can now keep the content properties for each of our zones bound to the dependency properties we defined in our class. We have also set these properties with default values so if the consumer doesn't set them they will get the content we defined. This is nice because it allows us to move static content in to the custom control's generic.xaml and leaves less for the consumer to worry about.

Another nice feature is we are able to give the user a visual error if they do not bind to a zone that we feel they should bind to. In this case I have defined a main content area and defaulted the content to a textblock that shows an error:

<DataTemplate x:Key="MainContent">
        <StackPanel>
            <TextBlock Opacity="0.25" FontSize="18" Text="CONTENT ERROR! Bind content to the MainContentArea dependency property" TextWrapping="Wrap"/>
        </StackPanel>
    </DataTemplate>

Right away the consumer will see the message that they forgot to bind to the content area and can quickly fix the error.

Overall this is a pretty simple solution that gives you a nice way to share a layout across multiple pages while still allowing the individual pages to control the content. This also makes it easy to change the layout of your pages in one place. You just modify the layout of the "content zones" in the master page and all your consumer using the control will see the change.

UPDATE: You can find the sample code here