Search code examples
c#windows-10-mobile

Windows 10 Mobile Collection View (Dynamic positioned containers)

Is there any way to create Collection View (like in IOS) for Windows Phone?

https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/Introduction/Introduction.html

I would like to achive something like below. So boxes will be positioned according to orientation/screen size.

In another word, it should be like floating div in HTML.

enter image description here

Solution

  • Usually (or at least previously) in XAML this is implemented using WrapPanel. UWP doesn't have built-in WrapPanel but one option is to use GridView instead. For example:

    <Grid>
    <GridView Margin="24">

        <Border Background="Red" Width="100" Height="100" Margin="2"/>
        <Border Background="Red" Width="100" Height="100" Margin="2"/>
        <Border Background="Red" Width="100" Height="100" Margin="2"/>
        <Border Background="Red" Width="100" Height="100" Margin="2"/>
        <Border Background="Red" Width="100" Height="100" Margin="2"/>
        <Border Background="Red" Width="100" Height="100" Margin="2"/>

    </GridView>
</Grid>

    Will output the following in portrait:

    Portrait GridView

    And the following in landscape:

    GridView landscape

    If you like the idea behind WrapPanel, you can get some third party WrapPanels for UWP. Here's couple links: