I’ve recently developed a major infrastructure that deals with serialization/de-serialization of complex application documents. One of the main challenges I had, was handling document files from another application. Although both source and consumer application share a common business library, there were also app-specific types serialized along with everything else. So to be able to correctly interpret the data being serialized and be able to act on every step, I had to inevitably delve into the framework 4.0 source code, mainly the ObjectManager.

The problem: It came to my understanding that there are a number of issues developers face when setting up framework debugging, despite the usual guides. The thing is, the guides are written to allow you to delve into framework code, but you need to understand that it only works out of the box for a given framework build version. Most of the times there’s a version mismatch between the source code version you’ve downloaded from the Microsoft Reference Servers, and the .Net Framework assembly versions you have installed on your computer. They’re both 4.0 (or 2.0 for that matter), but the build version differs a lot. So symbol loading fails on VS due to this. There is simply no updated pdb for the version you have installed.

All this to say there is one reason that is probably the root of most of the problems: Windows Update. This little bugger automatically downloads and installs newer versions of .Net Framework 2.0/4.0 assemblies in the context of a Security Update or regular feature update. Unfortunately, Microsoft doesn’t update the Symbol Servers at the same time, if ever, so when VS tries to find a pdb file for a given Framework assembly either locally or online, it is doomed to fail.

The fix: Either point your project references to older .Net Framework dll’s, or uninstall Windows updates. You can uninstall updates by going to Control Panel > Programs > Programs and Features > View Installed Updates, and removing everything under the Microsoft .Net Framework Client Profile or Microsoft .Net Framework Extended categories. You could check the Knowledge base article for each one of them to check if the specific .Net Framework assembly you wish to debug was changed. But that’s up to you.

Hope it helps.

Quick tip for taking screenshots in iOS: on the screen you wish to take a print screen, just hold down the Home button and then press the power button. You will hear a snapshot sound.

If you now go to your photos, you will see the screenshot you just took. You can manipulate it like any other image. Enjoy!

Microsoft just made available the July release of the Microsoft Ribbon for WPF in MSDN. This is the RTW release of the Ribbon control, compatible with WPF 3.5sp1 and WPF 4.

This release is a managed implementation of the Ribbon for WPF. The Ribbon is a command bar that organizes the features of an application into a series of tabs at the top of the application window, is designed to help you quickly find the commands that you need to complete a task. The Ribbon user interface (UI) increases discoverability of features and functions, enables quicker learning of the application, and helps users feel more in control of their experience with the application. The Ribbon replaces the traditional menu bar and toolbars.

Besides the Ribbon download itself, there’s also a sample installer available. These samples include:

• RibbonWindow Wordpad Sample This sample illustrates a Ribbon control hosted within a RibbonWindow that emulates the Wordpad appearance.
• RibbonWindow MVVM Sample This sample illustrates a Ribbon control hosted within a RibbonWindow that is completely populated from a view-model collection.
• RibbonBrowser Wordpad sample This sample illustrates a Ribbon control hosted within a browser window that emulates the Wordpad appearance.
• RibbonBrowser MVVM sample This sample illustrates a Ribbon control hosted within a browser window that is completely populated from a view model collection.

You can download WPF Ribbon Control for WPF here.

In the previous article I demonstrated how to fully style a GridView column header in a ListView. In this next article, I’ll be covering row styling and final wrap ups, focusing on maintaining every behavior that’s expected from a typical grid row.

This time around, I’ll create and customize a template for each column, thus overriding all the visual aspects of a single row. The first step is to change the GridView column declarations and set the CellTemplate attribute to a local resource instead of the previous simpler approach, that used DisplayMembershipBinding and simple TextBlock based data templates. So for starters, I’ll change the ListView xaml declaration to reference new DataTemplates in each column:

<ListView Name="ListView" ItemsSource="{Binding}" ItemContainerStyle="{DynamicResource ListViewItemContainerStyle}">
    <ListView.View>
        <GridView>
            <GridViewColumn CellTemplate="{StaticResource PersonItemTemplate}" Header="Name"/>
            <GridViewColumn CellTemplate="{StaticResource AgeItemTemplate}" Header="Age" />
            <GridViewColumn CellTemplate="{StaticResource MovieItemTemplate}" Header="Favorite Movie" />
        </GridView>
    </ListView.View>
</ListView>

Notice that I’ve also referenced an ItemContainerStyle resource. This will be used to define generic row behavior upon selection and mouse over.

Now, let’s define each column style separately:

<DataTemplate x:Key="AgeItemTemplate">
    <Border BorderThickness="0,0,0,0" BorderBrush="#6FBDE8">
        <TextBlock Margin="2" Text="{Binding Age}" VerticalAlignment="Center" Grid.Column="1" />
    </Border>
</DataTemplate>

<DataTemplate x:Key="PersonItemTemplate">
    <Border BorderThickness="0,0,0,0" BorderBrush="#6FBDE8">
        <Grid Margin="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="32" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Image Source="Images/person.png" Width="24" Height="24" Grid.Column="0" HorizontalAlignment="Center" />
            <TextBlock Text="{Binding Name}" VerticalAlignment="Center" Grid.Column="1" />
        </Grid>
    </Border>
</DataTemplate>

<DataTemplate x:Key="MovieItemTemplate">
    <Border BorderThickness="0,0,0,0" BorderBrush="#6FBDE8">
        <Grid Margin="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="32" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Image Source="Images/movie.png" Width="24" Height="24" Grid.Column="0" HorizontalAlignment="Center" />
            <TextBlock Text="{Binding FavoriteMovie}" VerticalAlignment="Center" Grid.Column="1" />
        </Grid>
    </Border>
</DataTemplate>

Each one of these visual structures will be nested within an item container, whose style we should define in order to provide visual responses to events like row selection, mouse over, like I mentioned earlier. I’ll then define the ItemContainerStyle resource named ListViewItemCongainerStyle like so:

<Style x:Key="ListViewItemContainerStyle" TargetType="{x:Type ListViewItem}">
    <Setter Property="Background" Value="#ffffff" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="Margin" Value="0,0,0,0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListViewItem}">
                <Border x:Name="Bd" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" BorderThickness="0,0,0,1" BorderBrush="#6FBDE8">
                    <GridViewRowPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected"  Value="true">
                        <Setter TargetName="Bd" Property="BorderBrush" Value="#FF143c65" />
                        <Setter Property="Background" TargetName="Bd">
                            <Setter.Value>
                                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Color="#FF75aac7" Offset="0"/>
                                            <GradientStop Color="#FF143c65" Offset="1"/>
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Bd" Property="Background" Value="#e0eff8" />
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true" />
                            <Condition Property="Selector.IsSelectionActive" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd">
                            <Setter.Value>
                                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Color="#FF75aac7" Offset="0"/>
                                            <GradientStop Color="#FF143c65" Offset="1"/>
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="#FF143c65"/>
                        <Setter Property="Foreground" Value="White"/>
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Notice that the GridViewRowPresenter container object marks the place where actual row data will appear and defines its layout. Header style template can be defined through the ColumnHeaderContainerStyle property, although in the current example, we’ve already defined a generic GridViewColumnHeader template in part I of this tutorial.

This is what we have so far:

Now if you notice closely, you can see that the ListView column header row has a slight left and right offset of about 2px. After inspecting this with Snoop, it becomes clear that the GridViewHeaderRowPresenter object, which is the object used to define the layout of our row of column headers, has a margin set to 2,0,2,0.

To counter this, we must also override the ScrollViewer style for the ListView, exposing all the layout attributes and customize them at our will. In this style I’ll set margin to zero and fine tune column header offset:

<Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="ScrollViewer">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ScrollViewer">
                <Grid Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <DockPanel Margin="{TemplateBinding Padding}">
                        <ScrollViewer DockPanel.Dock="Top" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Focusable="false">
                            <GridViewHeaderRowPresenter Margin="0,0,0,0" Columns="{Binding Path=TemplatedParent.View.Columns,
                                RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderContainerStyle="{Binding Path=TemplatedParent.View.ColumnHeaderContainerStyle, RelativeSource={RelativeSource TemplatedParent}}"
                                ColumnHeaderTemplate="{Binding Path=TemplatedParent.View.ColumnHeaderTemplate,RelativeSource={RelativeSource TemplatedParent}}"
                                ColumnHeaderTemplateSelector="{Binding Path=TemplatedParent.View.ColumnHeaderTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}"
                                AllowsColumnReorder="{Binding Path=TemplatedParent.View.AllowsColumnReorder, RelativeSource={RelativeSource TemplatedParent}}"
                                ColumnHeaderContextMenu="{Binding Path=TemplatedParent.View.ColumnHeaderContextMenu, RelativeSource={RelativeSource TemplatedParent}}"
                                ColumnHeaderToolTip="{Binding Path=TemplatedParent.View.ColumnHeaderToolTip, RelativeSource={RelativeSource TemplatedParent}}"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>
                        <ScrollContentPresenter Name="PART_ScrollContentPresenter"
                                KeyboardNavigation.DirectionalNavigation="Local"
                                CanContentScroll="True" CanHorizontallyScroll="False"
                                CanVerticallyScroll="False"/>
                    </DockPanel>
                    <ScrollBar Name="PART_HorizontalScrollBar" Orientation="Horizontal" Grid.Row="1" Maximum="{TemplateBinding ScrollableWidth}" ViewportSize="{TemplateBinding ViewportWidth}" Value="{TemplateBinding HorizontalOffset}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                    <ScrollBar Name="PART_VerticalScrollBar" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" ViewportSize="{TemplateBinding ViewportHeight}" Value="{TemplateBinding VerticalOffset}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now to complete styling I will customize the style for the ListView itself, adding a custom background and border. You can then extend this as you wish:

<Style x:Key="{x:Type ListView}" TargetType="ListView">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListView">
                <Border Name="Border" BorderThickness="1" BorderBrush="#999999" Background="#DFDFDF">
                    <ScrollViewer Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
                        <ItemsPresenter />
                    </ScrollViewer>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsGrouping" Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="Border" Property="Background" Value="#BBBBBB"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And this is the final result:

You now have full control over the ListView visual template. Extend it, play with it but most of all, have fun.

You can download the sample solution here straight from our web host. And here’s the summary of all tutorial articles:

WPF ListView Styling Tutorial Part I

WPF ListView Styling Tutorial Part II

I’ve recently developed with my team a new UI for setting application preferences. Before we got started, it was important to define not only how we were going to do both technically and visually but also what we would be doing. For such an important piece of UI It was important to define the actual look and feel of the interface we were about to create. So, besides Blend, we found the occasion appropriate SketchFlow, and soon created a new work methodology with it, that served both our team and curtomers.

I thought of sharing three resources I read at the time in order to learn SketchFlow essencials:

• Christian Scormann’ article on SketchFlow prototyping
• SketchFlow MIX videos
• Somasegar’s prototyping tutorial

This quick article will enable you to take full advantage of the ListView control by creating a simple data model and through a step-by-step incremental approach. I will try to be concise and direct in order for you to keep this article as future development reference.

Lets start by creating a new WPF Window and define a base data model for our sample. We’ll create a ListView control named “ListView”:

<ListView Name="ListView" ItemsSource="{Binding}" />

Window and data context setup:

public partial class ListViewStylingWindow : Window
{
    public ListViewStylingWindow()
    {
        InitializeComponent();
        ListView.DataContext = new ObservableCollection<Person>()
                            {
                                new Person() {Name = "Peter", Age = 22, FavoriteMovie = "Transformers"},
                                new Person() {Name = "Anne", Age = 19, FavoriteMovie = "Lord of the Rings"},
                                new Person() {Name = "John", Age = 25, FavoriteMovie = "Titanic"}
                            };
    }
}

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string FavoriteMovie { get; set; }
}

I’ve added an ObservableCollection with initialized 3 Person class objects to the Data Context of the control. Now let’s configure the ListView layout to accommodate the data structure we’re passing into the control’s DataContext. For this example, the GridView view mode of the ListView will be used.

<ListView Name="ListView" ItemsSource="{Binding}">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
            <GridViewColumn Header="Age">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Path=Age}" />
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
            <GridViewColumn Header="Favorite Movie">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Path=FavoriteMovie}" />
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

Notice that in the Age and Movie columns, I’ve purposefully used a CellTemplate definition to show you cell data templating. This is what we have so far:

So this will be the base from which we will start styling. We will follow a step-by-step styling procedure for easier reference.

Step #1: ListView Column Header styling (GridViewColumn)

We’ll start by adding a few brush styles to the resources collection and then reference it in the column style. Remember that GridView columns are derived from ButtonBase, so you have access to all the behaviors derived from it.

<LinearGradientBrush x:Key="BackgroundBrush" StartPoint="0,0" EndPoint="0,1">
    <LinearGradientBrush.GradientStops>
        <GradientStopCollection>
            <GradientStop Color="#FF6FBDE8" Offset="0"/>
            <GradientStop Color="#FF4385BE" Offset="1"/>
        </GradientStopCollection>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HighlightBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
    <LinearGradientBrush.GradientStops>
        <GradientStopCollection>
            <GradientStop Color="#FF97d3f3" Offset="0"/>
            <GradientStop Color="#FF4385BE" Offset="1"/>
        </GradientStopCollection>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="BorderBrush" StartPoint="0,0" EndPoint="0,1">
    <LinearGradientBrush.GradientStops>
        <GradientStopCollection>
            <GradientStop Color="#FFAFDDF6" Offset="0"/>
            <GradientStop Color="#FF2969AA" Offset="1"/>
        </GradientStopCollection>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="PressedBorderBrush" StartPoint="0,0" EndPoint="0,1">
    <LinearGradientBrush.GradientStops>
        <GradientStopCollection>
            <GradientStop Color="#FF75aac7" Offset="0"/>
            <GradientStop Color="#FF143c65" Offset="1"/>
        </GradientStopCollection>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

Before we add the final header style, we’ll first add the gripper style. This will allow us to visually define the portion of the header that will respond to column resize and dragging operations.

<Style x:Key="GridViewColumnHeaderGripper" TargetType="Thumb">
    <Setter Property="Width" Value="18"/>
    <Setter Property="Background" Value="#2e566b"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Border Padding="{TemplateBinding Padding}" Background="Transparent">
                    <Rectangle HorizontalAlignment="Center" Width="1" Fill="{TemplateBinding Background}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This will add a nice touch to the UI. Now well add the style for the GridViewColumn. This style will aggregate previous resources and provide visual responses for mouse over, press and drag events:

<Style x:Key="{x:Type GridViewColumnHeader}" TargetType="GridViewColumnHeader">
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Foreground" Value="#FFFFFF" />
    <Setter Property="Padding" Value="8"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewColumnHeader">
                <Grid>
                    <Border Name="HeaderBorder" Padding="{TemplateBinding Padding}" BorderThickness="0,1,0,1" BorderBrush="{StaticResource BorderBrush}" Background="{StaticResource BackgroundBrush}">
                        <ContentPresenter Name="HeaderContent" Margin="0,0,0,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <Thumb x:Name="PART_HeaderGripper" HorizontalAlignment="Right" Margin="0,0,-9,0" Style="{StaticResource GridViewColumnHeaderGripper}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="HeaderBorder" Property="Background" Value="{StaticResource HighlightBackgroundBrush}"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="HeaderBorder" Property="Background" Value="{StaticResource PressedBorderBrush}"/>
                        <Setter TargetName="HeaderContent" Property="Margin" Value="1,1,0,0"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Role" Value="Floating">
            <Setter Property="Opacity" Value="0.7"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewColumnHeader">
                        <Canvas Name="PART_FloatingHeaderCanvas">
                            <Rectangle Fill="#60000000" Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight}"/>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="Role" Value="Padding">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewColumnHeader">
                        <Border Name="HeaderBorder" BorderThickness="0,1,0,1" BorderBrush="{StaticResource BorderBrush}" Background="{StaticResource BackgroundBrush}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

And this is the outcome:

This sums up the first part of this ListView styling tutorial. In the next article, I’ll be covering in-depth styling on ListView items. For now, you can download the full sample solution here.

You can create Hyperlinks in Silverlight by using the HyperlinkButton control.

Here is a usage example in XAML:

<HyperlinkButton TargetName="_blank" Content=".Net Brainwork Hyperlink example" NavigateUri="http://blog.vascooliveira.com"></HyperlinkButton>

Some notes in this example:

1. The TargetName property sets the name of the target window or frame that the Web page should open in, or the name of the object within the Silverlight application to navigate to. Possible values are:
   • _blank, _media, or _search: Loads the linked document into a new blank window.
   • _parent, _self, _top, or “”: Loads the page into the window in which the link was clicked (the active window).
2. The NavigateUri is the link to navigate to.
3. Content is the actual link text.

You can then, as usual, style the control to best fit your needs. See the following base style and start from there:

<Style x:Key="Hyperlink" TargetType="HyperlinkButton">
   <Setter Property="Padding" Value="2,0,2,0"/>
   <Setter Property="Cursor" Value="Hand"/>
   <Setter Property="HorizontalContentAlignment" Value="Left"/>
   <Setter Property="VerticalContentAlignment" Value="Top"/>
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="HyperlinkButton">
      <Grid Cursor="{TemplateBinding Cursor}">
       <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" VerticalAlignment="Center" ContentTemplate="{TemplateBinding ContentTemplate}"/>
      </Grid>
     </ControlTemplate>
    </Setter.Value>
   </Setter>
  </Style>

The perf tools for WPF 4.0 are now available for download, and you can use them for profiling both 3.5 and 4.0 applications.

The tools are included in the Windows SDK 7.1 for Windows 7 and .NET Framework 4.

Here are three useful resources for those who are prototyping iPhone apps. To give your demos a realistic look, you can download these iPhone UI elements, available in three different formats:

Adobe Illustrator Vector Elements (.ai) – Mercury Intermedia Blog

Download iPhone UI Vector Elements Now (2.6MB)

Adobe Photoshop (.psd)- teehan-lax Blog

Download The iPhone GUI PSD Here (9MB)

OmniGraffle – Graffletopia

http://graffletopia.com/stencils/413

You can also get them in XAML format through Mike Swanson’s Adobe Illustrator to XAML Export plugin.

I was recently confronted with a scenario in witch a xaml element needed to be dynamically replaced and nested in a container control. There’s nothing unusual about this except for the fact that when this happens the element being replaced might have attached dependency properties set on it. Needless to say that in this scenario such operation might have significant impact. Imagine if your element is inside a Canvas panel and has some of its attached properties set, like Canvas.Top or Canvas.Left.

My first approach was to go through reflection on the parent and get all DependencyProperties, then invoke GetValue() on the element for each one. It worked but it got me thinking that there had to be a cleaner way, since Attached Property values collection is internal and not directly accessible. Then I got to know a primitive called MarkupWriter. In fact, I’ve crossed with it before on a previous project but never got to actually use it. This time around I’ll make it official, so I’m sharing a little snippet that checks an element for Attached Properties, followed by an example:

public static IDictionary GetAttachedProperties(DependencyObject element)
{
    var attachedPropertyList = new Dictionary();
    var markupObject = MarkupWriter.GetMarkupObjectFor(element);

    foreach (var prop in markupObject.Properties)
    {
        if (prop.IsAttached)
            attachedPropertyList.Add(prop.DependencyProperty, prop.Value);
    }
    return attachedPropertyList;
}

Here’s a simple usage example:

var border = new Border()
             {
                 Width = 200, Height = 200,
                 BorderBrush = Brushes.Blue,
                 BorderThickness = new Thickness(1)
             };

border.SetValue(Canvas.TopProperty, 10d);
border.SetValue(Canvas.LeftProperty, 50d);

var list = GetAttachedProperties(border);

// Beware that ForEach is a Unity enumerable extension.
list.ForEach(prop => Console.WriteLine("Attached property Name: {0}", prop)); 

/*
Outputs:
Attached property Name: [Left, 50]
Attached property Name: [Top, 10]
*/

 Hope it helps.