Desperately Seeking Love of Sophie

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  ="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…