locked
How to acheive WrapPanel behavior in UWP RRS feed

  • Question


  • The WrapPanel will position each of its child controls next to the other, horizontally (default) or vertically, until there is no more room, where it will wrap to the next line and then continue.

    But, the WrapPanel is not available in UWP. We can achieve the same functionality in UWP by using VariableSizedWrapGrid but not fully.

    Please find the following examples to see the difference between them, 


    Example-1: WrapPanel in WPF

      <WrapPanel Orientation="Horizontal">
                <Grid Background="Red" Width="200" Height="100"/>
                <Grid Background="Yellow" Width="200" Height="200"/>
                <Grid Background="Gray" Width="200" Height="100"/>
                <Grid Background="Green" Width="200" Height="100"/>
            </WrapPanel>

    Output:

    


    Example-2: VariableSizedWrapGrid  in UWP

     <VariableSizedWrapGrid Orientation="Horizontal">
                <Grid Background="Red" Width="200" Height="100"/>
                <Grid Background="Yellow" Width="200" Height="200"/>
                <Grid Background="Gray" Width="200" Height="100"/>
                <Grid Background="Green" Width="200" Height="100"/>
            </VariableSizedWrapGrid>

    Output:



    In this example, all child items taking height as 100. But in my example second child item height is 200.

    In VariableSizedWrapGrid, if we are not specify any itemWidth or itemHeight, it will take from first child item.so, all the child controls will be adjusted to first child item size.

    If we want to see the full content of second item, set itemHeight as 200. Then all child controls height will be 200. 

    Finally, I want to acheive the same behaviour as like WrapPanel in wpf.

    Please suggest us any control which is similar to WrapPanel.

    Friday, April 21, 2017 9:55 AM