Windows Store App : Flipview custom styling – Part 3

Introduction :
Flipviews in Windows store app can be used to show items both Horizontally and vertically.
By default flipview items are aligned horizontally. But vertical alignment is also possible using flipview.

Description:
Vertical Alignment of flipview items can be achieved by editing the ItemsPanelTemplate and changing the orientation of VirtualizingStackPanel inside the itemsPanelTemplate to vertical.

Below is  the code snippet for aligning items of a flipview in vertical manner :

<FlipView x:Name="flipViewVertical">
            <FlipView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </FlipView.ItemsPanel>
            <Image Source="Assets/tajmahal.png" />
            <Image Source="Assets/tajmahal.png" />
            <Image Source="Assets/tajmahal.png" />
</FlipView>

Here’s a snapshot of the flipview with items aligned vertically

FlipView With Vertical arrows

FlipView With Vertical arrows

Conclusion:
Flipview can support both horizontal as well as vertical alignment of items. The ItemsPanelTemplate specifies the panel that is used for the layout of items. The default characteristics can be over written to change to vertical alignment.

Written By: Anobik Dey, Software Developer, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s