CoreCLR's Blog

Archive for September, 2009

Silverlight 3: ListBox, ComboBox and AutoCompleteBox Performance

Posted by coreclr on September 26, 2009

One Silverlight 3 feature that is often overlooked is UI Virtualization. When a control supports UI Virtualization is only creates the UI elements that are actually visible on the screen.

Lets look at a simple example:

    <Grid x:Name="LayoutRoot">
        <ListBox x:Name="list"
            Margin="0,40,0,0"
            Width="240"
            Height="180"
            HorizontalAlignment="Left"
            VerticalAlignment="Top" />
        <Button Height="30"
                Width="200"
                VerticalAlignment="Top"
                Content="Load"
                HorizontalAlignment="Left"
                Click="OnClick"/>
    </Grid>

 

List<string> data = new List<string>();
public MainPage()
{
  InitializeComponent();
  for (int i = 0; i < 50000; i++)
  {
      data.Add(i.ToString());
  }
}

private void OnClick(object sender, RoutedEventArgs e)
{
   list.ItemsSource = data;
}

When the button is pressed, we set the ItemSource to a list with 50.000 strings. But performance is great because the control only creates UI elements for the visible elements and not for all 50.000 elements.

This works because in Silverlight 3, the ListBox by default use the VirtualizingStackPanel as its ItemsPanelTemplate.

If we change the ItemsPanelTemplate to a normal StackPanel, we don’t get UI Virtualization:

 <ListBox x:Name="list"
            Margin="0,40,0,0"
            Width="240"
            Height="180"
            HorizontalAlignment="Left"
            VerticalAlignment="Top">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>

Try this, and compare the performance.

AutoCompleteBox

Internally the AutoCompleteBox use a ListBox. This means that it also supports UI Virtualization. But there is one gotcha.

Try this:

<input:AutoCompleteBox x:Name="list"
   Margin="0,40,0,0"
   Width="240"
   IsTextCompletionEnabled="True"
   FilterMode="StartsWith"
   MinimumPrefixLength="0"
   MinimumPopulateDelay="200"
   HorizontalAlignment="Left"
   VerticalAlignment="Top">
</input:AutoCompleteBox>

When you type something in the box, it will take forever for it to open the dropdown.

The reason is that the ListBox in the AutoCompleteBox template don’t set an explicit MaxHeight, so it will just create UI elements for each item in its ItemSource.

This is a snippet from the template that illustrates this:

    <ListBox x:Name="Selector"
                Background="{TemplateBinding Background}"
                BorderThickness="0"
                Foreground="{TemplateBinding Foreground}"
                ItemTemplate="{TemplateBinding ItemTemplate}"
                ScrollViewer.HorizontalScrollBarVisibility="Auto"
                ScrollViewer.VerticalScrollBarVisibility="Auto"
                ItemContainerStyle="{TemplateBinding ItemContainerStyle}"/>

To fix this, we change to template to explicit set the MaxHeight:

<ListBox x:Name="Selector"
        MaxHeight="200"
        Background="{TemplateBinding Background}"
        BorderThickness="0"
        Foreground="{TemplateBinding Foreground}"
        ItemTemplate="{TemplateBinding ItemTemplate}"
        ScrollViewer.HorizontalScrollBarVisibility="Auto"
        ScrollViewer.VerticalScrollBarVisibility="Auto"
        ItemContainerStyle="{TemplateBinding ItemContainerStyle}"/>

A better approach would be to derive from the AutoCompleteBox class and make a dependency property. Then use DataBinding to connect the two properties.

The result is that same; The AutoCompleteBox now support UI Virtualization.

ComboBox

The ComboBox should also support UI Virtualization, but there seems to be a bug in the implementation. When opening the ComboBox, it seems that it creates UI elements for each item in its ItemSource. But when the dropdown is open, the scrolling is very fast. You can try this yourself:

 <ComboBox x:Name="list"
            Margin="0,40,0,0"
            Width="240"
            Height="180"
            HorizontalAlignment="Left"
            VerticalAlignment="Top">
            <ComboBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel />
                </ItemsPanelTemplate>
            </ComboBox.ItemsPanel>
        </ComboBox>

DataGrid

The DataGrid also supports UI Virtualization, and actually already did this i Silverlight 2.

TreeView

There is no UI Virtualization support for hierarchical data.

 

UI Virtualization has been in WPF for years, and its great to see it in Silverlight now.

The get more details, go to msdn or to Bea’s blog.

Advertisements

Posted in Silverlight | Leave a Comment »

Framework Engineering: Architecting, Designing, and Developing Reusable Libraries

Posted by coreclr on September 25, 2009

Krzysztof’s talk from TechEd 2007.

http://download.microsoft.com/download/b/d/1/bd133733-9647-445f-bc06-238ae9c0dd48/FrameworkEngineering.wmv

Posted in .NET, Video | Leave a Comment »

Visual Studio Presentation Mode

Posted by coreclr on September 25, 2009

A reminder to myself the next time I give a presentation.

These settings seems to give the best result when displaying code on a projector:

  • Font: Lucida Console
  • Size: 14
  • Selected Text – Item foreground: Black
  • Selected Text – Item background: Yellow

Posted in Presentations, Talk | Leave a Comment »

Designing .NET Class Libraries

Posted by coreclr on September 25, 2009

A few years old, but still relevant.

Content include Rich Type System, Member Types, Designing Inheritance, Hierarchies, API Usability, CLR Performance Tips, Designing for a Managed Memory World and Packaging, Assemblies and Namespaces.

http://msdn.microsoft.com/en-us/netframework/aa497250.aspx

Posted in .NET, Video | Leave a Comment »

Expression Blend for Developers Video

Posted by coreclr on September 25, 2009

Andrew Troelsen did a very nice video about blend for developers. Find it here:

http://www.intertech.com/downloads/blend/

Posted in Blend, Video | Leave a Comment »

Windows 7 VHD Script

Posted by coreclr on September 24, 2009

If you use VHD in Windows 7, you will find Harry Pierson’s PowerShell script very useful.

So instead of writing this every time:

bcdedit /copy {originalguid} /d "Windows 7"
bcdedit /set {newguid} device vhd=[D:]\Image.vhd
bcdedit /set {newguid} osdevice vhd=[D:]\Image.vhd
bcdedit /set {newguid} detecthal on

We can just start PowerShell and run:

.\add-bcd-vhd.ps1 Windows 7 D:\Image.vhd

(Note use "Set-ExecutionPolicy unrestricted" to set the Execution Policy)

Posted in Windows 7 | Leave a Comment »

Designing .NET Class Libraries

Posted by coreclr on September 23, 2009

If you have 4 hours to kill, I can recommend Krzysztof ‘s talk about Designing .NET Class Libraries.

http://www.researchchannel.org/prog/displayevent.aspx?rID=11087&fID=2740

Posted in .NET, Video | Tagged: | Leave a Comment »

Exam 70-502: WPF

Posted by coreclr on September 19, 2009

I am going to write a series of blog post that describe how to learn WPF and pass the 70-502 certification.

The best way to really learn WPF is to read the documentation and read these four books 1, 2, 3, 4 (combined with real world hands-on experience).

The skills being measured at the 70-502 exam is organized in 6 main sections:

Creating a WPF Application

  • Select an application type
    May include: Choose between Windows application, Navigation application, and XAML Browser Application (XBAP) application; select the right type of application based on security restrictions
  • Configure Event Handling
    May include: tunneling vs. bubbling events; using the Event Manager class; handle application-level events
  • Configure commands
    May include: defining commands; associating commands to controls; creating custom commands; handling commands
  • Configure page-based navigation
    May include: defining and using PageFunction; using Navigation Service and hyperlinks; simple navigation vs. structured navigation; using the Journal; handling navigation events
  • Configure application settings
    May include: create application settings; create user settings; loading and saving settings
  • Manage application responsiveness
    May include: implement asynchronous programming patterns; marshalling between threads; freezing UI elements

Building User Interfaces

  • Select and configure content controls
    May include: applying attached properties of controls to a user interface element; selecting appropriate controls for specific uses
  • Select and configure item controls
    May include: using lists, toolbars, menus, tree views, virtualization of item controls, status bar
  • Select and configure layout panels
    May include: choosing the correct layout panel; configuring sizing; aligning content; using a grid splitter
  • Integrate Windows Forms controls into a WPF application
    May include: adding controls not available in WPF, such as the property grid and masked text box; interop dialog boxes
  • Create user and custom controls
    May include: render appearance based on currently selected system theme; incorporate accessibility features by using UI automation; choosing between custom controls, user controls, and templates; consuming user control or custom controls; creating and handling routed events

Adding and Managing Content

  • Create and display two dimensional and three dimensional graphics
    May include: using geometric transformation; brushes; drawing shapes; clipping; flipping; hit testing
  • Create and manipulate documents
    May include: XML Paper Specification (XPS) and flow documents; incorporating UI elements inside documents; choosing the right element for text presentation; scaling text; selecting controls for formatting text documents; printing
  • Add multimedia content
    May include: media player vs. media element; adding a sound player; handling media-specific events such as buffering
  • Manage binary resources
    May include: embedding resources in your application; linking to external resources; preloading resources; asynchronously using resources; sharing resources
  • Manage images
    May include: accessing image metadata; transforming graphics into images; stretching and sizing images

Binding to Data Sources

  • Configure binding options
    May include: setting the correct binding mode and update mode; using static resources; using dynamic resources
  • Bind to a data collection
    May include: filtering, sorting, and grouping data; using data templates; binding to hierarchical data; binding to objects
  • Bind to a property of another element
    May include: using template binding; binding to an ancestor property
  • Convert and validate data
    May include: localizing data; using custom converters and custom validators; using multivalue converters
  • Configure notification of changes in underlying data
    May include: implementing INotifyPropertyChanged; using ObservableCollection

Customizing Appearance

  • Create a consistent user interface appearance by using styles
    May include: applying a style automatically to all controls of a specific type; implementing style inheritance; property value precedence (order in which dependency property values are applied)
  • Change the appearance of a UI element by using triggers
    May include: using multiple triggers; using property triggers; using event triggers; using data triggers
  • Add interactivity by using animations
    May include: creating a storyboard; controlling timelines; controlling the behavior when the animation completes; animating non-double data types; starting an animation from code
  • Share logical resource throughout an application

    May include: choosing where to store a resource; merging resource dictionaries; retrieving a resource by using procedural code

  • Change the appearance of a control by using templates
    May include: inserting a trigger inside a template; using predefined part names in a template; respecting the templated parent’s properties
  • Localize a WPF application
    May include: loading resources by locale; marking localizable elements; using culture settings in validators and converters; using language properties and rendering direction properties

Configuring and Deploying WPF Applications

  • Deploy for standalone access
    May include: using the MSI to create the installation; using click-once installation; configuring update options
  • Deploy to a partial trust environment

    May include: choose the correct local persistence mechanism; remove or disable application features that will not work in a partial trust environment

  • Deploy an XBAP application
    May include: publish an XBAP application to a temporary location; publish an XBAP application to a final location; deployment dependencies
  • Manage upgrades
    May include: loading modules on demand; migrating settings; migrating user data; programmatically check for updates
  • Configure the security settings of an application deployment
    May include: configuring application manifest; associating certificates with the application

Over the next weeks/months, I am going to blog about each of these. So stay tuned…

Posted in WPF | Leave a Comment »

A Unit Test is a Functional Spec

Posted by coreclr on September 3, 2009

Scott Bain has a really nice description of how to think about a Unit Test.

“Don’t think of Unit Tests as “Tests”, but instead think of them as functional specs. Every Unit Test defines, specifies and records one proper behavior of the system”.

There is a podcast with him here:

http://www.netobjectives.com/blogs/overcoming-impediments-to-tdd-test-driven-development

Posted in Unit Testing | Tagged: | Leave a Comment »

Clear/Remove a Data Binding in Silverlight

Posted by coreclr on September 1, 2009

When doing dynamic Data Bindings in code in Silverlight, we often need to clear/change the Binding on controls.

In WPF, we can use the ClearBinding methods on the BindingOperations class.
But in Silverlight, the BindingOperation Class don’t have these methods.

One way to clear a binding in Silverlight is just to use the ClearValue methods defined on the DependencyObject.
Here is a very simple example:

Person p1 = new Person1();
Person p2 = new Person2();

private void OnClick(object sender, RoutedEventArgs e)
       {
           if (this.DataContext == p1)
           {
              ClearBindings();
              this.DataContext = p2;
              t1.SetBinding(TextBox.TextProperty, new Binding("Name"));
              t3.SetBinding(TextBox.TextProperty, new Binding("Name2"));
           }
           else
           {
              ClearBindings();
              this.DataContext = p1;
              t1.SetBinding(TextBox.TextProperty, new Binding("Name"));
              t2.SetBinding(TextBox.TextProperty, new Binding("Name1"));
           }
       }
private void ClearBindings()
      {
          t1.ClearValue(TextBox.TextProperty);
          t2.ClearValue(TextBox.TextProperty);
          t3.ClearValue(TextBox.TextProperty);
      }
And here is the xaml:
<StackPanel Width="200" Height="50">
           <Button Click="OnClick" Content="Change Binding"></Button>
           <TextBox x:Name="t1" />
           <TextBox x:Name="t2" />
           <TextBox x:Name="t3" />
</StackPanel>

Posted in Silverlight, WPF | Tagged: , | Leave a Comment »