Search code examples
uwpuwp-xaml

UWP: How to create a flipView with multiple items in the view port?

I want to create a UI element similar to this enter image description here

I looked at possible controls and it looks like flipView might be the closest approximation. By default, FlipView only shows 1 element in the viewport and you have to click on chevron to move between different items. However, I want to have multiple items say 4-5 and after which I can use the chevron to move back and forth.

<Grid>
        <FlipView Height="700" Width="800">
            <Grid Margin="0 0 300 0" >
                <Image 
                    Source="ms-appx:///Assets/Image.jpg"/>
            </Grid>
            <Grid Margin="-200,0,200,0">
                <Image 
                    Source="ms-appx:///Assets/Image.jpg"
                    />
            </Grid>
            <Grid Margin="-200,0,200,0">
                <Image 
                    Source="ms-appx:///Assets/Image.jpg"
                    />
            </Grid>
            <Grid Margin="-200,0,200,0">
                <Image 
                    Source="ms-appx:///Assets/Image.jpg"
                   />
            </Grid>
        </FlipView>
</Grid>

I could get everything other than the first image show up. Is there a better way to do this? Or a better control than flip view?

Solution

  • The Carousel control from the Windows Community Toolkit is a good control for this kind of UI.