Professional, Software

ListBox Clipping Issue

Last week I blogged about using ListBox control that is shipped as part of Controls sample pack in SDK for Silverlight Alpha 1.1.

Original Sample has this XAML where it used the ListBox.

<Canvas
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Controls="clr-namespace:Silverlight.Samples.Controls;assembly=ClientBin/Silverlight.Samples.Controls.dll"
        xmlns:Controls1="clr-namespace:ImageListBox;assembly=ClientBin/ImageListBox.dll"
        x:Name="parentCanvas"
        Loaded="Page_Loaded"
        x:Class="ImageListBox.Page;assembly=ClientBin/ImageListBox.dll"
        Width="640"
        Height="480"
        Background="#FF000000">
  <Controls:ListBox Height="350" Width="200"  Name="listbox"/>
</Canvas>

I just realized when I changed by ListBox height from 350 to 500, it clipped the listbox as shown in the picture where you don’t see the bottom end of the scollbar.

The magic height was 450. Since This SDK have source code with them, I debugged through the sample control and realized that this line of code (text in red)  was wrong…

        protected override void UpdateLayout()
        {
            ...
            ...
            //update clipping area
            RectangleGeometry clip = new RectangleGeometry();
            clip.Rect = new Rect(0, 0, Width, Height);
            Clip = clip;
        }

 This code basically sets the clip on the listbox but the Clip needs to be set on the canvas at the root of the ListBox.xaml

So if you change this method to following code (Text in Orange) in ListBox.cs file, then it sets the clip on the containing canvas and it works correctly

        protected override void UpdateLayout()
        {

            ...
            ...
            //update clipping area
            RectangleGeometry clip = new RectangleGeometry();
            clip.Rect = new Rect(0, 0, Width, Height);
            //Clip = clip;
            ActualControl.Clip = clip;
        }

 

 so now listbox renders correctly…

Advertisements
Standard

4 thoughts on “ListBox Clipping Issue

  1. Pingback: Recursive Reflection : ListBox Clipping Issue

  2. Pingback: Fixes for Sample ScrollViewer « Desperately Seeking Love of Sophie

  3. Pingback: Part 5: Search Application (Detail View) « Desperately Seeking Love of Sophie

  4. Pingback: There's something about WPF : Some cool stuff!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s