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 :: XAML Changes in Silverlight 5

clock December 17, 2013 11:28 by author Patrick

Silverlight 5 has the following improvements in the XAML stack:

  • Implicit Data Templates
  • Ancestor RelativeSource
  • Binding in Styles
  • Markup Extensions
  • XAML Debugging

Let's see them in action one by one.

Implicit Data Templates

Silverlight 5 has received one of many great features of data templates in WPF, Implicit Data Templates. Instead of explicitly attaching the data template to every control, you can set a data type (through the DataType property) that the data template will apply to and then the data template will be applied automatically to any control that's trying to display that data type.

Keep in mind that an implicit data template applies only to controls that:

  • Are trying to display the data type specified
  • Have a templatable content (e.g. collection controls)
  • Defined in the scope of the template

So the implicit data template won't apply to any control that doesn't meet those requirements.

Implementation:
Let's see implicit data templates in action. In the following scenario we have a list box that uses a data template to display some books and it gets populated through the code:

<ListBox x:Name="books">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Title}" FontWeight="Bold" />
<TextBlock Text="{Binding Author}" />
<TextBlock Text="{Binding Price, StringFormat='C'}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>


We could refactor this code by making the data template implicit, and this can be done by moving the data template from the list box to application resources (for instance) and specifying the data type, and then the data template will be applied automatically to each templatable-content control trying to display the data type specified:

<Application.Resources>
<DataTemplate DataType="loc:Book">
<StackPanel>
<TextBlock Text="{Binding Title}" FontWeight="Bold" />
<TextBlock Text="{Binding Author}" />
<TextBlock Text="{Binding Price, StringFormat='C'}" />
</StackPanel>
</DataTemplate>
</Application.Resources>
<ListBox x:Name="books" />

Clear and simple, right?

Now let's do something more interesting to see the real power of implicit data templates. Instead of having a simple data template, we'll have two templates for the two types of books, once for the paper books, and the other for the audio books:


<DataTemplate DataType="loc:PaperBook">
<StackPanel>
<TextBlock Text="{Binding Title}" FontWeight="Bold" />
<TextBlock Text="{Binding Author}" />
<TextBlock Text="{Binding Price, StringFormat='C'}" />
<TextBlock Text="{Binding Isbn}" />
<TextBlock Text="{Binding Pages}" />
</StackPanel>
</DataTemplate>

<DataTemplate DataType="loc:AudioBook">
<StackPanel>
<TextBlock Text="{Binding Title}" FontWeight="Bold" />
<TextBlock Text="{Binding Author}" />
<TextBlock Text="{Binding Price, StringFormat='C'}" />
<TextBlock Text="{Binding Duration}" />
</StackPanel>
</DataTemplate>

As you see, each data template will be applied to a templatable-content control that tries to display the data type it specifies. In addition, both the data templates would be applied to a collection control that tries to display a collection of both PaperBook and AudioBook.

Ancestor RelativeSource
This is another feature of XAML that Silverlight 5 has gotten from WPF. It allows you to bind to a property in a parent control. This is especially useful in the situation where you are in a data template and wish to bind to a property in a control outside the template higher in the render tree.

Implementation:

  • You use {Binding.RelativeSource} to specify the source in the tree.
  • Use the AncestorType property to specify the type of the parent control that you wish to bind to.
  • Use AncestorLevel to specify how far is the parent control of the type specified from the current control.

The following TextBlock controls all bind to the same Tag property found in the root StackPanel:
<StackPanel Tag="Hello, World">
<TextBlock Text="{Binding Tag,
RelativeSource={RelativeSource AncestorType=StackPanel}}" />
<TextBlock Text="{Binding Tag,
RelativeSource={RelativeSource AncestorType=StackPanel, AncestorLevel=1}}" />
<StackPanel>
<TextBlock Text="{Binding Tag,
RelativeSource={RelativeSource AncestorType=StackPanel, AncestorLevel=2}}" />
<Grid>
<TextBlock Text="{Binding Tag,
RelativeSource={RelativeSource AncestorType=StackPanel, AncestorLevel=2}}" />
</Grid>
</StackPanel>
</StackPanel>

And here's a more complex example. In the following example we change the color of a control inside an item template based on whether the item is selected or not. For this to work we bind to the IsSelected property of the ListBoxItem control (that represents an item on the list box) and we use a type converter to return a color based on a Boolean value:


<ListBox x:Name="books">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Title}" FontWeight="Bold"
Foreground="{Binding IsSelected, Converter={StaticResource conv},
RelativeSource={RelativeSource AncestorType=ListBoxItem}}" />
<TextBlock Text="{Binding Author}" />
<TextBlock Text="{Binding Price, StringFormat='C'}" />
</StackPanel>
</DataTemplate>
</ListBox>

Style Binding
This is another feature of XAML that Silverlight 5 has gotten from WPF. It allows you to bind directly in style setters, and that would allow changing styles automatically at runtime by changing source objects.

Implementation:
In the following scenario, we have a class that contains brushes used in the application:

public class MyBrushes
{
    public SolidColorBrush MainBrush { get; set; }
    public MyBrushes()
    {
        MainBrush = new SolidColorBrush(Colors.Red);
    }
}


And we have a style that binds to that class and gets the main brush from there (as you can see, all binding features are available now in style setters):

<loc:MyBrushes x:Key="brushes" />
<Style TargetType="TextBlock">
<Style.Setters>
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground"
Value="{Binding MainBrush, Source={StaticResource brushes}}" />
</Style.Setters>
</Style>


Finally, we can change the style automatically at runtime by changing the source brush using code like this:

MyBrushes brshes = Application.Current.Resources["brushes"] as MyBrushes;
brshes.MainBrush.Color = Colors.Red;

Markup Extensions
Markup extensions allow you to execute code at XAML parsing time, they are like {Binding}, {StaticResource}, {RelativeSource}, etc. The new feature of XAML in Silverlight 5 is the ability to create custom markup extensions. They provide more concise syntax, and they are easier and simpler than attached properties.

Implementation:
An example of a very simple markup extension is an extension that sums two numbers and returns the result to the control (the following TextBlock would have the text '3' at runtime):

<TextBlock Text="{my:SumExtension FirstNumber=1, SecondNumber=2}" />

So how to create such an extension? You can create markup extensions by implementing the generic IMarkupExtenstion interface (in System.Xaml namespace) that accepts a type parameter that specifies the return type from the extension (that must be a reference type). After that, you provide extension parameters as properties, and you implement ProvideValue() to do the work and return the results to the XAML.

The following code defines our summation extension:

public class SumExtension : IMarkupExtension<object>
{
    public int FirstNumber { get; set; }
    public int SecondNumber { get; set; }
    public object ProvideValue(IServiceProvider serviceProvider)
    {
        return (FirstNumber + SecondNumber).ToString();
    }
}

And here's a more complex example. In the books scenario, we have defined a markup extension that returns a collection of books based on the book type (paper/audio):

public class BookLocatorExtension : IMarkupExtension<object>
{
    public BookType Type { get; set; }
    public object ProvideValue(IServiceProvider serviceProvider)
    {
        if (Type == BookType.Paper)
            return BookData.PaperBooks;
        else
            return BookData.AudioBooks;
    }
}
public enum BookType { Paper, Audio }

And here's how we can use the extension:


<ListBox ItemsSource="{loc:BookLocator Type=Paper}" />
<ComboBox ItemsSource="{loc:BookLocator Type=Audio}" />


XAML Debugging
The last new XAML feature introduced in Silverlight 5 is the ability to debug data bindings. It is very useful when watching for binding errors and it works by placing a breakpoint inside the binding in XAML and watching the Locals window and other Visual Studio windows for binding details.

Keep in mind that XAML debugging works only in Internet Explorer 9.

Implementation:

In our books scenario, we have the following data form:
<UserControl.Resources>
<loc:BookData x:Key="data" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListBox x:Name="booksList"
DataContext="{StaticResource data}"
ItemsSource="{Binding}" />
<StackPanel Grid.Column="1"
DataContext="{Binding SelectedItem, ElementName=booksList}">
<TextBlock>Title</TextBlock>
<TextBox Text="{Binding Title, Mode=TwoWay}" />
<TextBlock>Author</TextBlock>
<TextBox Text="{Binding Author, Mode=TwoWay}" />
<TextBlock>Price</TextBlock>
<TextBox Text="{Binding Price, StringFormat='C', Mode=TwoWay}" />
</StackPanel>
</Grid>

Now, put a breakpoint inside the binding in the list box and run the application to see what happens.

When you run the application, Visual Studio stops on the breakpoint while it loads the list box with data. Looking at the Locals window we can see binding details:

 

As you can see, Visual Studio stops on both Push and Pull operations. The Pull operation happens when the text box is loaded with the data, and the Push operation happens when the value in the text box changes and gets updated to the source. Now try writing some invalid data in the price text box (e.g. some letters) and watch the Locals Window:

 

Now you watch out any error that might happen in binding. The last thing to mention is that conditions and filters can be used in the breakpoints. As an example, you can use the following condition to tell Visual Studio to stop only on binding errors and not in every operation:

((System.Windows.Data.Debugging.BindingDebugState)BindingState).Error != null

 



HostForLIFE.eu Proudly Launches Scalable Enterprise Email Hosting

clock December 17, 2013 09:31 by author Patrick

HostForLIFE.eu, a leading Windows web hosting provider with innovative technology solutions and a dedicated professional services team proudly announces Enterprise Email Hosting for all costumer. HostForLIFE.eu aim to help you grow your bottom line whether it is driving direct sales from emails, driving website traffic or delivering outstanding service.

Enterprise Email is a great tool for communicating to existing customers, or individuals who know your organization well enough and have interest in opting-in to receive your e-mail. Your promotions, sales and offers get their attention, meet a need, and encourage them to do more business with you.  What e-mail marketing typically doesn’t do very effectively is attract the attention of new customers.

Robert Junior and Sophia Levine from HostForLIFE.eu say:
"Once a business has secured a domain name, we setup an email hosting account for them and they can choose any email account they wish.  Most popular email accounts for small business are sales, info and accounts, although it can be virtually anything once you own your own domain name." Robert says.

"I would expect that once more small business owners had the flexibility to mange their own email hosting, they would save money on their monthly internet costs because there are always cheaper deals being promoted. Of course email hosting does not replace your internet service, but it enables you to switch to a cheaper plan and not loose contact with your customers."  Sophia says.

"Our clients have found that they are able to save money on their internet services because once they no longer rely to manage their email, they can shop around for a better deal, save some money and take their Email Hosting with them.  Having your own domain name and email hosting also improves your business image far more that an ISP account or hotmail email address." Robert says.

"What many small business owners often struggle with is continuing to pay high internet service costs to keep their allocated ISP email address if they use their ISP email for their business.  What people do not realise is that if they were to purchase their own .com or etc domain name they have a unique email address like '[email protected]'.  It means they can move to a cheaper ISP if they find a better deal and not risk losing contact with their business contacts." Sophia Says.

HostForLIFE.eu provides a full suite of self-service marketing solutions with the following features: Total Bulk Email up to 10.000 emails/month with total maibox is 5, users receive 2 GB mailbox quota, a platform fully support Blackberry, SPF/DKIM/TXT, WebMail Access, and POP/SMTP/IMAP.

Are you sending direct mails to your customers just once a month or every three days? Simply choose the plan that suits you the most. All price plans are based on actual use of the system - from 10,000 e-mails sent out in a month starting at €8.00!

Further information and the full range of features Enterprise Email Hosting can be viewed here http://www.hostforlife.eu.




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 HostForLIFE.eu Proudly Launches Entity Framework 6 with FREE Trial Hosting

clock December 11, 2013 06:47 by author Patrick

HostForLIFE.eu offers a variety of cheap and affordable European Windows ASP.NET Shared Hosting Plans to fit any need. No matter whether you’re starting a Blog with WordPress, installing a CMS solution with Drupal, opening a Forum with PHPBB, starting an Online Store with nopCommerce, or any number ventures beyond those mentioned above, our Windows ASP.NET Web Hosting plans are exactly what you’ve been looking for. HostForLIFE.eu is Microsoft No #1 Recommended ASP.NET Host Provider.
Entity Framework 6 (EF6) is an object-relational mapper that enables .NET developers to work with relational data using domain-specific objects. It eliminates the need for most of the data-access code that developers usually need to write.

 

 

Entity Framework is now available and there are top features to consider in this minor release:

Features that come for free. These are capabilities that are part of the core. You don’t even have to know they’re there to benefit from them, much less learn any new coding.

Level-setting features. A major enhancement is that Code First now supports mapping to Stored Procedures, something that has been supported by models created in the designer.

Another change is more interesting. With EF6, the EF APIs have been extracted from the .NET Framework; they’re now completely encapsulated in the NuGet package.

EF Designer in this category. It has been moved out of Visual Studio as of the 2013 edition, and instead provided as an extension to Visual Studio.

Ninja features. Support for asynchronous queries and saves, the return of custom Code First conventions, more extensibility using the new DbConfiguration type, support for mocking in unit tests, configurable retries on spotty connections, and even more.

For complete information about this new product, please visit our site at http://www.hostforlife.eu



European Silverlight 4.0 Hosting - Amsterdam :: How To Control Playback of Media Using a MediaElement of Silverlight?

clock December 10, 2013 06:02 by author Patrick

We can integrate media into our Silverlight pages and WPF UserControls. The MediaElement object provides several media-specific properties. The following list describes the commonly used properties.

  •     AutoPlay: Specifies whether the MediaElement should begin playing automatically. The default value is True.
  •     IsMuted: Specifies whether the MediaElement is silenced. A value of True mutes the MediaElement. The default value is False.
  •     Stretch: Specifies how video is stretched to fill the MediaElement object. Possible values are None, Uniform, UniformToFill, and Fill. The default is Fill.
  •     Volume: Specifies the volume of the MediaElement object’s audio as a value from 0 to 1, with 1 being the loudest. The default value is 0.5.


In addition to its media-specific properties, MediaElement also has all the properties of a UIElement, such as Opacity and Clip.

 


Controlling Media Playback

You can control media playback by using the Play, Pause, and Stop methods of a MediaElement object.

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="CanvasLoaded">
    <MediaElement x:Name="MyMedia" Stretch="Uniform"
        Source="/images/Silverlight_Small.wmv" Height="200" Width="200" />
  <Canvas x:Name="ButtonPanel">
      <Canvas Background="Red" Canvas.Left="10" Canvas.Top="185" Height="25" Width="50"
        MouseLeftButtonDown="StopMedia" Cursor="Hand">
        <Rectangle Height="30" Width="40" Canvas.Left="10" />
        <TextBlock Text="Stop" Canvas.Left="10" Foreground="Yellow" />
       </Canvas>
       
       <Canvas Background="Green" Canvas.Left="70" Canvas.Top="185" Height="25" Width="50"
        MouseLeftButtonDown="PlayMedia" Cursor="Hand">
        <Rectangle Height="30" Width="40" Canvas.Left="10" />
        <TextBlock Text="Play" Canvas.Left="10" Foreground="Yellow" />
       </Canvas>
       
       <Canvas Background="Blue" Canvas.Left="130" Canvas.Top="185" Height="25" Width="60"
        MouseLeftButtonDown="PauseMedia" Cursor="Hand">
        <Rectangle Height="30" Width="40" Canvas.Left="10" />
        <TextBlock Text="Pause" Canvas.Left="10" Foreground="Yellow" />
       </Canvas>
       
       <Canvas Background="Black" Canvas.Left="10" Canvas.Top="215" Height="25" Width="180"
        MouseLeftButtonDown="ToggleFullScreen" Cursor="Hand">
        <Rectangle Height="30" Width="40" Canvas.Left="10" />
        <TextBlock Text="Full Screen" Canvas.Left="55" Foreground="Yellow" />
       </Canvas>
    </Canvas>
  </Canvas>    

// --------- JavaScript Code to control the Media object -------------
// Fires when Canvas is loaded
function CanvasLoaded(sender, args)
{
    var canvas = sender.getHost();
    canvas.content.onfullScreenChange = onFullScreenChanged;                            
}
// Fires when Full screen is changed
function onFullScreenChanged(sender, args)
{
    var canvas = sender.getHost();
    var buttonPanel = sender.findName("ButtonPanel");
    // Change the opacity of the button panel so that in the full screen it disappears and in normal screen it appears
    if (canvas.content.fullScreen == true)
        buttonPanel.opacity = 0;
    else
        buttonPanel.opacity = 1;
    // change the media object height and width to the canvas height and width
    var media = sender.findName("MyMedia");
    media.width = canvas.content.actualWidth;
    media.height = canvas.content.actualHeight;
}
//Fires when Full Screen button is clicked
function ToggleFullScreen(sender, args)
{
    var canvas = sender.getHost();
    canvas.content.fullScreen = !canvas.content.fullScreen;
}
// Fires when Stop button is clicked
function StopMedia(sender, args)
{
    sender.findName("MyMedia").stop();
}
// Fires when Play button is clicked
function PlayMedia(sender, args)
{
    sender.findName("MyMedia").play();
}
// Fires when Pause button is clicked
function PauseMedia(sender, args)
{
    sender.findName("MyMedia").pause();

Hope this helps!!



Tag cloud

Sign in