European Silverlight 4 & Silverlight 5 Hosting BLOG

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

Silverlight 4 Hosting Italy - HostForLIFE.eu :: Create a basic Movement using Silverlight Animations

clock March 30, 2015 06:40 by author Rebecca

Do you want to make a game using Silverlight? At the first, you need something that moves around the screen. For example, you need at least four buttons that move a sprite in four directions. How do you do that? Well, there are multiple ways to accomplish this movement, some more flexible than others. Today, I’m going to tell you how to use Silverlight animations to do that job.

Silverlight animations are not hard to use, but what is hard to master are the dynamic animations, which require multiple classes to create and set up. You have to set up a storyboard, create an animation, and then set the target information. When it is all said and done, you will end up with something like this:

[silverlight width="400" height="300" src="aMovement1.xap" border="true"]

As with any Silverlight app, we need to start with some Xaml:

  <Canvas Height="300" Name="canvas1" Width="400" >
<Canvas.Resources>

<Storyboard x:Name="mySB"></Storyboard>

</Canvas.Resources>

<Ellipse x:Name="myEllipse" Width="50" Height="50" Canvas.Left="175"
>
<Canvas.Top="125" Fill="Black" />

</Canvas>

I know what you are thinking, maybe this is not enough XAML for animations. Well, this is what we’re going to do. We are actually creating all of the animations dynamically and adding them to the storyboard. Then, to start with, we need an event (a keyboard triggered event).

What we need is a Key Up event,  that only fires when we release a key, as opposed to pushing it down. Now I am using Visual Studio 2010 (which is currently under beta, so it is a free download), so I am not adding the event to the Canvas myself, but it is one line of code you can find. As I stated above, you need to setup a Key Up event. This event also has to be tied to the Canvas, so it works no matter where you click the application:

private void canvas1_KeyUp(object sender, KeyEventArgs e)
{

}

The first thing that we need to add to our event is key capturing. If you have ever done this before, you will recognize the code, if not it is extremely easy to do:

private void canvas1_KeyUp(object sender, KeyEventArgs e)
{

if (e.Key == Key.Left)

{

}

else if (e.Key == Key.Right)

{

}

else if (e.Key == Key.Up)

{

}

else if (e.Key == Key.Down)

{

}

}

What is going on here is that we are taking the key pressed, in this case a property of “e”, which is passed with the event. This gives up information about what key was pressed so we can compare it to key codes built into C#, which is given as an easy to use “e” num. As you can see, it is pretty obvious how to capture the right key.

Now we can start to setup some variables (movement speed and movement distance). Speed corresponds to how long it will take to travel a length equal to movement distance. For example we will set movement distance at 100 and speed at 0.5, making the animation travel 100 pixels in half a second. All we are doing right now is setting these variables, for later use:

private void canvas1_KeyUp(object sender, KeyEventArgs e)
{

Double mDist = 100.00;

Double mSpeed = 0.5;

if (e.Key == Key.Left)
{

}

else if (e.Key == Key.Right)

{

}

else if (e.Key == Key.Up)

{

}

else if (e.Key == Key.Down)

{

}

}

The next step is to start setting up the animation. To do this, we utilize a lot of different classes and methods like:

private void canvas1_KeyUp(object sender, KeyEventArgs e)
{

Double mDist = 100.00;

Double mSpeed = 0.5;
Double x = Canvas.GetLeft(myEllipse);
Double y = Canvas.GetTop(myEllipse);

DoubleAnimation animation = new DoubleAnimation();
animation.Duration = new Duration(TimeSpan.FromSeconds(mSpeed));

if (e.Key == Key.Left)
{

animation.From = x;

animation.To = x - mDist;

Storyboard.SetTargetProperty(

animation, new PropertyPath(Canvas.LeftProperty));

}

else if (e.Key == Key.Right)

{

animation.From = x;

animation.To = x + mDist;

Storyboard.SetTargetProperty(

animation, new PropertyPath(Canvas.LeftProperty))
}
else if (e.Key == Key.Up)

{

animation.From = y;

animation.To = y - mDist;

Storyboard.SetTargetProperty(

animation, new PropertyPath(Canvas.TopProperty));
}
else if (e.Key == Key.Down)

{

animation.From = y;

animation.To = y + mDist;

Storyboard.SetTargetProperty(

animation, new PropertyPath(Canvas.TopProperty));
}

Storyboard.SetTarget(animation, myEllipse);
mySB.Children.Add(animation);
mySB.Begin();
}

So starting from the top, the first thing we do is get the current position of our Ellipse. We can't really do very much without our object's current position. It is important to do this at a specific point, because the animation is of course going to change that position. Once we have the position, we begin to create the animation. Yes, there is a Double Animation object we can use, but that is not the only important object.

The first thing we do with our animation is set up its duration, which is done using the Duration object and Time span class. Using Time span's methods, we can set the duration to seconds, minutes, hours, or even days.

Now, it gets a little crazy when we get to the different movement directions. For each direction, we have to set the animation's To and From properties. Then we use some a static method in the Storyboard class called SetTargetProperty(), which allows us to tell the animation what property to animate on the target. For horizontal movement, that would be the LeftProperty, vertical the TopProperty. The tricky thing is that you have to use the Canvas class to get these properties. To make things even crazier, you have to pass it as an object called PropertyPath so you have to create that object as well. Then whole thing ends up being a web of objects and static methods.

Before we can finally add the animation to the storyboard, we have to set its target. In this case we are going to target our ellipse. We do this with the static method SetTargetin the Storyboard class. Once the target has been set, we add it to the storyboard, then start the animation.

If you ran the code we have now, you will notice one thing, it only works once. If you try to add the animation more than once, Silverlight doesn't really like it, so it fails. What we have to do is remove the current animation from the storyboard, or better yet, clear it entirely. This was the really tricky part.

In order to clear the storyboard, any animations attached have to be stopped. This is fine, but in order for things to work, we have to take the position of the ellipse before we clear the animations. So, we pause, take the position, then finally stop and clear the animations. But, one final step is setting the position of the ellipse. This has to do with animating only one axis at a time. While the animation is going, only one axis is truly updated, so we need to set the position to make sure we have the right coordinates for the animation. The final version will look something like so:

private void canvas1_KeyUp(object sender, KeyEventArgs e)
{
  Double mDist = 100.00;
  Double mSpeed = 0.5;
  mySB.Pause();
  Double x = Canvas.GetLeft(myEllipse);
  Double y = Canvas.GetTop(myEllipse);
  mySB.Stop();
  mySB.Children.Clear();
  Canvas.SetLeft(myEllipse, x);
  Canvas.SetTop(myEllipse, y);
  DoubleAnimation animation = new DoubleAnimation();
  animation.Duration = new Duration(TimeSpan.FromSeconds(mSpeed));
  if (e.Key == Key.Left)
  {
    animation.From = x;
    animation.To = x - mDist;
    Storyboard.SetTargetProperty(
      animation, new PropertyPath(Canvas.LeftProperty));
  }
  else if (e.Key == Key.Right)
  {
    animation.From = x;
    animation.To = x + mDist;
    Storyboard.SetTargetProperty(
      animation, new PropertyPath(Canvas.LeftProperty));
  }
  else if (e.Key == Key.Up)
  {
    animation.From = y;
    animation.To = y - mDist;
    Storyboard.SetTargetProperty(
      animation, new PropertyPath(Canvas.TopProperty));
  }
  else if (e.Key == Key.Down)
  {
    animation.From = y;
    animation.To = y + mDist;
    Storyboard.SetTargetProperty(
      animation, new PropertyPath(Canvas.TopProperty));
  }

  Storyboard.SetTarget(animation, myEllipse);
  mySB.Children.Add(animation);
  mySB.Begin();
 }

This gives us the animated movement we are looking for. Not a lot of code, but there is a lot going on. After using 3 separate key classes, and even more objects, we can dynamically create and use animations to move our ellipse around the screen.

Easy right?

HostForLIFE.eu Silverlight 4 Hosting
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 customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.



Silverlight 6 Hosting UK - HostForLIFE.eu :: INotifyPropertyChanged in Silverlight

clock March 17, 2015 08:03 by author Peter

Data binding is one of the coolest gimmicks that have ever existed in Silverlight. Binding a UI Element's property with a property in the code behind, has the ability to do any sort of trap. It's wizardry, basically. Once the properties are bound, we have to continue telling the UI if the property's estimation has been adjusted in the code. INotifyPropertyChanged is helpful for this.

You see, since it is an interface, we have to first actualize it. The procedure is not exceptionally extreme however. In the new Silverlight project, here is the code of my main page:
publicpartialclassMainPage : UserControl
{
    privatestring _names; 
    publicstring Names
    {
        get
        {
           return _names;
        }
        set
        {
            _names = value;
        }
   } 
    public MainPage()
    {
        InitializeComponent();
    } 
    privatevoid MainPage_OnLoaded(object sender, RoutedEventArgs e)
    {
        Names = "This is the Text";
    }
}


The property "Name" I have here is bound with the textblock in XAML. Now write the following code:
<UserControlx:Class="PropertyChangedDescribed.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"
 Loaded="MainPage_OnLoaded"
 x:Name="TestingPropertyChanged"
 d:DesignHeight="300"d:DesignWidth="400">
 <Gridx:Name="LayoutRoot"Background="White">
  <TextBlockText="{Binding Names, ElementName=TestingPropertyChanged}"/>
  </Grid>
</UserControl>

As should be obvious, the textblock has its "text" property bound with our code behind's property "Name". At this moment, regardless of what you set the estimation of "Name", it will never be reflected onto the UI. Thus, what we need is, each time we change the estimation of our property "Name," the content piece has its esteem changed as well. To do this, we have to actualize the interface INotifyPropertyChanged. Here is the changed primary page's code to do as such:
publicpartialclassMainPage : UserControl, INotifyPropertyChanged
{
    privatestring _names;
     publicstring Names
    {
        get
        {
            return _names;
        }
        set
        {
            _names = value;
            OnPropertyChanged("Names");
        }
    } 
    public MainPage()
    {
        InitializeComponent();
    } 
    privatevoid MainPage_OnLoaded(object sender, RoutedEventArgs e)
    {
        Names = "This is the Text";
    } 
    publicevent PropertyChangedEventHandler PropertyChanged;
     privatevoid OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            PropertyChanged(this,new PropertyChangedEventArgs(propertyName));
        }
    }
}

HostForLIFE.eu Silverlight 6 Hosting
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 customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.



HostForLIFE.eu Launches New Data Center in Frankfurt (Germany)

clock March 10, 2015 11:59 by author Peter

HostForLIFE.eu, a leading Windows hosting provider with innovative technology solutions and a dedicated professional services team proudly announces new Data Center in Frankfurt (Germany) for all costumers. HostForLIFE’s new data center in Frankfurt will address strong demand from customers for excellent data center services in Europe, as data consumption and hosting services experience continued growth in the global IT markets.

The new facility will provide customers and our end users with HostForLIFE.eu services that meet in-country data residency requirements. It will also complement the existing HostForLIFE.eu. The Frankfurt (Germany) data center will offer the full range of HostForLIFE.eu web hosting infrastructure services, including bare metal servers, virtual servers, storage and networking.

HostForLIFE.eu expansion into Frankfurt gives them a stronger European market presence as well as added proximity and access to HostForLIFE.eu growing customer base in region. HostForLIFE.eu has been a leader in the dedicated Windows & ASP.NET Hosting industry for a number of years now and we are looking forward to bringing our level of service and reliability to the Windows market at an affordable price.

The new data center will allow customers to replicate or integrate data between Frankfurt data centers with high transfer speeds and unmetered bandwidth (at no charge) between facilities. Frankfurt itself, is a major center of business with a third of the world’s largest companies headquartered there, but it also boasts a large community of emerging technology startups, incubators, and entrepreneurs.

Our network is built from best-in-class networking infrastructure, hardware, and software with exceptional bandwidth and connectivity for the highest speed and reliability. Every upstream network port is multiple 10G and every rack is terminated with two 10G connections to the public Internet and two 10G connections to our private network. Every location is hardened against physical intrusion, and server room access is limited to certified employees.

All of HostForLIFE.eu controls (inside and outside the data center) are vetted by third-party auditors, and we provide detailed reports for our customers own security certifications. The most sensitive financial, healthcare, and government workloads require the unparalleled protection HostForLIFE.eu provides.

Frankfurt (Germany) data centres meet the highest levels of building security, including constant security by trained security staff 24x7, electronic access management, proximity access control systems and CCTV. HostForLIFE.eu is monitored 24/7 by 441 cameras onsite. All customers are offered a 24/7 support function and access to our IT equipment at any time 24/7 by 365 days a year. For more information about new data center in Frankfurt, please visit http://hostforlife.eu/Frankfurt-Hosting-Data-Center

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

HostForLIFE.eu is awarded Top No#1 SPOTLIGHT Recommended Hosting Partner by Microsoft (see http://www.asp.net/hosting/hostingprovider/details/953). Our service is ranked the highest top #1 spot in several European countries, such as: Germany, Italy, Netherlands, France, Belgium, United Kingdom, Sweden, Finland, Switzerland and other European countries. Besides this award, we have also won several awards from reputable organizations in the hosting industry and the detail can be found on our official website.



Silverlight 6 Hosting Spain - HostForLIFE.eu :: StringFormat and CurrentCulture in Silverlight

clock March 10, 2015 07:46 by author Peter

I recently got a note around a pestering issue in utilizing StringFormat as a part of XAML binding expressions and how it doesn't respect current user’s culture settings. This is genuine that there is an issue in that it doesn't in WPF or Silverlight. In the event that you don't hear what I'm saying, Silverlight acquainted the capacity with utilization StringFormat in data binding expressions (WPF has had this since 3.5 SP1) so you could do some formatting in-line in your binding.  Like this:

<TextBlock Text="{Binding Path=CurrentDate, StringFormat=Current Timestamp is: \{0:G\}}" />

This would bring about content that future organized straightforwardly utilizing your string Formatter without the requirement for code-behind or any non specific ValueConverter. This is an extremely accommodating gimmick for organizing UI values and at times trading ValueConverters for straightforward assignments.

The issue is that StringFormat isn't regarding the client's way of life settings. Take for instance this complete XAML:
<StackPanel x:Name="FooContainer">
<TextBlock x:Name="CultureInfo" />
<TextBlock x:Name="UICultureInfo" />
<TextBlock Text="{Binding Path=CurrentDate, StringFormat=Current Timestamp is: \{0:G\}}" />
<TextBlock x:Name="CostField" Text="{Binding Path=Cost, StringFormat=Cost is: \{0:c\}}" />
 <toolkit:GlobalCalendar  />
</StackPanel>

This is being sure to a straightforward item that uncovered two properties for the reasons of showing: CurrentDate (DateTime) and Cost (double). Utilizing my standard US-English settings and territorial inclination the result would be:

Presently, give me a chance to tell my Silverlight application that I have an alternate culture information.  I can do this without having to force a language pack installation of sorts and completely change my machine. Including the way of culture/uiculture params to the <object> tag does the trap. I'll transform it to "de-de" for German. Here is the new output:

Indeed the settings perceive an alternate culture, StringFormat is not doing what I anticipate. I would have expected an alternate date show for German settings (d.m.yyyy) and an alternate currency display instead of dollars.

Shockingly this is an issue in StringFormat at this time, however there is a simple workaround that if you are creating a localized app you can add to your code that shouldn’t affect your default language settings either.  In my constructor I add this line of code:
this.Language = XmlLanguage.GetLanguage(Thread.CurrentThread.CurrentCulture.Name);

This advises the markup system to utilize the current culture settings as the UI language. XmlLanguage is a piece of the System.Windows.Markup namespace, so guarantee you get that out explicitly or add a using statement.  Now refreshing my German settings sample I get:

Not surprisingly. Changing (or removing the explicit setting of culture in my  <object> tag) back to my default culture settings brings about my US-English preferences being used and no need for me to change the XAML.

HostForLIFE.eu Silverlight 5 Hosting
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 customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.



Silverlight 5 Hosting - HostForLIFE.eu :: Using Stack Panel Layout in Silverlight

clock March 3, 2015 08:11 by author Peter

In this article let us figure out how to utilize Stack panel Layout in a Silverlight application. StackPanel is an alternate most critical board in Silverlight. It is predominantly helpful when we need to demonstrate some of your Silverlight components either Horizontally or Vertically.

Of course, open visual studio and select Silverlight project. We can perceive that there is a Grid format in our MainPage.xaml. Delete the default Grid layout and just drag and drop the Stack panel Layout into our application. The code for this looks like as:
<StackPanel Orientation="Vertical" Background="White" Height="200" Width="100">
            <Rectangle Height="50" Width="100" Fill="Red" />
            <Rectangle Height="50" Width="100" Fill="Blue" />
           <Rectangle Height="50" Width="100" Fill="Gray" />
            <Rectangle Height="50" Width="100" Fill="Goldenrod" />      
</StackPanel>

From the above code we can perceive that I put 4 rectangles in our Stack panel layout. What's more I have given a worth "Vertical" to the property "Orientation" of Stack board design. It implies that all the four rectangles will allign in vertical request. Presently give us a chance to assume we need all the rectangles to be adjusted in level request, then we ought to give the worth "Flat" to the property "Introduction" of Stack board format.

The code for this looks like as:
Presently give us a chance to assume we need all the rectangles to be adjusted in flat request, then we ought to give value “Horizontal” to the property “Orientation”  of Stack panel layout. The code for this looks like as
<StackPanel Orientation="Horizontal" Background="White" Height="100" Width="300">
            <Rectangle Height="100" Width="60" Fill="Red" />
            <Rectangle Height="100" Width="60" Fill="Blue" />
            <Rectangle Height="100" Width="60" Fill="gray" />
            <Rectangle Height="100" Width="60" Fill="Goldenrod" />      
</StackPanel>

And this is the output:

Here is the sample code for the above explanation:

MainPage.xaml
<UserControl x:Class="SilverlightApplication1.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:DesignHeight="300" d:DesignWidth="400">
    <StackPanel Orientation="Vertical" Background="White" Height="200" Width="100">          

            <Rectangle Height="50" Width="100" Fill="Red" />
            <Rectangle Height="50" Width="100" Fill="Blue" />
            <Rectangle Height="50" Width="100" Fill="Gray" />
            <Rectangle Height="50" Width="100" Fill="Goldenrod" />     
    </StackPanel>
</UserControl>

That above code will give you rectangles with vertical alignment. If you want horizontal alignment then replace complete code between <StackPanel> and </StackPanel> with the horizontal code.

HostForLIFE.eu Silverlight 5 Hosting
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 customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.



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