Rock Mobile Docs

Flip View

Inherits from Xamarin.Forms.ContentView.

This is a simple view that allows you to have two views take up the same space on the page. You wire up whatever interaction you want to cause the view to flip from front to back and vice-versa. So you can wire it up to a tap on the view itself, or whatever else you want.

There are two ways to initiate a flip. You can bind the IsFlipped property to a boolean value that will cause the view to flip when the value changes. This is probably not a common situation for you. Instead there is a FlipCommand property that you can bind to an action to initiate the flip, as you will see in the example below.

Properties

PropertyTypeDescription
FrontViewViewThe view content to display on the front side.
BackViewViewThe view content to display on the back side.
IsFlippedbooleanIf true then the back view will be displayed, otherwise the front view will be displayed. Default is false.
IsHeightNormalizedbooleanIf true then the flip view will always take the height of whichever view is taller and ensure it always takes up that much space. If false then when you flip views content below may shift up or down. Default is true.
DurationbooleanThe time in milliseconds that the transition between views will take. Default is 400.
OrientationFlipOrientationThe orientation of the flip. Default is Horizontal.
EasingEasingThe type of animation easing function to use. Default is Linear.
FlipCommandICommandYou can bind an action to this property to initiate a flip.

Flip Orientation

ValueDescription
HorizontalThe content is flipped horizontally.
VerticalThe content is flipped vertically.

Example

The FlipCommand is not a standard command, so as you can see we are actually using a named reference to the FlipView in our binding.

<Rock:FlipView x:Name="textCard">
    <Rock:FlipView.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding FlipCommand, Source={x:Reference textCard}}" />
    </Rock:FlipView.GestureRecognizers>
    
    <Rock:FlipView.FrontView>
        <Label Text="Front Text" />
    </Rock:FlipView.FrontView>

    <Rock:FlipView.BackView>
        <Label Text="Back Text" />
    </Rock:FlipView.BackView>
</Rock:FlipView>