European Silverlight 4 & Silverlight 5 Hosting BLOG

BLOG about Silverlight 5 Hosting and Its Techologies - Dedicated to European Windows Hosting Customer

European Silverlight 5 Hosting - Amsterdam :: Telerik RadCoverFlow in SilverLight 5

clock December 20, 2013 06:18 by author Patrick

Today, in this article let's play around with another interesting concept of Telerik RadControls.

What is RadCoverFlow?
In simple terms "It enables to provide a rich GUI interface which navigates through a group of images.".

Step 1: The complete code of MainPage.xaml looks like this:

<UserControl x:Class="RadCoverApplication.MainPage"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:telerik="http://schemas.telerik.com/2008/xaml/presentation"mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">
        <telerik:RadCoverFlow Margin="126,12,108,61" Name="radCoverFlow1" OffsetX="0"OffsetY="40"CameraViewpoint="Top"DistanceBetweenItems="20"DistanceFromSelectedItem="5"
RotationY="56"IsReflectionEnabled="True"ItemScale="0.60">
            <Image Source="pics/e6e22af6f3224593a6c658b3d3f7a1fd.jpg"  Width="400" Height="120"></Image>
            <Image Source="pics/Microsoft-.NET-logo-white.png"  Width="400" Height="120"></Image>
            <Image Source="pics/microsoft-windows-8.jpg" Width="400" Height="120"></Image>
            <Image Source="pics/microsoft (1).jpg"  Width="400" Height="120"></Image>
            <Image Source="pics/Microsoft.jpg"  Width="400" Height="120"></Image>
        </telerik:RadCoverFlow>
    </Grid>
</UserControl>


Step 2: The complete code of MainPage.xaml.cs looks like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace RadCoverApplication
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Step 3: The output of the application looks like this:

Step 4: The output of the left moved pics application looks like this:

Step 5: The output of the right moved pics application looks like this:

Hope this article is useful!



European Silverlight 5 Hosting - Amsterdam :: Vector and Bitmap Printing for Reports in Silverlight 5

clock October 17, 2013 07:11 by author Scott

Printing Basics

Just as it was in Silverlight 4, Printing is centered around the PrintDocument class, found in System.Windows.Printing. This class has three primary events: BeginPrint, EndPrint, and PrintPage, which are your hooks into the printing system. You do setup in BeginPrint, teardown in EndPrint, and all the actual page production in PrintPage.

Page Markup

Here's the simple test page XAML I used for this printing example.

<Grid x:Name="LayoutRoot" Background="White">
    <Button Content="Print Bitmap"
            Height="23"
            HorizontalAlignment="Left"
            Margin="141,79,0,0"
            Name="PrintBitmap"
            VerticalAlignment="Top"
            Width="95"
            Click="PrintBitmap_Click" />
    <Button Content="Print Vector"
            Height="23"
            HorizontalAlignment="Left"
            Margin="141,108,0,0"
            Name="PrintVector"
            VerticalAlignment="Top"
            Width="95"
            Click="PrintVector_Click" />
    <Button Content="Force Vector"
            Height="23"
            HorizontalAlignment="Left"
            Margin="141,137,0,0"
            Name="PrintVectorForced
            VerticalAlignment="Top"
            Width="95"
            Click="PrintVectorForced_Click" />
</Grid>

The application UI looks really simple, just three buttons on a page. This is one of my finest designs.

Next, I'll wire up an event handler for each button, and use it to demonstrate the behavior of the three different printing approaches.

Page Code for Basic Vector Printing

Here's the code for a basic vector print of 30 rows.

// Tests basic (not forced) vector printing  
private void PrintVector_Click(object sender, RoutedEventArgs e)
{
    PrintDocument doc = new PrintDocument();

    doc.PrintPage += (s, ea) =>
        {
            StackPanel printPanel = new StackPanel();

            Random rnd = new Random();

            for (int i = 0; i < 30; i++)
            {                  
                TextBlock row = new TextBlock();
                row.Text = "This is row " + i + " of the current page being printed in vector mode.";                      

                printPanel.Children.Add(row);
            }

            ea.PageVisual = printPanel;
            ea.HasMorePages = false;
        };

    PrinterFallbackSettings settings = new PrinterFallbackSettings();

    doc.Print("Silverlight Vector Print");
}

Note that the PageVisual is assigned after the printPanel is populated. If you assign it prior, and do not force a recalculation of layout (in my example, the panel isn't in the visual tree, but layout is calculated with you assign PageVisual), you'll get a StackPanel with 30 items all piled on each other in the same row. The easiest way to fix this is to assign the PageVisual after the visual has all its children populated.

You could also point the PageVisual to an on-screen visual if you desire. If you're going to do that, you'll need to unhook the visual from the tree first, as a single element cannot have two parents.

If you have no more pages to print other than this one, set HasMorePages to false. If you have additional pages after this one, set it to true.

Printer Fallback Settings and Forcing Vector Printing Mode

New in Silverlight 5 is the PrinterFallbackSettings class. This class is used by one of the overloads of PrintDocument.Print to set two options: ForceVector and OpacityThreshold.

In the previous example, if you had any elements that had opacity other than 1.0, perspective transforms, or other things PostScript doesn't understand, Silverlight would silently fall back to bitmap-based printing.

ForceVector forces Silverlight to print in vector mode, assuming you have a PostScript-enabled printer driver, even when postscript-incompatible items exist in the element tree assigned to PageVisual. You use this in tandem with OpacityThreshold. The Opacity threshold sets the value over which Silverlight will treat an element's opacity as 1.0 to support PostScript printing.

// tests trying to force vector printing mode
private void PrintVectorForced_Click(object sender, RoutedEventArgs e)
{
    PrintDocument doc = new PrintDocument();

    doc.PrintPage += (s, ea) =>
    {
        StackPanel printPanel = new StackPanel();

        Random rnd = new Random();

        for (int i = 0; i < 30; i++)
        {
            TextBlock row = new TextBlock();
            row.Opacity = (rnd.Next(3, 10)) / 10.0;
            row.Text = "This is row " + i + " of the current page being printed. Opacity is " + row.Opacity;

            printPanel.Children.Add(row);
        }

        ea.PageVisual = printPanel;
        ea.HasMorePages = false;
    };

    PrinterFallbackSettings settings = new PrinterFallbackSettings();
    settings.ForceVector = true;
    settings.OpacityThreshold = 0.5;

    doc.Print("Silverlight Forced Vector Print", settings);
}

If your content or your printer doesn't support PostScript printing, Silverlight automatically falls back to sending an uncompressed bitmap to the printer. If your printer doesn't support PostScript, you'll see the effect of opacity in the printed results (some items lighter colored than others, for example) as the fallback bitmap mode supports opacity.

Printing in Bitmap Mode

Sometimes you know you want to print in bitmap mode. Rather than let vector mode fall back to bitmap, you can simply force bitmap printing from the start. If you have a PostScript compatible printer and driver, this is quite a bit faster than it was in Silverlight 4, as the bitmap is compressed. If you don't have a PostScript driver, it sends a plain old uncompressed bitmap just like Silverlight 4.

// tests printing in bitmap mode
private void PrintBitmap_Click(object sender, RoutedEventArgs e)
{
    PrintDocument doc = new PrintDocument();

    doc.PrintPage += (s, ea) =>
    {
        StackPanel printPanel = new StackPanel();

        Random rnd = new Random();

        for (int i = 0; i < 30; i++)
        {
            TextBlock row = new TextBlock();
            row.Opacity = (rnd.Next(3, 10)) / 10.0;
            row.Text = "This is row " + i + " of the current page being printed in bitmap mode. Opacity is " + row.Opacity;

            printPanel.Children.Add(row);
        }

        ea.PageVisual = printPanel;
        ea.HasMorePages = false;
    };

    doc.PrintBitmap("Silverlight Bitmap Print");
}

Bitmap mode will preserve the opacity settings, as well as ensure render transforms are printed (assuming you apply them) etc. It's not the best approach for printing a report, but it's the highest-fidelity approach for printing visuals when you want to do the equivalent of a print-screen.

The resolution of the bitmap sent is set to the selected printer resolution, typically 600dpi.

Efficient Printing

So, for the most efficient printing of multi-page reports, you'll want to make sure you do the following:

  • Have a PostScript-compatible printer with an appropriate PostScript driver (typically ends with " PS")
  • Avoid Opacity other than 1.0 in your elements to be printed (or use the appropriate fallback settings)
  • Leave out perspective transforms, 3d, and other things not compatible with PostScript printing.


European Silverlight 5 Hosting - Amsterdam :: ICustomTypeProvider in Silverlight 5

clock July 19, 2013 06:51 by author Scott

Why would I want to trick Silverlight into treating Dictionary values like real Properties?

There are scenarios when complex, data-intensive applications will need to data bind to keys/value pairs or generally determine the properties of a Class at runtime.  In cases where there could be large numbers of keys or the keys could change without an application re-deploy, this is a tricky problem to solve. 

In Silverlight 5, however, you can use ICustomTypeProvider to achieve the same goal in a clean fashion.

Data Facets

Some systems, such as Pivot Viewer, allow you to specify any number of pseudo-Properties about interesting items, which we’ll call Facets.  Using a structure like a Dictionary, we could specify any number of Facets.  Two-way data binding to these is problematic however since they aren’t real CLR properties.  In the full .NET Framework you can do tricks with ICustomTypeDescriptor, and now in Silverlight 5 we have System.Reflection.ICustomTypeProvider.
Let’s create a simple Facet class to represent data about the Facet we’d like to data bind to.

/// <summary>
/// Some facet of a dynamic type
/// </summary>
public class Facet
{
    /// <summary>
    /// Must be a valid CLR property name
    /// </summary>
    public string PropertyName { get; set; }

    public Type PropertyType { get; set; }

    //Couple of demo Facets

    public static Facet DynamicDemo0 = new Facet
    {
        PropertyName = "DynamicPropZero",
        PropertyType = typeof(string)
    };

    public static Facet DynamicDemo1 = new Facet
    {
        PropertyName = "DynamicPropOne",
        PropertyType = typeof(double)
    };
}

Next we’ll create an object with a regular CLR property and a dictionary to store key/value pairs.  These key value pairs will be made binding-friendly.

/// <summary>
/// An Class with normal properties, but also supporting dynamic properties
/// </summary>
public class FacetedObject : ICustomTypeProvider, INotifyPropertyChanged,
INotifyDataErrorInfo
{
    Dictionary<string, object> _facetValues;

    public object this[string key]
    {
        get
        {
            if (!_facetValues.ContainsKey(key))
            {
                return null;
            }
            return _facetValues[key];
        }
        set
        {
            _facetValues[key] = value;
            OnPropertyChanged(key);
        }
    }

The interesting thing here is the ICustomTypeProvider interface implementation. 

ICustomTypeProvider Implementation

On any CLR object you can call GetType().  If you’ve ever done any reflection programming you’re aware of all the rich runtime metadata about your classes that System.Type can provide.  System.Type is also an abstract class, and ICustomTypeProvider requires only a single method implementation:

public Type GetCustomType()
{
    return new FacetedObjectType<FacetedObject>(_currentFacets);
}

So, we can create a class that extends System.Type and do some interesting things.  We can trick the Silverlight runtime into thinking our Facets are real CLR Properties.  While my FacetObjectType<TSource> implementation is about 300 lines long, here’s the most interesting part:

/// <summary>
/// A custom System.Type implementation that can provide different Properties at runtime.
 All operations except those related to
/// Property logic delegated to the type of TSource
/// </summary>
/// <typeparam name="TSource"></typeparam>
public class FacetedObjectType<TSource> : System.Type
{
//snip…


    public override System.Reflection.PropertyInfo[] GetProperties(BindingFlags bindingAttr)
    {
        var properties = ProxyTargetType.GetProperties(bindingAttr);

        if (
           BindingFlags.Instance == (bindingAttr & BindingFlags.Instance)
        && BindingFlags.Public == (bindingAttr & BindingFlags.Public)
        )
        {
            var dynamicProperties = GetPublicDynamicProperties();
            var allprops = new List<PropertyInfo>();
            allprops.AddRange(properties);
            allprops.AddRange(dynamicProperties);
            return allprops.ToArray();
        }
        return properties;
    }
//snip…

So, for system types that implement ICustomTypeProvider, we can intercept important requests for reflection information and supplement that information.  In our case here, we can claim that properties exist that aren’t really on our class at compile time.  In terms of telling the runtime how to actually Get and Set these dynamic properties, we need to create a class that extends PropertyInfo.  Here’s a type called DynamicPropertyInfo, and the two most interesting methods:

public class DynamicPropertyInfo : PropertyInfo
{
    public DynamicPropertyInfo(Type propertyType, Type declaringType, string propertyName)
    {
        _propertyType = propertyType;
        _declaringType = declaringType;
        _name = propertyName;
    }

    public override object GetValue(object obj, BindingFlags invokeAttr, Binder binder,
        object[] index, System.Globalization.CultureInfo culture
    {
        var fo = obj as FacetedObject;
        return fo[Name];
    }

    public override void SetValue(object obj, object value, BindingFlags invokeAttr, Binder binder,
        object[] index, System.Globalization.CultureInfo culture)
    {
        var fo = obj as FacetedObject;
        fo[Name] = value;
    }

In here, we can just use the this[] indexer of our FacetedObject class to get and set values.

Demo App

To show how this concept works, let’s create a Silverlight 5 application with a DataGrid.  We’re going to get the datagrid to display “properties” that technically speaking are not there.  First we’ll create a couple of Facets assigned to FacetedObject by default called “DynamicPropZero” and “DynamicPropOne”.  For these two we can create DataGridColumns along with an actual compile-time Property of FacetedObject.

            <sdk:DataGrid.Columns>
                <
sdk:DataGridTextColumn Header="Id" IsReadOnly="True" Binding="{Binding Id}" />
                <
sdk:DataGridTemplateColumn Header="Dynamic Property 0">
                    <
sdk:DataGridTemplateColumn.CellTemplate>
                        <
DataTemplate>
                            <
TextBox Text="{Binding DynamicPropZero, Mode=TwoWay,
                               
NotifyOnValidationError=True,
                               
ValidatesOnNotifyDataErrors=True,                              ValidatesOnDataErrors=True,ValidatesOnExceptions=True}"/>
                        </
DataTemplate>
                    </
sdk:DataGridTemplateColumn.CellTemplate>
                </
sdk:DataGridTemplateColumn>
                <
sdk:DataGridTextColumn Header="Dynamic Property 1"
                                       
Binding="{Binding DynamicPropOne, Mode=TwoWay}" />
            </
sdk:DataGrid.Columns>

Here’s the code we’re using to create the sample data in our main ViewModel.  Note that we're going to explose the dictionary values as properties.

public class ShellViewModel : INotifyPropertyChanged
{
    public ShellViewModel()
    {
        Items = new ObservableCollection<FacetedObject>();
        var d0 = new FacetedObject();
        d0[Facet.DynamicDemo0.PropertyName] = "I'm a property!";
        d0[Facet.DynamicDemo1.PropertyName] = 42.42;

        var d1 = new FacetedObject();
        d1[Facet.DynamicDemo0.PropertyName] = "Would you like to be a property too?";
        Items.Add(d0);
        Items.Add(d1);

And as you can see, it works:

Notice the buttons above the DataGrid.  These dynamic properties wouldn’t be very useful unless they are first-class citizens, and they are.  Note that FacetedObject also implements INotifyPropertyChanged and INotifyDataErrorInfo.  By clicking the buttons we fire commands that affect changes in code, and the UI reflects the changes for the dynamic properties.

Now, recall at the beginning that I said this could be completely dynamic and that we could actually create both the Facet data and visuals in a data driven fashion at runtime.  Clicking on the Add Facet button demonstrates this.

After clicking OK, we can do some work to add this Fact to the items on the ViewModel, and also dynamically create a new DataGridColumn to display the data.

public void AddNewFacet(string name, object defaultValue, string clrType)
{
    var typeDict = new Dictionary<string, Type>();
    typeDict["string"] = typeof(string);
    typeDict["int"] = typeof(int);
    typeDict["double"] = typeof(double);

    //1. Create a new Facet
    var newFacet = new Facet
    {
        PropertyName = name,
        PropertyType = typeDict[clrType]
    };

    //2. Tell objects to clear out cached state
    //3. Assign a default value we can see in the UI
    var vm = DataContext as ShellViewModel;   

    foreach (var item in vm.Items)
    {
        item.AddFacet(newFacet);
        item[newFacet.PropertyName] = defaultValue;
    }

    //4. create visuals to bind to new facet
    var sb = new StringBuilder("<DataTemplate
xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" >")
    .Append("<TextBox Text=\"{Binding  ")
    .Append(name)
    .Append(", Mode=TwoWay}\" />")
    .Append("</DataTemplate>");

    var dt = (DataTemplate)XamlReader.Load(sb.ToString());
    var column = new DataGridTemplateColumn();
    column.Header = name;
    column.CellTemplate = dt;
    FacetGrid.Columns.Add(column);
}

Our new DynamicProperty is now shown in the DataGrid and we can edit it with two-way binding support:

For some, this last piece of code will look like the worst kind of voodoo, but there are cases where your requirements will dictate this level of flexibility and this combination of techniques will help you get there.



European Silverlight 5 Hosting - Amsterdam :: Animation in Silverlight 5 Using VisualStateManager.LoadTransition

clock July 5, 2013 06:24 by author Scott