How to Create Canvas Option In Universal Windows Platform Application

In this article, you will learn how to create or develop canvas option, in Universal Windows Platform Application.

Introduction - In this article, you will learn how to create canvas option in Universal Windows Platform application.

Requirement
  • Visual Studio 2015 update 3
Step 1 - Open the Visual Studio 2015 update 3 and choose New >> Project (or press Ctrl+Shift+N).
 
Universal  Windows  Platform

Step 2 - Now, select Visual C# >> Universal >> Blank App (Universal Windows). Give your application  a name and click "OK" button.



Step 3 - Select Target and Minimum version that your app will support and click "OK.



Step 4 - In Solution Explorer, open cs page and click the MainPage.xaml. Open the design window and go View >> Toolbox. Open the Toolbox and choose canvas option.





Step 5 - Now, go to XAML page and write the XAML code for it as shown below- 



  1. <Page x:Class="canvasexample.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:canvasexample" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">  
  2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  3.         <Canvas HorizontalAlignment="Left" Height="251" Margin="101,45,0,0" VerticalAlignment="Top" Width="379" />  
  4.         <Rectangle Fill="DarkSlateBlue" Height="50" Width="100" Margin="150,82,390,228" />  
  5.         <Rectangle Fill="DeepPink" Height="100" Width="50" Margin="101,137,489,123" />  
  6.         <Rectangle Fill="DarkSeaGreen" Height="50" Width="100" Margin="150,237,390,73" />  
  7.         <Rectangle Fill="DimGray" Height="100" Width="50" Margin="243,132,347,128" /> </Grid>  
  8. </Page>  
Step 7 - Now, we can run the app in machines or device. It should be like, Local  Machine, Device, Remote Machine.



Step 8 - Here, we can see the output.