In Smart Office 10.0.4 a new Mashup control was added that adds basic printing supports to Mashups. Before you get too excited it should be noted that this functionality is more like print screen and it does not support pagination or output formatting. The new PrintControl supports printing of parts of the Mashup or the entire Mashup window. The output can be sent to a printer, a print preview window or to a file.

The PrintControl is not visible so it can be added almost anywhere in a Mashup XAML file. The PrintControl is part of the Common Controls in the Mashup Designer. The settings dialog allows you to choose which element to print from a ComboBox that contains all named elements in the XAML file. You can also manually edit the binding of the element to print in the XAML file. The actual printing is triggered by events sent to the PrintControl from other elements such as a button.

The PrintControl will only print what can be seen on the screen in the Mashup. The only exception is if the element you print is within a ScrollView controls. In this case it should print more than what is actually visible on screen. Another important thing is that the PrintControl will not resize the content so it might span multiple pages depending on the selected paper size. To fit large content on small pages a user would have to resize the window or use the zoom functionality to make it smaller (Ctrl + +/-).

The PrintControl was created for a very specific scenario so it might not fit your needs but you are welcome to try it out.

Print

When the PrintControl receives the Print event it will show the standard Windows print dialog where you can select printer, paper sizes etc. When the Print button is clicked in the dialog the element will be printed on using the selected printer.

Print preview

When the PrintControl receives the PrintPreview event it will also show the standard Windows print dialog but when you click the Print button a Print preview window will be displayed. Here you can decide to continue printing or cancel. When the Print button is pressed the Windows print dialog will be displayed again. This could be a bit confusing but the dialog is required for both the preview and the actual printing.

Print to file

When the PrintControl receives the PrintToFile it will show a file picker dialog where you can choose the name of the file. When a filename has been chosen the Windows print dialog will be displayed. When the Print button is clicked the element will be printed to a XPS file on disk. The file can be viewed in the Windows XPS Viewer. It is also possible to send the name of file using the Filename parameter. You should be very careful when using this since it will overwrite any existing file.

Print list example

The first example uses a M3 MIListPanel but the principle is the same for any element. The list has been given the name CustomerList. When the PrintControl is added it will be possible to select that element as seen in the screenshot below.

Below the list there are three buttons that will be used for triggering different events. The Mashup with the list and the buttons looks like this.

To connect a button to the PrintControl you open the settings for a button and create a new event. The Click event of the button should be connected to a event on the PrintControl such as PrintPreview.

When you run the Mashup and press a button such as Print Preview the Windows print dialog will be displayed. The dialog should look similar to this one depending on your operating system and other settings.

When you press the Print button in the dialog the Print Preview window should be displayed.

Here is the code for the first example. You can change the list that is printed to another type of control if you like, just be sure to change the name of the control in all places if you give your control another name.

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ui="clr-namespace:Mango.UI.Controls;assembly=Mango.UI" xmlns:mashup="clr-namespace:Mango.UI.Services.Mashup;assembly=Mango.UI" xmlns:m3="clr-namespace:MForms.Mashup;assembly=MForms">

   <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>

   <mashup:PrintControl Name="PrintControl" PrintElement="{Binding ElementName=CustomerList}" />

   <m3:MIListPanel Name="CustomerList" Margin="8">
      <m3:MIListPanel.Events>
         <mashup:Events>
            <mashup:Event SourceEventName="Startup" TargetEventName="List" />
         </mashup:Events>
      </m3:MIListPanel.Events>
      <m3:MIListPanel.DataSource>
         <m3:MIDataSource Program="CRS610MI" Transaction="LstByName" Type="List" OutputFields="CUNO,CUNM,PHNO,MAIL" />
      </m3:MIListPanel.DataSource>
      <ListView ItemsSource="{Binding Items}" Style="{DynamicResource styleListView}" ItemContainerStyle="{DynamicResource styleListViewItem}">
         <ListView.View>
            <GridView ColumnHeaderContainerStyle="{DynamicResource styleGridViewColumnHeader}">
               <GridView.Columns>
                  <GridViewColumn Header="Customer number" DisplayMemberBinding="{Binding [CUNO]}" />
                  <GridViewColumn Header="Customer name" DisplayMemberBinding="{Binding [CUNM]}" />
                  <GridViewColumn Header="Telephone number 1" DisplayMemberBinding="{Binding [PHNO]}" />
                  <GridViewColumn Header="E-mail address" DisplayMemberBinding="{Binding [MAIL]}" />
               </GridView.Columns>
            </GridView>
         </ListView.View>
      </ListView>
   </m3:MIListPanel>

   <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,16,8,8">

      <Button Content="Print Preview" Width="100">
         <Button.CommandParameter>
            <mashup:Events>
               <mashup:Event TargetName="PrintControl" SourceEventName="Click" TargetEventName="PrintPreview" />
            </mashup:Events>
         </Button.CommandParameter>
      </Button>

      <Button Content="Print" Margin="8,0,0,0" Width="100">
         <Button.CommandParameter>
            <mashup:Events>
               <mashup:Event TargetName="PrintControl" SourceEventName="Click" TargetEventName="Print" />
            </mashup:Events>
         </Button.CommandParameter>
      </Button>

      <Button Content="Print To File" Margin="8,0,0,0" Width="100">
         <Button.CommandParameter>
            <mashup:Events>
               <mashup:Event TargetName="PrintControl" SourceEventName="Click" TargetEventName="PrintToFile">
               </mashup:Event>
            </mashup:Events>
         </Button.CommandParameter>
      </Button>

   </StackPanel>

</Grid>

The following two examples show how to show a print preview of the current window and the entire Canvas. Depending on your screen resolution and the selected paper size the Canvas could span quite a lot of pages.

Print window

<Grid xmlns:windows="clr-namespace:System.Windows;assembly=System.Windows" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ui="clr-namespace:Mango.UI.Controls;assembly=Mango.UI" xmlns:mashup="clr-namespace:Mango.UI.Services.Mashup;assembly=Mango.UI">
   <Grid.Resources>
      <ObjectDataProvider x:Key="currentApplication" ObjectInstance="{x:Static Application.Current}" />
   </Grid.Resources>

   <mashup:PrintControl Name="PrintControlElement" PrintElement="{Binding Path=Host.HostContent.Parent}" />

   <Button Content="Print Preview Window" Width="200">
      <Button.CommandParameter>
         <mashup:Events>
            <mashup:Event TargetName="PrintControlElement" SourceEventName="Click" TargetEventName="PrintPreview" />
         </mashup:Events>
      </Button.CommandParameter>
   </Button>
</Grid>

Print Canvas

<Grid xmlns:windows="clr-namespace:System.Windows;assembly=System.Windows" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ui="clr-namespace:Mango.UI.Controls;assembly=Mango.UI" xmlns:mashup="clr-namespace:Mango.UI.Services.Mashup;assembly=Mango.UI">
   <Grid.Resources>
      <ObjectDataProvider x:Key="currentApplication" ObjectInstance="{x:Static Application.Current}" />
   </Grid.Resources>

   <mashup:PrintControl Name="PrintControlElement" PrintElement="{Binding Source={StaticResource currentApplication}, Path=MainWindow}" />

   <Button Content="Print Preview Canvas" Width="200">
      <Button.CommandParameter>
         <mashup:Events>
            <mashup:Event TargetName="PrintControlElement" SourceEventName="Click" TargetEventName="PrintPreview" />
         </mashup:Events>
      </Button.CommandParameter>
   </Button>
</Grid>