Coachmark view for Xamarin forms

Question

Coachmark view for Xamarin forms

Padhy, Niladri 21

Hi Support,

How can we design Coachmark view in Xamarin Form which will compatible with both iOS and Android.

Looking for solution like below.

0 comments

Answer accepted by question author

0 additional answers

Your answer

Answer 1

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,166 Microsoft External Staff

Hello,

For Implementing the Coach Mark View in Xamarin.forms, you need to use AbsoluteLayout or Grid. They allow elements could overlay in layout.

You can try the following steps:

Step1. Use Gird to design the overlay style UI.

Step2. Add TapGestureRecognizer to the overlay elements. For example, when user clicks the screen, the overlay element change their IsVisible Property to false.

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Padhy, Niladri 21 Reputation points

2022-04-06T11:49:15.67+00:00

HI Alec Liu,
My question is on Coachmark view. A UI overlay view which will show on top of the screen on first launch. This overlay ui will be an aid to the user in learning how to use the system.

Thanks
Niladri
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,166 Reputation points Microsoft External Staff

2022-04-07T05:33:20.1+00:00

It's my mistake, I have already updated my answer.
Padhy, Niladri 21 Reputation points

2022-04-07T12:46:00.537+00:00

Hi Alec,

As you mentioned to use a overlayout with Absolute layout/Grid, will work. But the main challenge is relative positioning of views in Mobile & Tablet screens. Also how to add coach marks for Toolbar icons & Hamburger menu. The screenshot which I attached, is showing coach marks for toolbar items as well.

It will be a great help you can share some code sample any Libraries.

Thanks
Niladri
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,166 Reputation points Microsoft External Staff

2022-04-08T06:43:51.137+00:00
In fact, it's not very hard to implement it. You can refer the following code:

<Grid> <StackLayout>  </StackLayout> <Grid VerticalOptions="StartAndExpand" HorizontalOptions="EndAndExpand">  </Grid> <Grid/>

challenge is relative positioning of views in Mobile & Tablet screens.

In Grid, the position can vary according to the proportions in different platform, or you can make a full-screen photo as the overlay view, and control it whether appearing by event.
Padhy, Niladri 21 Reputation points

2022-04-08T07:33:15.493+00:00

Hi Alec,

Thanks a lot for your support.

As you mentioned in Grid the position will vary on different platforms and device resolutions. Also I faced issues in drawing overlay on top of Hamburger menu and toolbar icons from a content page. Alternatively as you suggested to make a full-screen photo as the overlay view will work.

I thought of keeping 2 set of full-screen photos for mobile and tablet and draw a overlay view on top of it. This will have a better look and feel both Mobile & Tablet users.

Thanks
Niladri
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,166 Reputation points Microsoft External Staff

2022-04-08T09:06:46.42+00:00

It's my pleasure:)
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,166 Reputation points Microsoft External Staff

2022-04-19T06:23:17.63+00:00

I have not heard from you for a couple of days. Please let me know if there is anything that I can help here.
Padhy, Niladri 21 Reputation points

2022-04-19T06:35:56.12+00:00

I have implemented as you suggested, like drawing overlay on top of a Full screen image. Its working fine.

Thanks a lot.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,166 Reputation points Microsoft External Staff

2022-04-20T01:18:20.26+00:00

Could you please accept my answer? It will be helpful for others who meet the same issue.:)

Share via

Coachmark view for Xamarin forms

0 additional answers

Your answer