Each one is the best – for different definitions of "best" [The BestFitPanel collection of layout containers provides flexible, easy-to-use options for Silverlight, WPF, and Windows Phone applications]


This blog has moved to a new location and comments have been disabled.

All old posts, new posts, and comments can be found on The blog of dlaa.me.

See you there!

Comments (13)
  1. KRK says:

    Thank you very much.

    Excellent Writeup and very useful code.

    Regards

    KRK

  2. Dragan says:

    Excellent!!!!

  3. Eitan Gabay says:

    Hi,

    Great Panel!

    I try to use it in Blend and encounter an error.

    It say that the DesireSize should not be NaN or PositiveInfinity.

    Any solution ?

  4. Delay says:

    Eitan Gabay,

    I don't have Blend handy right now – if you don't mind sharing the steps/XAML you're using when you see this, I'll start from that when I get a chance to look into this properly.

    Thanks!

  5. Eitan Gabay says:

    In the XAML file i declare simple ListBox.

       <ListBox x:Name="ListBoxRoot" Background="Transparent" ItemsSource="{Binding Contacts}" >

           <ListBox.ItemsPanel>

               <ItemsPanelTemplate>

                   <Delay:MostBigPanel/>

               </ItemsPanelTemplate>

           </ListBox.ItemsPanel>

       </ListBox>

  6. Delay says:

    Eitan Gabay,

    Okay, thanks! I thought I tried the "empty" case, but maybe not… I'll have a look this evening and let you know.

  7. Delay says:

    Eitan Gabay,

    I was able to reproduce this, but only with ListBox (vs. the ItemsControl my sample uses) and possibly only at design-time, though I didn't try to verify that. The simple change I've made is to add the following three lines to the top of the existing MeasureOverride method in BestFitPanel.cs:

    if (double.IsInfinity(availableSize.Width) || double.IsInfinity(availableSize.Height))

    {

       return new Size();

    }

    This new code detects exactly the problematic case and returns an empty (0x0) size which seems to me to be most consistent with the behavior of other framework code in similar circumstances.

    If you don't mind trying this out in your scenario, I'd love to hear if it solves the problem for you. If so, then I'll blog about this fix (and credit you) in a week or so. If not, then I'll dedicate a bit more time to this (vs. doing it quickly while I've got other stuff going on).

    Thanks very much for your help!

  8. Eitan Gabay says:

    Hi,

    Thanks for your quick response.

    I'll try your fix later today.

    Another issue –

    I've uploaded video to demonstrate a problem in the MostSquare panel: http://www.youtube.com/watch

    As you can see I've added a button that dynamically adds item to the panel on each click, you can see the code behind as well.

    I've started with 20 items, and as you can see I measure the width and height an item, it's about 155px.

    When I got to new row the square size has not been saved, and now it's about 130×160.

  9. Delay says:

    Eitan Gabay,

    Thanks for trying that out when you get a chance!

    Regarding your video, I'm not sure anything's wrong there, actually. MostSquarePanel tries for the layout that is closest to being a square, but still allows each item to take up the full area of the "grid cell" it occupies. In your example, there is a 7×4 grid – I don't know all the dimensions involved, but I bet if you do the math on what each cell would be in an 8×4 or 6×5 grid (which are the neighbor arrangements that allow for the 25 items you have there) that you'll find both arrangements give less square (i.e., diagonals further from 45 degrees) cells and therefore were correctly not chosen. We can argue the merits of the relevant algorithm, but I'm optimistic that it's at least operating correctly in the case you show! 🙂

  10. Eitan Gabay says:

    Hi,

    The solution for the Blend problem is working.

    I can now use Blend with the panel.

    Thanks.

  11. Eitan Gabay says:

    But….

    There is other problem  🙂

    With ItemControl, its working fine, the layout is in order when i add several items to 'Contacts':

       <ItemsControl x:Name="ListBoxRoot" Background="Transparent" ItemsSource="{Binding Contacts}" >

           <ItemsControl.ItemsPanel>

               <ItemsPanelTemplate>

                   <Delay:MostSquarePanel/>

               </ItemsPanelTemplate>

           </ItemsControl.ItemsPanel>

       </ItemsControl>

    But with ListBox it show just the first item:

       <ListBox x:Name="ListBoxRoot" Background="Transparent" ItemsSource="{Binding Contacts}" >

           <ListBox.ItemsPanel>

               <ItemsPanelTemplate>

                   <Delay:MostSquarePanel/>

               </ItemsPanelTemplate>

           </ListBox.ItemsPanel>

       </ListBox>

  12. Delay says:

    Eitan Gabay,

    First off, I'm glad to hear the Blend issue's been fixed! I'll update the ZIP and post about it soon. If you could please give me your blog link, web page, or Twitter account that I should use when I credit you for reporting the problem, I'd appreciate it! 🙂

    Regarding the ItemsControl vs. ListBox issue, my guess is that the difference is due to the fact that ListBox containers are ListBoxItem and ItemsControl containers are ContentPresenter. I'm thinking there's some aspect of the default ListBoxItem style that makes it behave weirdly inside a BestFitPanel. So you might try playing around with a custom ListBox.ItemContainerStyle to see if this might be the case and override any problematic properties if so.

    Good luck – I hope that helps!

  13. Eitan Gabay says:

    Hi David,

    My Twitter account is EitanGabay76, glad i could help  :-).

    I'll try your suggest about the ListBox.ItemContainerStyle .

    Thanks for your developing effort in creating new awesome panel.

    I'll be following your blog.

Comments are closed.