Xamarin.Forms: Coach Marks

2019-01-17 11_27_56-coach marks - Google Search.pngA Coach Mark is an overlay which helps teach a new user about a feature. This post will show you how to do it easily in Xamarin.Forms

Here’s the way the screen will look. You could replace the Text with an image, and a “Close” button is a good idea as well.

Image-1.jpg

Step 1:

Here’s a ContentView:


 
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             xmlns:gestures="clr-namespace:MR.Gestures;assembly=MR.Gestures"
             x:Class="Max.Views.Common.CoachMarksView">
	<ContentView.Content>
		<gestures:Grid Tapped="Grid_OnTapped">
			<ContentView>
			<Frame
			       BackgroundColor="#000000"
			       Opacity="0.6"
			       Padding="0"
				   Margin="0"
			       HorizontalOptions="FillAndExpand"
			       IsVisible="true" 
			       VerticalOptions="FillAndExpand"  CornerRadius="0" />
			</ContentView>
			<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"  >
				<Grid.RowDefinitions>
					<RowDefinition Height="Auto"></RowDefinition>
					<RowDefinition Height="*"></RowDefinition>
					<RowDefinition></RowDefinition>
				</Grid.RowDefinitions>
 
				<ffimageloading:CachedImage Grid.Row="0" x:Name="Image" CacheDuration="0" FadeAnimationEnabled="True"></ffimageloading:CachedImage>
			</Grid>
		</gestures:Grid>
	</ContentView.Content>
</ContentView>

Step 2: The Bindings

	public partial class CoachMarksView : ContentView
	{
		public CoachMarksView ()
		{
			InitializeComponent ();
		}
 
		public string CoachImageUrl
		{
			get { return (string)GetValue(CoachImageUrlProperty); }
			set { SetValue(CoachImageUrlProperty, value); }
		}
 
		public static readonly BindableProperty CoachImageUrlProperty =
			BindableProperty.Create(nameof(CoachImageUrl), typeof(string), typeof(CoachMarksView),
				propertyChanged: (bindable, oldValue, newValue) => ((CoachMarksView)bindable).PopulateCoachImageUrl());
 
 
		public EnumCoachMarkPosition CoachImagePosition
		{
			get { return (EnumCoachMarkPosition)GetValue(CoachImagePositionProperty); }  
			set { SetValue(CoachImagePositionProperty, value); }
		}
 
		public static readonly BindableProperty CoachImagePositionProperty =
			BindableProperty.Create(nameof(CoachImagePosition), typeof(EnumCoachMarkPosition), typeof(CoachMarksView),
				propertyChanged: (bindable, oldValue, newValue) => ((CoachMarksView)bindable).PopulateCoachImageUrl());
 
 
 
 
 
		void PopulateCoachImageUrl()
		{
			if(CoachImageUrl.HasValue()) this.Image.Source = CoachImageUrl;
 
			switch (CoachImagePosition)
			{
				case EnumCoachMarkPosition.TopRight:
					Image.HorizontalOptions=LayoutOptions.End;
					Image.VerticalOptions=LayoutOptions.Start;
					break;
				case EnumCoachMarkPosition.TopLeft:
					Image.HorizontalOptions=LayoutOptions.Start;
					Image.VerticalOptions=LayoutOptions.Start;
					break;
				case EnumCoachMarkPosition.BottomRight:
					Image.HorizontalOptions=LayoutOptions.End;
					Image.VerticalOptions=LayoutOptions.End;
					break;
				case EnumCoachMarkPosition.BottomLeft:
					Image.HorizontalOptions=LayoutOptions.Start;
					Image.VerticalOptions=LayoutOptions.End;
					break;
				default:
					throw new ArgumentOutOfRangeException();
			}
 
		}
 
		private void Grid_OnTapped(object sender, TapEventArgs e)
		{
			this.IsVisible = false;
		 
		}
	}

 

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s