Prerequisites

  • Visual Studio 2015

Introduction

Canvas panel is most likely to resonate with application designers coming from a background in WinForms or its predecessors. The control itself isn’t particularly suited to the layout flexibility that is expected in Windows Store apps.

The Canvas element represents a Canvas Control in XAML.

  1. <Canvas ...>
  2. one Or More UI Elements
  3. </Canvas>
  4. -or-
  5. <Canvas .../>

In addition, provide Canvas.Left and Canvas.Top values for the x-coordinates and y-coordinates for laying out items on a canvas.

  1. <Canvas>
  2. <Button Content="Positioned at 75,20" Canvas.Left="75" Canvas.Top="40"/>
  3. </Canvas>

It is also possible to provide a Canvas.ZIndex value that determines how the items, positioned on the canvas, are overlaid relative to each other.

  1. <Canvas>
  2. <Button Content="Positioned at 75,20" Canvas.ZIndex ="30"/>
  3. </Canvas>

Now, let's get started with the following steps:

Step 1 - Create Windows Universal Project

Open Visual Studio 2015 and click File -> New -> Project Option for New Universal App.


Step 2 - Giving the Project Name

Then, New Project Window will open. There, you can select Installed -> Template -> Visual C# -> Windows -> Universal and select a Blank App (Universal Windows).

Type Project Name as CanvasApp and click the OK button.
Step 3 - Setting the platform Versions

Here, we choose the Target Version and Minimum Version for our Universal Windows application. Click OK button.



Step 4 - Choose Designer Window

Now, go to the Solution Explorer and select MainPage.xaml.



Step 5 - Add the Coding

Now, add the following XAML code in MainPage.xaml.

  1. <Canvas>
  2. <Button Content="Positioned at 75,20" Canvas.Left="75" Canvas.Top="40"/>
  3. </Canvas>

Step 6 - Run the Application

Now, we are ready to run our Project. So, click Local Machine for running the application.

Output:


Conclusion - I hope you understood Canvas Control in Universal Window and how to run it.