Working With The Canvas Control In Universal Windows App


  • Visual Studio 2015


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.



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

Similar Articles