silverlight-2.0
I need to export a SL DataGrid to HTML so my users can then print it. Can someone put me in the right direction?
Upate: After reading Rob's answer I am changing my question. Instead of Silverlight Grid to HTML, I now just want to export it to PDF. Has anyone used any 3rd party PDF generators with Silverlight?
The short answer is to use styles. The long answer is the following:
There are two style properties in the Silverlight 2.0 datagrid that should solve your problem. The first is CellStyle and the second is RowStyle. The CellStyle property is the one which will remove the light blue highlight around the currently selected cell. The RowStyle property is the one where you will be able to remove the light blue shade indicating the selected row. The CellStyle that I used is as follows:
<Style x:Key="CellStyle" TargetType="local:DataGridCell">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Cursor" Value="Arrow" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:DataGridCell">
<Grid Name="Root" Background="Transparent">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CurrentStates" >
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0" />
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Regular" />
<vsm:VisualState x:Name="Current" />
<!--<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
</Storyboard>
</vsm:VisualState>-->
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Rectangle Name="FocusVisual" Stroke="#FF6DBDD1" StrokeThickness="1" Fill="#66FFFFFF" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsHitTestVisible="false" Opacity="0" />
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />
<Rectangle Name="RightGridLine" Grid.Column="1" VerticalAlignment="Stretch" Width="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If you will notice, I commented out the storyboard that changed the FocusVisual rectangle's opacity value. What this was doing was to set the FocusVisual rectangle to be shown on cell selection. (Please Note: You cannot remove the FocusVisual Element as the CellPresenter is expecting this element, and not finding the element will cause an error.)
The RowStyle I used is as follows:
<Style TargetType="local:DataGridRow" x:Key="MyCustomRow">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:DataGridRow">
<localprimitives:DataGridFrozenGrid x:Name="Root">
<localprimitives:DataGridFrozenGrid.Resources>
<Storyboard x:Key="DetailsVisibleTransition" >
<DoubleAnimation Storyboard.TargetName="DetailsPresenter" Storyboard.TargetProperty="ContentHeight" Duration="00:00:0.1" />
</Storyboard>
</localprimitives:DataGridFrozenGrid.Resources>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates" >
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="Normal AlternatingRow">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="0" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver" />
<!--<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" />
</Storyboard>
</vsm:VisualState>-->
<vsm:VisualState x:Name="Normal Selected"/>
<!--<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
</Storyboard>
</vsm:VisualState>-->
<vsm:VisualState x:Name="MouseOver Selected"/>
<!--<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
</Storyboard>
</vsm:VisualState>-->
<vsm:VisualState x:Name="Unfocused Selected"/>
<!--<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#FFE1E7EC" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>-->
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<localprimitives:DataGridFrozenGrid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</localprimitives:DataGridFrozenGrid.RowDefinitions>
<localprimitives:DataGridFrozenGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</localprimitives:DataGridFrozenGrid.ColumnDefinitions>
<Rectangle x:Name="BackgroundRectangle" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="#FFBADDE9" />
<localprimitives:DataGridRowHeader Grid.RowSpan="3" x:Name="RowHeader" localprimitives:DataGridFrozenGrid.IsFrozen="True" />
<localprimitives:DataGridCellsPresenter x:Name="CellsPresenter" localprimitives:DataGridFrozenGrid.IsFrozen="True"/>
<localprimitives:DataGridDetailsPresenter Grid.Row="1" Grid.Column="1" x:Name="DetailsPresenter" />
<Rectangle Grid.Row="2" Grid.Column="1" x:Name="BottomGridLine" HorizontalAlignment="Stretch" Height="1" />
</localprimitives:DataGridFrozenGrid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see, I commented out some more visual states. You will want to comment out the MouseOver VisualState storyboard, the Normal Selected storyboard, the MouseOver Selected storyboard, and the Unfocused Selected storyboard.
(Please Note: I did not remove these visual states, I only commented out what they used to do.)
This is my code in its entirety for reference: (XAML first, then VB)
XAML:
<UserControl x:Class="DataGrid_Mouseover.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:local="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows"
xmlns:localprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
<UserControl.Resources>
<Style x:Key="CellStyle" TargetType="local:DataGridCell">
<!-- TODO: Remove this workaround to force MouseLeftButtonDown event to be raised when root element is clicked. -->
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Cursor" Value="Arrow" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:DataGridCell">
<Grid Name="Root" Background="Transparent">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CurrentStates" >
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0" />
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Regular" />
<vsm:VisualState x:Name="Current" />
<!--<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
</Storyboard>
</vsm:VisualState>-->
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- TODO Refactor this if SL ever gets a FocusVisualStyle on FrameworkElement -->
<Rectangle Name="FocusVisual" Stroke="#FF6DBDD1" StrokeThickness="1" Fill="#66FFFFFF" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsHitTestVisible="false" Opacity="0" />
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />
<Rectangle Name="RightGridLine" Grid.Column="1" VerticalAlignment="Stretch" Width="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="local:DataGridRow" x:Key="MyCustomRow">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:DataGridRow">
<localprimitives:DataGridFrozenGrid x:Name="Root">
<localprimitives:DataGridFrozenGrid.Resources>
<Storyboard x:Key="DetailsVisibleTransition" >
<DoubleAnimation Storyboard.TargetName="DetailsPresenter" Storyboard.TargetProperty="ContentHeight" Duration="00:00:0.1" />
</Storyboard>
</localprimitives:DataGridFrozenGrid.Resources>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates" >
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="Normal AlternatingRow">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="0" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver" />
<!--<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" />
</Storyboard>
</vsm:VisualState>-->
<vsm:VisualState x:Name="Normal Selected"/>
<!--<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
</Storyboard>
</vsm:VisualState>-->
<vsm:VisualState x:Name="MouseOver Selected"/>
<!--<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
</Storyboard>
</vsm:VisualState>-->
<vsm:VisualState x:Name="Unfocused Selected"/>
<!--<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#FFE1E7EC" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>-->
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<localprimitives:DataGridFrozenGrid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</localprimitives:DataGridFrozenGrid.RowDefinitions>
<localprimitives:DataGridFrozenGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</localprimitives:DataGridFrozenGrid.ColumnDefinitions>
<Rectangle x:Name="BackgroundRectangle" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="#FFBADDE9" />
<localprimitives:DataGridRowHeader Grid.RowSpan="3" x:Name="RowHeader" localprimitives:DataGridFrozenGrid.IsFrozen="True" />
<localprimitives:DataGridCellsPresenter x:Name="CellsPresenter" localprimitives:DataGridFrozenGrid.IsFrozen="True"/>
<localprimitives:DataGridDetailsPresenter Grid.Row="1" Grid.Column="1" x:Name="DetailsPresenter" />
<Rectangle Grid.Row="2" Grid.Column="1" x:Name="BottomGridLine" HorizontalAlignment="Stretch" Height="1" />
</localprimitives:DataGridFrozenGrid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<local:DataGrid x:Name="TestGrid"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
AutoGenerateColumns="False"
HeadersVisibility="None"
RowHeight="55"
Background="Transparent"
AlternatingRowBackground="Transparent"
RowBackground="Transparent"
BorderBrush="Transparent"
Foreground="Transparent"
GridLinesVisibility="None"
SelectionMode="Single"
CellStyle="{StaticResource CellStyle}"
RowStyle="{StaticResource MyCustomRow}">
<local:DataGrid.Columns>
<local:DataGridTemplateColumn Header="Clinic">
<local:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button x:Name="btnClinic"
Height="46"
Width="580"
Content="{Binding Path=Description}"
Click="btnClinic_Click"
FontSize="24"
FontFamily="Tahoma"
FontWeight="Bold">
<Button.Background>
<LinearGradientBrush EndPoint="0.528,1.144" StartPoint="1.066,1.221">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FFEDC88F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
</DataTemplate>
</local:DataGridTemplateColumn.CellTemplate>
</local:DataGridTemplateColumn>
</local:DataGrid.Columns>
</local:DataGrid>
</Grid>
</UserControl>
VB:
Partial Public Class Page
Inherits UserControl
Public Sub New()
InitializeComponent()
Dim test As IList(Of String) = New List(Of String)
test.Add("test1")
test.Add("test1")
test.Add("test1")
test.Add("test1")
test.Add("test1")
test.Add("test1")
test.Add("test1")
test.Add("test1")
test.Add("test1")
test.Add("test1")
TestGrid.ItemsSource = test
End Sub
Private Sub btnClinic_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
End Sub
End Class
Hope this helps.
Thanks, Scott
From the servers perspective it is only serving up a file with a XAP extension. So the Silverlight application itself isn't a problem.
Where do you do need to take care is on the web page hosting the Silverlight application. This can be a simple HTML page using an object tag or JavaScript you are fine. However you can also use the ASP.NET asp:Silverlight server side control and in that case you will need to make sure the System.Web.Silverlight.dll is deployed with your application and this does have a 3.5 dependency by using System.Web.Extensions.
So if you want to be independent of the server environment you best is to avoid the asp:Silverlight control.
Another thing that might be needed on the server is setting up the XAP MIME type to application/x-silverlight-app.
Best Answer
HTML is a bad choice for printing for several reasons which are well documented on this site so I won't get into them.
I would suggest that you export to PDF rather than attempt to go with the HTML route. For Exporting to PDF there are a number of good .Net tools available. Other options include exporting your grid to a spreadsheet program like Excel, Spreadsheet Gear, or OpenOffice Calc which will offer additional functionality.