Visual Studio will automatically create a “MainPage.xaml” for you and display inside your Visual Studio IDE. You can now design your application as per your need. Let us add some contents inside the page:
<Canvas x:Name="cnvContainer">
<Border BorderBrush="#FFC7851A" BorderThickness="1" Height="118" HorizontalAlignment="Left" Margin="12,26,0,0" Name="border1" VerticalAlignment="Top" Width="376" Background="#42F5E0A7" />
<TextBlock Text="Silverlight 4 Printing API Demo" FontWeight="Bold" HorizontalAlignment="Left" FontSize="20" Margin="26,41,0,225" Width="353" />
<ProgressBar Height="18" HorizontalAlignment="Left" Margin="26,108,0,0" Name="progressBar1" Value="75" VerticalAlignment="Top" Width="353" />
</Canvas>
<Button Content="Print" Height="23" HorizontalAlignment="Left" Margin="166,244,0,0" Name="btnPrint" VerticalAlignment="Top" Width="75" Click="btnPrint_Click" />
Here I am adding a “Border”, a “TextBlock” a “ProgressBar” and a “Button” inside the main Grid panel “LayoutRoot” inside the “MainPage.xaml”. We will start our printing job once we click on the button. Hence, added the Click event with the button.
Here is the full XAML inside the UserControl/Page:
<Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Center" VerticalAlignment="Top">
<Canvas x:Name="cnvContainer">
<Border BorderBrush="#FFC7851A" BorderThickness="1" Height="118" HorizontalAlignment="Left" Margin="12,26,0,0" Name="border1" VerticalAlignment="Top" Width="376" Background="#42F5E0A7" />
<TextBlock Text="Silverlight 4 Printing API Demo" FontWeight="Bold" HorizontalAlignment="Left" FontSize="20" Margin="26,41,0,225" Width="353" />
<ProgressBar Height="18" HorizontalAlignment="Left" Margin="26,108,0,0" Name="progressBar1" Value="75" VerticalAlignment="Top" Width="353" />
</Canvas>
<Button Content="Print" Height="23" HorizontalAlignment="Left" Margin="166,244,0,0" Name="btnPrint" VerticalAlignment="Top" Width="75" Click="btnPrint_Click" />
</Grid>
If you run your application now, it will look similar to this:
