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 :: Working with the Slider Control in Silverlight 5

clock December 12, 2013 09:32 by author Patrick

The Slider control in Silverlight 5 is used to allow a user to select from a range of values by sliding it along a track. You can create a horizontal or vertical slider. You can specify the range of values and the precision of movement too.
The Slider class that represents this control is defined in the System.Windows.Controls namespace. Some of the commonly used properties of this class are:

To demonstrate the use of the Slider control, let us create a TextBox with some text which is enlarged or shrunk depending upon the slider value. Create a Silverlight 5 application and replace the Grid tag with the Canvas tag. Drag and drop the Slider from the Toolbox into your XAML code (between the Canvas tags). Also drag and drop an TextBox control. The sole reason for using a TextBox here instead of TextBlock is that a TextBlock does not support the Background property and we wish to specify a background here for the control containing the text.

Configure the properties of the controls as shown below:

<UserControl x:Class="Imager.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"
      mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
     <Canvas x:Name="LayoutRoot" Width="640" Height="480">
         <TextBox Name="txtMsg" Canvas.Left="40" Canvas.Top="30" Height="22" Width="132" Text="Silverlight Rocks!" Background="Aqua" IsReadOnly="True"  />
         <Slider Name="slider"  Background="Transparent" Height="25" Width="150" Maximum="150" Minimum="0" SmallChange="5" ValueChanged="Slider_ValueChanged" IsDirectionReversed="False" ></Slider>

     </Canvas>
</UserControl>

The code accomplishes the following:

  • Creates a canvas of height 480 and width 640
  • Creates a TextBox with the text "Silverlight Rocks!" and positions it on the canvas at 40,30 location.
  • Creates a Slider control with transparent background, maximum 150 and minimum 0, small change (precision of movement) as 5 and height and width as 25 and 150 respectively.
  • Creates an event handler for Value Changed event of Slider.

Now open the MainPage.xaml.cs and add the following code:
public partial class MainPage : UserControl

    {
        double start, end, height, width, size;
        public MainPage()
        {
             InitializeComponent();
             //original values of the slider

            start = slider.Minimum;
            end = slider.Maximum;

            //original height and width of the text box

            height = txtMsg.Height;
            width = txtMsg.Width;
            size = txtMsg.FontSize; 
        }
        private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            // If slider has reached the beginning

            if (e.NewValue == start)
            {
                txtMsg.Height = height;
                txtMsg.Width = width;
                txtMsg.FontSize = size;
            }

            //if slider has moved forward

            if (e.NewValue > e.OldValue)
            {
                txtMsg.Height = height + e.NewValue;
                txtMsg.Width = width + e.NewValue;
                txtMsg.FontSize += 1;
            }
            else //if slider has moved backward
            {
                txtMsg.Height = txtMsg.Height - (e.OldValue-e.NewValue);
                txtMsg.Width = txtMsg.Width - (e.OldValue - e.NewValue);
                txtMsg.FontSize -= 1;
            }
        }
    }

The logic in this code is self explanatory from the comments. When you build and execute your solution and move the slider, you will see the text increasing or decreasing in size. Though this was a simple demonstration, in actual scenarios, you can customize the Slider control through its various properties. You can also enhance its design characteristics in Expression Blend 4 if required.



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.


About HostForLIFE.eu

HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.

We have offered the latest Windows 2012 HostingASP.NET 4.5 HostingASP.NET MVC 5 Hosting, and SQL 2014 Hosting.

Tag cloud

Sign in