Windows Store App : Flipview custom styling – Part 1

Introduction
Flipviews are a common control provided along with the windows store library. They are commonly used for magazines and news applications where reading content page wise is essential. It provides a unique swipe effect where you can see pages sliding horizontally or vertically according to your requirement.

For Swipe gestures using mouse,  as per the default style, there are arrows on both side boundaries of the flip view pointing towards the required direction of movement.

Description
We will Look into a situation where we need to remove the arrows of the flip view from it’s style. This situation may arise when we want an entirely touch application where swiping the screen might be the only option.

Here’s a snapshot of a horizontal flip view with mouse over the right arrow.

Flipview with default arrows

Flipview with default arrows

Now identifying the elements that need to be removed from the style.
1 – PreviousButtonHorizontal
2 – NextButtonHorizontal
3 – PreviousButtonVertical
4 – NextButtonVertical

Below is the code portion needed to be removed from the default styling:-

<Button x:Name="PreviousButtonHorizontal"
        Template="{ThemeResource HorizontalPreviousTemplate}"
        Width="70"
        Height="40"
        IsTabStop="False"
        HorizontalAlignment="Left"
        VerticalAlignment="Center" />
<Button x:Name="NextButtonHorizontal"
        Template="{StaticResource HorizontalNextTemplate}"
        Width="70"
        Height="40"
        IsTabStop="False"
        HorizontalAlignment="Right"
        VerticalAlignment="Center" />
<Button x:Name="PreviousButtonVertical"
        Template="{StaticResource VerticalPreviousTemplate}"
        Width="70"
        Height="40"
        IsTabStop="False"
        HorizontalAlignment="Center"
        VerticalAlignment="Top" />
<Button x:Name="NextButtonVertical"
        Template="{StaticResource VerticalNextTemplate}"
        Width="70"
        Height="40"
        IsTabStop="False"
        HorizontalAlignment="Center"
        VerticalAlignment="Bottom" />
Flipview without default arrows

Flipview without default arrows

Note
It’s not recommend to change the default behavior of controls. Although store will accept it but it may not promote the app. In my case, I have  changed the style, since I got a kind of requirement to do the same.

Summary
Removing the above mentioned styling element from the default view from the Flip view element we can get a desired output.

Written ByAnobik 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