none
VariableSizedWrapGrid / WrapGrid Strange Measuring

    Question

  • Both VariableSizedWrapGrid and WrapGrid have strange measuring pass where they measure all children based on the first item.

    Because of that, the following XAML will clip the 3rd item.

            <VariableSizedWrapGrid Orientation="Horizontal">
                <Rectangle Width="50" Height="100" Margin="5" Fill="Blue" />
                <Rectangle Width="50" Height="50" Margin="5" Fill="Red" />
                <Rectangle Width="50" Height="150" Margin="5" Fill="Green" />
                <Rectangle Width="50" Height="50" Margin="5" Fill="Red" />
                <Rectangle Width="50" Height="100" Margin="5" Fill="Red" />
            </VariableSizedWrapGrid>

    Pretty much VariableSizedWrapGrid measures with infinity the first item and then the rest children are measured with desired size of the first one.

     Is there any reason for this?

    - ngm

    Sunday, March 18, 2012 12:44 AM

Answers

All replies

  • I don't see any issue with this code:

    Can you explain what you mean in more detail?


    Matt Small - Microsoft Escalation Engineer - Forum Moderator

    Monday, March 19, 2012 8:04 PM
    Moderator
  • Try looking harder Matt ;)

    The thrid item's height should be 150 but it's rather clipped to first item's height due to the faulty measuring pass (see above for explaination).

    Here's WPF output, the same XAML, just WrapPanel instead of VariableSizedWrapGrid:

    Best regards,

    - ngm

    Monday, March 19, 2012 10:24 PM
  • Hi namO11,

    I think you want to do like this:

    you need set the VariableSizedWrapGrid's  MaximumRowsOrColumns or  Width.

    <VariableSizedWrapGrid Orientation="Horizontal" ItemHeight="50" ItemWidth="50" MaximumRowsOrColumns="3"> <Rectangle VariableSizedWrapGrid.ColumnSpan ="1" VariableSizedWrapGrid.RowSpan="2" Margin="5" Fill="Blue" /> <Rectangle VariableSizedWrapGrid.ColumnSpan ="1" VariableSizedWrapGrid.RowSpan="1" Margin="5" Fill="Red" /> <Rectangle VariableSizedWrapGrid.ColumnSpan ="1" VariableSizedWrapGrid.RowSpan="3" Margin="5" Fill="Green" /> <Rectangle VariableSizedWrapGrid.ColumnSpan ="1" VariableSizedWrapGrid.RowSpan="1" Margin="5" Fill="Red" /> <Rectangle VariableSizedWrapGrid.ColumnSpan ="1" VariableSizedWrapGrid.RowSpan="2" Margin="5" Fill="Red" /> </VariableSizedWrapGrid>


    Thanks! Damon.Tian

    Tuesday, March 20, 2012 1:21 AM
  • Damon,

    That was just example showing VariableSizedWrapGrid or WrapGrid measuring behavior which I believe is faulty. It affects many more complex layouts.

    The real question is why does it measure all children according to the desired size of the first one only?

    Check the difference with WPF WrapPanel.

    - ngm

    Tuesday, March 20, 2012 1:41 AM
  • I see now. :-)  I'[ll research this and get back with you.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator

    Tuesday, March 20, 2012 1:02 PM
    Moderator
  • NGM - I am filing a bug on this behavior.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator

    Friday, March 23, 2012 2:13 PM
    Moderator
  • Thanks for assistance Matt.

    - ngm

    Friday, March 23, 2012 8:35 PM
  • Just so you know... this is by-design behavior.  Here's the explanation:

    WG supports single sized items and all items are shown at that same size.  VSWG allows for variable sized items but the item sizes allowed are in integral multiples of the base cell size.  WG and VSWG work in layout cells.  The size of the layout cell is determined by ItemHeight and ItemWidth properties.  If  these properties are not set, then the size of the first item is used as the cell size and subsequent items are measured at that size for WG; for VSWG the item is measured in integral multiplication of the cell size based on RowSpan and ColumnSpan properties.

    It seems that you have to set the height and width of the VSWG in order to accomodate the size of the largest item if you don't want the item to be first in the list. 


    Matt Small - Microsoft Escalation Engineer - Forum Moderator

    Thursday, March 29, 2012 4:41 PM
    Moderator
  • Matt,

    Thank you for pulling the feedback from the team, I really appreciate it.

    As far as WG and VSWG go, I'm aware of ItemHeight and ItemWidth properties. Once they're set it's pretty clear how those panels will behave. However, if the value is not set i.e. if it is left as NaN which is interpreted as "Auto" according to the documentation for ItemHeight:

    "The height of the layout area for each item that is contained in a VariableSizedWrapGrid. The default is Double.NaN, which results in the "Auto" layout behavior"

    The question is what these panels consider as "Auto"?

    Basically, as it looks like now, they interpret "Auto" as the size of the first item and then the remaining items are sized according to that one. This doesn't sound to me as "Auto" at all. Also isn't "Auto" that gives children available space of the tallest / widest child much more useful than what we've got now?

    Even if it's "by-design behavior" which I would like to hear reasoning behind, how the one achieve WrapPanel behavior from WPF / Silverlight (without writing it from scratch)?

    If this is not enough to trigger questioning behind this design, let me give you couple constraints that I'm facing.

    WrapGrid can be used only as items host. When it's items host i.e. within ItemsControl type of controls which main flexibility lies behind dynamic content, it is very hard to determine the tallest / widest child and then set ItemHeight / ItemWidth on WrapGrid especially keeping in mind that those are not attached dependency properties.

    The real world scenario that I'm facing is using both WrapGrid as items host and group style panel. While I can constraint my items to be of the same size (my requirements allow it in this case) I cannot constraint my groups to be of the same size which is very logical if you think about it - you can have various number of items within the GroupItem which becomes item within WrapGrid defined as items host.

    Pretty much, I'm very surprised to get the answer "this is by-design behavior" from XAML team.

    Thanks,

    - ngm

    Thursday, March 29, 2012 8:13 PM
  • NGM - Your feedback is heard and understood.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator

    Monday, April 02, 2012 1:34 PM
    Moderator
  • Matt, as long as it's heard I'm happy ;)

    Thank you!

    - ngm

    Tuesday, April 03, 2012 12:22 AM
  • The other problem I have encountered with WG and VSWG is that you cannot hide an item by setting its Visibility property to Visibility.Collapsed.  The item is hidden, but space it still reserved in the layout for the item (essentially the same result as Visibility.Hidden, which ironically doesn't exist in WinRT for some reason).

    To be honest, I don't understand these deficiencies.  I attended the BUILD conference in September last year, and was looking forward to diving into developing Metro apps.  Sadly, I'm finding I spend more time trying to find workarounds to bugs and lack of support for what should be basic features (e.g., a simple wrapping panel) than I do implementing my app's feature set.

    Sorry, but this is really frustrating!

    • Proposed as answer by mchady Wednesday, May 08, 2013 6:52 AM
    • Unproposed as answer by mchady Wednesday, May 08, 2013 6:52 AM
    Monday, April 16, 2012 2:00 AM
  • You're completely right. I didn't catch that one.

    That's one of the "XAML essentials" which I find very strange that such bug can make its way so late into development lifecycle.

    To be fair, Silverlight doesn't have Hidden visibility state as well. At this point asking anything beyond Silverlight's XAML subset is too much, because as you can see the WinRT XAML dialect has still plenty of things to clear up in order to get stabilized.

    - ngm

    Tuesday, April 17, 2012 6:30 PM
  • A workaround for Visibility.Hidden is pretty simple, so I don't mind its absence as much.  But when Visibility.Collapsed does not behave correctly, it's not possible to have a data-bound UI without ugly gaps where the hidden (i.e., collapsed) items are located.  Some layouts (e.g., Grid, StackPanel, etc.) respect Visibility.Collapsed and others (e.g., WrapGrid, VariableSizedWrapGrid, ListView, etc.) do not.  I don't understand the inconsistency.

    Tuesday, April 17, 2012 11:17 PM
  • I have to agree with NGM's original point regarding the reasoning for changing the behaviour of this class.  Is there a business scenario that benefits from the new behaviour (vis-à-vis WPF)?  Were there bug reports or feature requests to change the behaviour of WrapPanel?  If not, the big business scenario that would exist from maintaining the same behaviour is portability between WPF and WinRT.

    -- Mendel

    Tuesday, May 15, 2012 2:15 PM
  • Matt - just for clarification - is this bug fixed?

    Also will fixing this bug give the same functionality as a Silverlight or WPF WrapPanel? 

    Thanks.

    Monday, November 12, 2012 1:21 PM
  • It's not a bug...

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, November 12, 2012 2:43 PM
    Moderator
  • Thanks Matt.
    Monday, November 12, 2012 3:04 PM
  • WG supports single sized items and all items are shown at that same size.  VSWG allows for variable sized items but the item sizes allowed are in integral multiples of the base cell size.  WG and VSWG work in layout cells.  The size of the layout cell is determined by ItemHeight and ItemWidth properties.  If  these properties are not set, then the size of the first item is used as the cell size and subsequent items are measured at that size for WG; for VSWG the item is measured in integral multiplication of the cell size based on RowSpan and ColumnSpan properties.

    Matt

    What would you recommend for layout purposes if I have a collection of variable sized items and they are NOT going to be integral multiples of the base cell size?

    I'm really struggling with a solution to this design dilemma.

    Thanks.

    Philip

    Monday, November 19, 2012 4:56 PM
  • Philip, I ran into the same issue, I found a Windows 8 XAML port from a Silverlight WrapPanel on Codeplex:

    http://winrtxamltoolkit.codeplex.com/

    Not sure if that helps you..

    Thanks

    Monday, November 19, 2012 9:48 PM
  • Hi Ryan

    Yes, it does help me, thank you. I continued doing Internet searches after posting my question and came across the same resource. I've very quickly swapped out the VWG for the wrap panel and my app is behaving just as I want it to.

    Many thanks.

    Philip

    Tuesday, November 20, 2012 8:09 AM
  • Have you guys tried using the VirtualizingStackPanel instead of WrapGrid for the ItemsPanelTemplate? It seems to behave correctly, at least with respect to sizing the list items to the total width of the ListView, which is what I needed in my project.
    Wednesday, May 08, 2013 6:56 AM