A common and key requirement in business applications is the ability for the user to print the information they are using in the business application. FINALLY – Silverlight 4 Beta delivers this capability.
This blog will show you how to first of all print in Silverlight 4 Beta and then how to print in a useful way!
The code for this blog can be found
here and is built with
Silverlight 4 Beta and Visual Studio 2010 Beta.
Steps:
1. Create a Silverlight application project with an ASP.NET web project to host it
2. Add the following XAML to the LayoutRoot grid of the MainPage.xaml file
<Grid.RowDefinitions>
<RowDefinition Height="14" />
<RowDefinition Height="31" />
<RowDefinition Height="31" />
<RowDefinition Height="14" />
<RowDefinition Height="31" />
<RowDefinition Height="200" />
<RowDefinition Height="14" />
<RowDefinition Height="26" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="88" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Text="Enter Your Title:" VerticalAlignment="Top" Width="120" />
<TextBox Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left" Name="TitleTextBox" Width="200" />
<TextBlock Grid.Column="1" Grid.Row="4" Height="23" HorizontalAlignment="Left" Name="textBlock1" Text="Enter Your Notes:" VerticalAlignment="Top" Width="120" />
<TextBox Grid.Column="1" Grid.Row="5" HorizontalAlignment="Stretch" Name="NotesTextBox" VerticalAlignment="Stretch" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" AcceptsReturn="True" />
<Button Content="Print Notes" Grid.Column="1" Grid.Row="7" Height="23" HorizontalAlignment="Right" Margin="0,0,3,0" Name="PrintButton" VerticalAlignment="Top" Width="75" Click="PrintButton_Click" />
This xaml lays out a couple of TextBlocks that capture a title and notes for a user to enter and a button that the user can click to print the information entered for the title and notes.
3. Add the following using statement to the MainPage.xaml.cs file
using System.Windows.Printing;
4. Add the following code to the MainPage.xaml.cs file
private void PrintButton_Click(object sender, RoutedEventArgs e)
{
PrintDocument doc = new PrintDocument();
doc.PrintPage += new EventHandler<PrintPageEventArgs>(doc_PrintPage);
doc.Print();
}
void doc_PrintPage(object sender, PrintPageEventArgs e)
{
e.PageVisual = LayoutRoot;
}
This code handles the code behind, creates a PrintDocument, defines the event handler that should be called after the print dialog’s OK button is clicked and then displays the print dialog via the Print() method.
The event handler for the PrintPage event is where the content for the print is assigned via the PageVisual attribute on the PrintPageEventArgs object. This can be any UI element. We assign the LayoutRoot element as we want to print our page. At the end of this event handler the content assigned to the PageVisual attribute is printed to the printer chosen by the user in the print dialog.
We are not going to do it here, but if you wanted to print multiple pages, the HasMorePages attribute on the PrintPageEventArgs object should be set to true. This would make the PrintPage event handler execute again where the same thing would be done for the next page.
5. Run the application , enter a title and some notes and click the print button, select a printer (in my case a PDF writing application) and click OK
I printed to a PDF file so I could see the effect without using paper. Hmmmmm….. The print of the LayoutRoot grid was literal. Notice that the UI is printed as displayed including the scrolled content in the notes TextBlock.
We need to change the printing to be something better for our needs. In my scenario we are going to want to print the notes on a page with the title at the top and the notes displayed below.
6. Add a user control to the Silverlight solution named PrintingPageTemplate
7. Add the following attributes to the user control xaml in PrintingPageTemplate.xaml
Width="815" Height="1060"
8. Add the following xaml to the LayoutRoot grid
<Grid.Background>
<LinearGradientBrush>
<GradientStopCollection>
<GradientStop Color="#FF9DE2F5" Offset="0"></GradientStop>
<GradientStop Color="#FF91E1FC" Offset="1"></GradientStop>
<GradientStop Color="#FF354EDB" Offset="0.512" />
</GradientStopCollection>
</LinearGradientBrush>
</Grid.Background>
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="10,10,10,10" >
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="#FF7CA9EB" CornerRadius="10" BorderThickness="5" Background="White" Height="50" >
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="2" TextWrapping="Wrap" Name="TitleTextBlock" FontSize="24" TextAlignment="Center" FontFamily="Lucida Sans Unicode" FontStyle="Italic" >
</TextBlock>
</Border>
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="#FF7CA9EB" CornerRadius="10" Margin="0,10,0,0" BorderThickness="5" Background="White" Height="950" >
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" TextWrapping="Wrap" Name="ContentTextBlock">
</TextBlock>
</Border>
</StackPanel>
This xaml defines a gradient background for the user control, defines a TextBlock surrounded by a border for the title and another for the main content where the notes will be displayed.
9. Add the following properties to the PrintingPageTemplate.xaml.cs file
public string PageTitle { set { TitleTextBlock.Text = value; } }
public string PageContent { set { ContentTextBlock.Text = value; } }
10. Replace the PrintPage event handler in the MainPage.xaml.cs file with the following code
void doc_PrintPage(object sender, PrintPageEventArgs e)
{
PrintingPageTemplate printPage = new PrintingPageTemplate();
printPage.PageTitle = TitleTextBox.Text;
printPage.PageContent = NotesTextBox.Text;
e.PageVisual = printPage;
}
Instead of printing the LayoutRoot grid, we put assign the title value entered to the property in the PrintingPageTemplate object instantiated (our user control) which assigns it to the title and notes content TextBlocks.
The one thing the PrintPage event handler does not do is calculate how much content should be displayed on the page before the rest is displayed on another page. Feel free to work that in yourself!
11. Run the application , enter a title and some notes and click the print button, select a printer (again in my case a PDF writing application) and click OK
Congratulations! You have implemented your own styled printing format for your application.
What have we done?
We have implemented printing and defined a styled layout for the printed page.
Conclusion
Using the PrintDocument class we can easily implement printing in a Silverlight 4 Beta application and support the printing needs of the users of the business application.