ClipToBounds part2... Applied to ListBox ....

  • Article

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