ClipToBounds part2… Applied to ListBox ….


So, I gave you the secret already … GetLayoutClip () …  that is it …


MY problem is twice I have sent that answer and they got back to me with “it is still not working” … mostly because they were trying to do it in a ListBox…  Let’s walk through it before we see some code:


Apply my lazy factor to the scenario:



 This is a listbox with my portfolio ( Stock symbols).. as I MouseOver each ListBox items, it Scales to 150% so I can read the details..  [all you need is to replace the template, for today we will use the same planet datatemplate we used last time, I told you Datatemplates maximized reuse did not I ? 


Unfortunately, we are not there yet… Right now, the image is being clipped like this and I can’t read the (imaginary) details..



 


So, who is clipping it?  In my experience that varies widely .. 


To understand why it varies, you must use Reflector and go look at FrameworkElement:GetLayoutClip …   There are many checks ( MaxWidth/Height) , Margins + RenderSize, etc. that determine what your clip is..  so depending on what you are doing, you might either be clipped by:



  • the ListBox itself,  — this is almost always true

  • the Panel you are using for your ItemsPanel or ( I don’t see this one often)

  • your ListBoxItem.. ( have not seen this a lot other than some creative animations)

  • seldomly your item is clipped in the template itself -for this one do what we did for the button —

Experience taught me to override all at once; don’t leave it to luck or the person replacing you will be puzzled a year from now, when they change some thing in the template and this thing starts clipping …


So, attached is a quick & very dirty example — don’t think of it as a best practice, more of a what to look for list’ on how to get around some of the usual gotchas..  Here is what it shows:



  1. UCListBox derived from ListBox and override GetLayoutClip ..     (Unclipped.cs)

  2. Override the listBox’s ControlTemplate…  The ControlTemplate had a Border, a ScrollViewer, and other items that tend to clip your ListBoxItem.. .(ResourceDictionary1.xaml,  UCListBoxTemplate)

  3. UCListBoxItem derived from ListBoxItem and override GetLayoutClip [ this one I do all the time too, though part of the time you can get away with out it] .. (Unclipped.cs)


    1. Note, if you do that, you need to tell the ListBox ItemGenerator to create your custom ListBoxItems, so override GetContainerForItemOverride … (Unclipped.cs)

  4. Go back to the XAML and tell it to use my custom UCListBox instead of the ListBox I had earlier ..   ( Scene2.xaml , <lcl:UCListBox Margin… )

 


OK, I think that is it … See code attached….  Created using July CTP … Opens fine in Expression of course..  [but might need to build it once before you can use designer]


 


 


 


 


 


 


 


 

ListBoxClippingSample.zip


Comments (0)