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…
Pingback: Recursive Reflection : ListBox Clipping Issue
Pingback: Fixes for Sample ScrollViewer « Desperately Seeking Love of Sophie
Pingback: Part 5: Search Application (Detail View) « Desperately Seeking Love of Sophie
Pingback: There's something about WPF : Some cool stuff!!