Using Xamarin.Forms SwipeView on Galaxy Watch

[Samsung Newsroom]

SwipeView in Xamarin.Forms 4.4

The new experimental SwipeView control is added in the Xamarin.Forms 4.4 release. SwipeView is a container control that wraps any of your controls and makes them swipeable.

Note: Depending on the platforms for which you are developing, SwipeView can only be used under an experimental flag. In this case, add the following line before calling Forms.Init in your application.

Forms.SetFlags("SwipeView_Experimental");

Preparation to use SwipeView in Tizen

For developers who use the Tizen wearable templates when creating a project in Visual Studio, update Tizen.Wearable.CircularUI NuGet version to 1.5.0-pre2 or later. This update brings Xamarin.Forms version 4.4.0.991537 to your application.

Using SwipeView on Galaxy Watch

Here is how to create a simple city selector sample application.

First, I wrap my content, which are images, with SwipeView. One image is the main city image and the other is a decorative image that shows the selected status of the main image. I select SwipeView.TopItems (one of four direction items) so that application users can swipe down the city image to invoke an action (in this example, to select/unselect the city image). To learn about SwipeItems.Mode, see Swipe Mode.

<c:CirclePage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:c="clr-namespace:Tizen.Wearable.CircularUI.Forms;assembly=Tizen.Wearable.CircularUI.Forms"
              x:Class="SwipeViewSample.MainPage"
              BackgroundColor="GhostWhite">
	<c:CirclePage.Content>
	    <StackLayout Orientation="Horizontal" Margin="0, 70, 0, 70" Spacing="15">
	        <SwipeView>
	            <SwipeView.TopItems>
	                <SwipeItems Mode="Execute">
	                    <SwipeItem Text="select" Invoked="TopItem_Invoked" />
	                </SwipeItems>
	            </SwipeView.TopItems>
	            <!-- My Content -->
	            <Grid>
	                <Image Source="Boston.png" />
	                <Image x:Name="selectedImage" Source="checked.png" IsVisible="False" InputTransparent="True"/>
	            </Grid>
	        </SwipeView>
	    </StackLayout>
	</c:CirclePage.Content>
</c:CirclePage>

Then, in the cs file, I simply change the visible status of a selectedImage when the main image is swiped down.

private void TopItem_Invoked(object sender, EventArgs e)
{
        selectedImage.IsVisible = !selectedImage.IsVisible;
}

Let's try running the code on an emulator.

Now, let's try adding more cities with SwipeView.

Review the official guide and API documentation to see what else you can do with SwipeView.

View the full blog at its source