Corona is implemented as a XAML control on WP8. So, yes, you can definitely lay it out as you have described on WP8 using the XAML layout containers Microsoft already provides.
If you double click on your “MainPage.xaml” file in Visual Studio, it’ll display the UI designer. Notice that our CoronaPanel XAML control is embedded in a DrawingSurfaceBackgroundGrid container. What you can do is set up the DrawingSurfaceBackgroundGrid with 3 rows as follows:
-
Left click on the “DrawingSurfaceBackgroundGrid” text in the XML panel. (This will display its settings in the “Properties” panel.)
-
In the “Properties” panel, expand the “Layout” section.
-
Click the “…” button for the “RowDefinitions” property. (You might have to click the “down” button to see this property.)
-
In the RowDefinitions window, click the “Add” button 3 times to add 3 rows. (You can modify their heights later.)
-
Click the OK button to close the window and accept the change.
-
Drag and drop the CoronaPanel control into the middle row. (This would be “Row 1”, because the row numbers are zero based.)
-
Right click on the CoronaPanel control and click on the “Layout\Fill All” in the popup menu to make sure it’ll fill that row for all screen resolutions. (This is in case you didn’t position in perfectly within the row and the UI designer added an x/y coordinate to your XAML.)
-
To the left of each row line in the UI designer, you should see a triangle. Drag it to the height that you want.
Now, there is 1 problem with the above. In the “MainPage.xaml.cs” file, notice that your C# code is set up to render fullscreen to the background. Instead of just within the CoronaPanel control’s area. It is set up this way because this is the only means of achieving 60 FPS, which is a WP8 limitation. If you don’t mind having your app render at 30 FPS, then the simple solution is to disable background rendering as follows…
- Modify your “config.lua” to render at 30 FPS, because 60 FPS will be impossible.
2) Double click on the “MainPage.xaml.cs” file in the “Solution Explorer” panel.
3) Delete or comment out the following lines from your MainPage constructor.
fCoronaPanel.BackgroundRenderingEnabled = true; fDrawingSurfaceBackgroundGrid.SetBackgroundContentProvider(fCoronaPanel.BackgroundContentProvider); fDrawingSurfaceBackgroundGrid.SetBackgroundManipulationHandler(fCoronaPanel.BackgroundManipulationHandler);
When you build and run your app after the above changes, notice that it renders within CoronaPanel exactly how you’ve set it up in the XAML UI designer.
Also note that the reason 60 FPS is impossible is because the CoronaPanel has to use Microsoft’s “DrawingSurface” XAML control, which Microsoft document as having performance issues because its content is rendered to a texture on every frame instead of directly to the screen. The reason it does this is because this is the only means of rendering to a “portion” of the screen on WP8. If this isn’t acceptable for your app, then you’re not going to want to use the above solution. What you’ll want to do instead is keep the CoronaPanel fullscreen and display the ad XAML controls inside of the CoronaPanel control. For example, notice in the XAML UI designer that you can drag-and-drop XAML controls inside of the CoronaPanel, and by doing so, you’ll see that the added control’s XML is added as a child element under the CoronaPanel XML node. So, the only trick here is that you have to calculate what the height of the XAML control is onscreen dynamically so that your Lua script won’t render content behind the ad XAML control. This is much more complicated, so, let me know which way you want to go.
