Radial Menu Example

[Andrew Ridout]

Hi,

I am attempting to use a radial menu in a Windows Store application.  Please see attached screenshot which shows the page I want to add the radial menu to. The page content is held in a GridView containing a collection of 'tiles'.

I have the following requirements:

1) When an GridView item is clicked (i.e. the GridView SelectionChanged event is fired), the radial menu should display at the current mouse position/tap location (or a small offset of the current mouse position), similar to a traditional right-click context menu.

2) The radial menu needs to be invisible until one of the GridView tiles is clicked.  On SelectionChanged, the radial menu needs to fully display (i.e. Visibility="Visible" and IsOpen="True").

I've looked at the samples in the Syncfusion sample application and have also read the online Syncfusion radial menu documentation but I cannot find any useful examples of how to achieve my requirements.

Would it possible for you to provide a sample which meets these requirements?

Regards,
Andrew


Screenshot_82cb8d4b.zip

[Vignesh V]

Hi  Andrew,

We have prepared a sample that could possibly meet your requirements 'Moving Radial menu to TileItem click and Making it invisible until selectionChanged'. In the sample we have taken pointerPositions and transformed the SfRadialmenu to Pointer's point.

Please find the sample in below link,

RadialMenuClick_115205.zip

Please let us know if you have any queries.

Regards,

Vignesh V

[Andrew Ridout]

Thanks for this, the example is very useful.

We're writing the app using the MVVM pattern (PRISM framework).  Would it be possible to provide another example which demonstrates how the radial menu works using MVVM?

Also, I have a further requirement:

1) When the radial menu is open, if the user clicks elsewhere on the page (but not another tile), the menu should close (i.e. Visibility=Collapsed).

Could you include this requirement in the example?

Many thanks for your support.

Regards,
Andrew

[Vignesh V]

Hi Andrew,

Query1: SfRadial Menu in MVVM pattern.

We have prepared a sample to address your requirement 'SfRadialMenu in MVVM pattern'. Please find the sample in below link,

115025_RadialMenu.zip

Query2: To collapse RadialMenu while Clicking outside GridView 

We have Prepared a sample to address your requirement 'To collapse RadialMenu while Clicking apart from GridViewItems'. In the sample we have collapsed SfRadialMenu while GridView losing focus.

Please find the sample in below link,

RadialMenuClick_115205 (2).zip

Please let us know if you have any queries.

Regards,

Vignesh V

[Andrew Ridout]

Hi Vignesh,

Thanks for the above examples, they have been useful.

I have been attempting to implement the radial menu within my Prism MVVM app but it is not 100% working.  The problem is that the first time the GridView SelectionChanged event is fired, the radial menu does not fully open nor locate in the correct place.  However, subsequent SelectionChanged events renders the radial menu correctly, i.e. in the correct position and fully open.  Note that I want the radial menu to display at the exact mouse location so I have added this code to the GridView_PointerMoved method:

_viewModel.PointerPositionX = ptrPt.Position.X - (radialMenu.ActualWidth / 2);

_viewModel.PointerPositionY = ptrPt.Position.Y - (radialMenu.ActualHeight / 2);

I have uploaded a zip file which contains two solutions, RadialMenuTest and RadialMenuPrismTest.  RadialMenuTest contains the radial menu functioning correctly but in a non-MVVM app.  RadialMenuPrismTest is a Prism MVVM app where the radial menu does not work 100% correctly, as described above.

Please could you take a look and let me know what the problem is? Logically, the code seems identical.

Let me know if you have any questions or need any further information.

Thanks in advance,
Andrew

RadialMenuTests_98ba7562.zip

[Suresh B]

Hi  Andrew,

We have modified the given sample that could possibly meet your requirements 'radial menu does not fully open nor locate in the correct place'. In the sample we have modified in the lost focus event,  instead of changing visibility property ,viewmodel property has changed.

Please find the sample in below link,  http://www.syncfusion.com/downloads/support/directtrac/general/RadialMenuPrismTest60899564.zip

Please let us know if you have any queries.

Regards,

Suresh B

[Andrew Ridout]

Hi,

Unfortunately, the most recent code you provided does not meet my needs. It seems to function exactly the same as the code example I provided for you.

The problem is that on the first click of a GridView tile (i.e., the first time the radial menu should be displayed):

1) The menu does not display centrally on the mouse position. Rather, it displays offset to the bottom right of the mouse click. Subsequent clicks on other GridView tiles does locate the menu in the correct position.

2) The menu does not fully open on the initial mouse click. Subsequent clicks on other tiles does fully open the menu.

I'd be grateful if you could take another look at the latest code sample I provided, to ensure you understand exactly what my issues are. Hopefully you will be able to find a solution as this is currently hindering the further development of my app.

Thanks and regards,

Andrew

[Suresh B]

Hi Andrew,

 We are able to reproduce the reported issue 'SfRadialMenu does not display centrally on the mouse position for prism sample' and we have logged a bug report. The fix for this issue will be available in our upcoming Release which is scheduled to be released by 27th March 2014. Please visit our website periodically for update regarding releases.

 Please let us know if you have any queries.

 Regards,

Suresh B

[Andrew Ridout]

Hi Suresh,

Can you please let me know if this issue was resolved in your latest WinRT service pack - 11.4.0.30, released 4th March 2014?

Thanks,

Andrew

[Vignesh V]

Hi Andrew,

 

Sorry about the delayed response.

 

We would like to inform you that this issue fix is not included in our 2013 volume 4 Service pack release 2. This has been fixed and it will be available in our upcoming 2014 volume 1 release. If you need patch for it, then  we request you to contact us at Syncfusion Support or you may also create your customer account under Direct Trac and open a new incident so that our support engineer will assist you accordingly.

Our Direct Trac support system can be accessed from the following link:

 

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

 

Regards,

Vignesh V

[Andrew Ridout]

Hi Vignesh,

Thanks for the reply.  Do you know when the 2014 volume 1 release will be available?  If it is too far in the future I will raise a support call to request a patch but otherwise, if it is within the next few weeks I am able to wait.

Thanks,
Andrew

[Vignesh V]

Hi Andrew,

Our major release Vol 1, 2014 is expected to be rolled out by end of this month (Mar 2014). Please visit our website periodically for updates regarding releases.

 

Please let us know if you have any queries.

 

Regards,

Vignesh V

[Andrew Ridout]

Hi Vignesh,

I've installed the latest version (v12.1.0.46) and unfortunately this issue has still not been completely resolved.  While the radial menu is fully opening on the first time the GridView_SelectionChanged event is fired, it is not displaying in the correct place.

I have this code in place to locate the menu on the exact location of the mouse pointer:

    _viewModel.PointerPositionX = ptrPt.Position.X - (radialMenu.ActualWidth / 2);

  _viewModel.PointerPositionY = ptrPt.Position.Y - (radialMenu.ActualHeight / 2);

However, the first time the menu opens, it locates to the bottom right of the mouse pointer. Every subsequent time the menu opens, it locates in the correct position, i.e. centred on the mouse click.

Grateful if you could look into this.

Regards,

Andrew

[Andrew Ridout]

Hi,

Ignore my previous post, I have now fixed this issue myself by using radialMenu.Width and radialMenu.Height rather than using ActualWidth and ActualHeight.

Thanks for all your help,

Andrew

[Vignesh V]

Hi Andrew,

Thanks for your update.      

We are glad to know that you have found the solution.Please let us know if you need further assistance.

Regards,

Vignesh V

[Ranjith]

Thanks a lot

[Durga Rajan]

Hi Andrew,

Thanks for the update. Please let us know whether you need any further assistance.

Regards,
Durga S.