Quantcast
Jump to content


Using Xamarin.Forms SwipeView on Galaxy Watch


Recommended Posts

tizen-banner-galaxywatch.png

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.

solutionexplorer.png

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.

swipeview.gif

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

swipeviews.gif

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

View the full blog at its source

Link to comment
Share on other sites



  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...





×
×
  • Create New...