How to Compress Several Pages into One Page to Print in Silverlight

Introduction

In this article, I will introduce a method to compress several pages' contents into one page and print that page in Silverlight.

Background

Silverlight 4 provides a print function which can be used in enterprise projects more easily. And this means that Silverilght is not just used for demonstrations and create small components for uploading files.

The print function is easy to use but there are some inconveniences, for example, we must calculate how many pages the materials have because it cannot tell us. Therefore, some users create methods to print multiple pages in Silverlight.

But I want to talk about another situation where I want to print my material in one page although it has several pages. So I need to compress the width or height to print.

Let's take an example. The following image is a simple Silverlight program. There is a list on homepage which displays a 100 columns data. It is obvious that it will be over one page if printing.

After using the code, the 100 columns data is printed in one page (see following image).

It is not very clear after being enlarged. Therefore, if your contents are not suitable for compressing, the result will be as above.

Using the code

Page definition

<UserControl
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    x:Class="SilverlightApplication2.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400"
    xmlns:c="clr-namespace:SilverlightApplication2">

　　 <Grid x:Name="LayoutRoot" Background="White">

　　 <ScrollViewer>
        <StackPanel>
            <ListBox x:Name="lstData" Padding="50" 
              BorderBrush="Transparent" ItemsSource="{Binding}">
            <!--Define this converter to enable compress 
                      and display based on 100% by default-->
            <ListBox.RenderTransform>
            <ScaleTransform x:Name="st" ScaleX="1" 
              ScaleY="1"></ScaleTransform>
            </ListBox.RenderTransform>

    　　     <ListBox>
            <Button Content="Print" x:Name="btPrint" 
              Width="100" Click="btPrint_Click" 
              HorizontalAlignment="Left"></Button>
        <StackPanel>
　　 </ScrollViewer>
</Grid>
</UserControl>

Background code

using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Printing;

namespace SilverlightApplication2
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }
        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            //Prepare 100 Column Testing Data
            this.DataContext = Enumerable.Range(1, 100).Select(i => new Data()
            {
                ID = i,
                Name = "Steve Paul Jobs"
            });
        }
        private void btPrint_Click(object sender, RoutedEventArgs e)
        {
            //Actual Height of List
            var ah = lstData.ActualHeight;
            //Actual Width of List
            var aw = lstData.ActualWidth;
            //Create a New Print Document
            var doc = new PrintDocument();
            //Do Print Event
            doc.PrintPage += (o, a) =>
            {
                //Select Printer and Provide Print Height
                var h = a.PrintableArea.Height;
                //Select Printer and Provide Print Width
                var w = a.PrintableArea.Width;
                //Compress Width if not Enough
                if(aw > w) st.ScaleX = w / aw;
                //Compress Height if not Enough
                if(ah > h) st.ScaleY = h / ah;
                //Set Print Content
                a.PageVisual = lstData;
            };
            //Do Event after Printing
            doc.EndPrint += (o, a) =>
            {
                //Compress List to 100% again
                st.ScaleX = 1;
                st.ScaleY = 1;
            };
            //Print 
            doc.Print(null);
        }
    }
    class Data
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public override string ToString()
        {
            return string.Format("ID={0:000},Name={1}", ID, Name);
        }
    }
}

Conclusion

The key to this example is that Silverlight and WPF support transformation through different translators when presenting. ScaleTransform is the easiest one which can compress based on scale. Also, there are several other translators in Silverlight.

Addition

In addition, I found a blog which shows many Silverlight skills and I want to recommend this to you: http://janewdaisy.wordpress.com/category/silverligh/.