European Silverlight 4 & Silverlight 5 Hosting BLOG

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

Silverlight 6 Hosting Germany - HostForLIFE.eu :: Increase the Shadow Depth of a Button Control in Silverlight

clock February 24, 2015 06:42 by author Peter

In this article, I will write about Increase the Shadow Depth of a button control in Silverlight 6 when you clicked in a Silverlight app. As usual, open the visual studio and choose the Silverlight project. First allow us to drag a button from toolbox as shown below into MainPage.xaml.

Now, i'm about to write a button click event for this button. It means, we are able to see the animation impact once ever button is clicked.
<Button Content="ClickHere" Click="StartAnimation" Width="200" Margin="60">
        <Button.Effect>
            <DropShadowEffect x:Name="myDropShadowEffect" />
        </Button.Effect>          
</Button>

Now allow us to produce a storyboard as shown below. From the below code we will able to notice that the target name and the name of our button are same. ShadowDepth is assigned because the target property.
<Storyboard x:Name="myStoryboard">
                <DoubleAnimation
                Storyboard.TargetName="myDropShadowEffect"
                Storyboard.TargetProperty="ShadowDepth"
                To="30" Duration="0:0:0.5"
                AutoReverse="True" />
            </Storyboard>

We will write the storyboard begin method within the event "StartAnimation" in MainPage.xaml.cs as shown below.
private void StartAnimation(object sender, RoutedEventArgs args)
        {
            myStoryboard.Begin();
        }

And here is the code that I used:

MainPage.Xaml
<UserControl x:Class="SilverlightTest1.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>
         <StackPanel.Resources>
            <Storyboard x:Name="myStoryboard">
                <DoubleAnimation
                Storyboard.TargetName="myDropShadowEffect"
                Storyboard.TargetProperty="ShadowDepth"
                To="30" Duration="0:0:0.5"
                AutoReverse="True" />
            </Storyboard>
        </StackPanel.Resources>
        <Button Content="Click Here" Click="StartAnimation" Width="200"
            Margin="60">
            <Button.Effect>
                <DropShadowEffect x:Name="myDropShadowEffect" />
           </Button.Effect>         
        </Button>
    </StackPanel>
</UserControl>


MainPage.Xaml.cs
private void StartAnimation(object sender, RoutedEventArgs args)
        {
            myStoryboard.Begin();
        }

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.



Silverlight 6 Hosting Netherlands - Cookie with JavaScript in Silverlight

clock February 10, 2015 15:24 by author Peter

Cookies are knowledge stored by the web browser, as easy as that. you'll be able to save something; yes I said anything, in cookies. I will conjointly do that through Silverlight itself, except for fun let's attempt doing it with JavaScript Silverlight 6. With this method we tend to follow, we'll be accessing JavaScript's function from Silverlight. This sometime becomes a headache for many developers.

The first step towards setting cookies through JavaScript, is to call the JavaScript function from Silverlight. Calling a JavaScript function from Silverlight is extremely straightforward. to know this, and more forthcoming things, produce a brand new Silverlight application "JavaScriptTweaks". Open JavaScriptTweaksTestpage.aspx, and add the subsequent code somewhere with <head> tag:
<script type="text/javascript">
    function SayHello()
   {
        alert("Hello!");
   }
</script>

Next step in the mainpage.cs inside the constructor add the code below:
HtmlPage.Window.Invoke("SayHello");
When you run the application, what you will see is a message box that pops up saying Hello at the very beginning of the app.

Now, we want to Setting the Cooking. Remove the SayHello function from the JavaScript. Write the following code:
function SetCookie(cookieName, cookieValue, Days)
{           
    var todayDate = new Date();
    var expireDate = new Date();
    if (Days == null || Days == 0) Days = 1;
    expire.setTime(todayDate.getTime() + 3600000 * 24 * Days);
    document.cookie = cookieName + ":" + cookieValue
    + ";expires=" + expireDate.toGMTString();          
}
Next step, call the function SetCookie with this code:
HtmlPage.Window.Invoke("SetCookie", "Name", "Peter", 5);


On the code above will call SetCookie function with the parameters cookieName "Name", cookieValue "Peter" and validity, in other words Days as "5". Line #5 of the function will set the expiry time period of cookies, which is in milliseconds and is about 432000000 for 5 days. Line #6 of the function will set the cookie's information like, its Name, Value and Expiry date. Our cookie is set to give information.

Now, we want to retrieve the information. Create three buttons in the XAML of the main page, 1 for each setcookie, getcookie and deletecookie.

Copy the function on the main page to the click event of the SetCookie Button.  And here is the code that I used:
function GetCookie(cookieName)
{
   var allcookies = document.cookie;
   // Get all the cookies in an array
   var cookiearray = allcookies.split(';');
   for (var i = 0; i < cookiearray.length; i++)
   {
       var nameOfCookie = cookiearray[i].split('=')[0];
       if (cookieName == nameOfCookie)
       {
           return cookiearray[i];
    }
 }
           return null;
}

Pass in the cookie name (which in our case is "Name") &  the function can return the entire cookie. On the GetCookie button select event and we should call this function. Write the following code:
private void ButtonGet_OnClick(object sender, RoutedEventArgs e)
{
    var cookie = HtmlPage.Window.Invoke("GetCookie", "Name");
    if (cookie == null)
    {
        MessageBox.Show("No cookie found");
        return;
    }
    MessageBox.Show(cookie.ToString().Split('=').LastOrDefault());
}

This will pop up a message box, showing the value of the cookie specified. Since I have my cookie as "name=Peter" it shows me "Peter".
Finally we want delete a cookie. You need to set the expiry date to a previous date. That can be done thorugh JavaScript's function as follows:
function DeleteCookie(cookieName)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    document.cookie = cookieName + "=;expires=" + exp.toGMTString();
}
In the delete button click event call this function as:
private void ButtonDelete_OnClick(object sender, RoutedEventArgs e)
{
    HtmlPage.Window.Invoke("DeleteCookie", "Name");
}


Pass within the name of the cookie you wish to delete and bang! it'll be deleted. currently simply do this. Click on SetCookie, it'll set the cookie for you. now click on GetCookie to verify whether or not it did set a cookie or not, you ought to see the value of the cookie within the message box. Click on Deletecookie to delete the cookie. Finally click on Getcookie button once more, if everything worked fine then you ought to see a message within the message box saying: "No cookie found".

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.



Silverlight 6 Hosting Italy - HostForLIFE.eu :: Using the AutoCompleteBox in Silverlight

clock February 3, 2015 07:34 by author Peter

In this tutorial, I will tell you about using the AutoCompleteBox in Silverlight 6. In this article allow us to see the way to use Custom styles in AutoCompleteBox management in a Silverlight application. As usual, open the visual studio and choose the Silverlight project. 
<sdk:AutoCompleteBox Width="150"  Height="30" x:Name="myAutoCompleteBox"/>

 

First allow us to drag a AutoCompleteBox to Stack Panel as shown below into MainPage.xaml.
Now i'm going to implement 2 stack panel resources. One is for TextBox and another one is for ListBoxItem. From the below code we will observe that for each the resources I actually have set some properties. now we've got to use these 2 resources to our TextBox and ListBoxItem.
<StackPanel.Resources>
        <Style  x:Key="myTBStyle" TargetType="TextBox">
                    <Setter Property="Background" Value="LightGreen" />
                    <Setter Property="Foreground" Value="DarkSlateGray" />
                    <Setter Property="Margin" Value="5" />
                    <Setter Property="FontWeight" Value="Bold" />
                    <Setter Property="FontSize" Value="14" />
                    <Setter Property="BorderBrush" Value="DarkGreen" />
        </Style>
        <Style  x:Key="myLBStyle" TargetType="ListBoxItem">
                    <Setter Property="Background" Value="Khaki" />
                    <Setter Property="Foreground" Value="DarkSlateGray" />
                    <Setter Property="Margin" Value="5" />
                    <Setter Property="FontStyle" Value="Italic" />
                    <Setter Property="FontSize" Value="14" />
                    <Setter Property="BorderBrush" Value="DarkGray" />
        </Style>
</StackPanel.Resources>


Now we are going to use these resources to our AutoCompleteBox. From the following code snippet we can observe that we have used the resource "myTBStyle" to the "TextBoxStyle"  of the AutoCompleteBox, and the resource "myLBStyle" to the "ItemContainerStyle"  of the AutoCompleteBox
<sdk:AutoCompleteBox Width="150"  Height="30" x:Name="myAutoCompleteBox"
TextBoxStyle="{StaticResource myTBStyle}" ItemContainerStyle="{StaticResource myLBStyle}" />


And here is the result:

 

The example code:
MainPage.Xaml
<UserControl x:Class="SilverlightTest1.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:sdk=http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<StackPanel x:Name="LayoutRoot" Background="LightGray" Orientation="Horizontal">        
   <StackPanel.Resources>
                <Style  x:Key="myTBStyle" TargetType="TextBox">
                    <Setter Property="Background" Value="LightGreen" />
                    <Setter Property="Foreground" Value="DarkSlateGray" />
                    <Setter Property="Margin" Value="5" />
                    <Setter Property="FontWeight" Value="Bold" />
                    <Setter Property="FontSize" Value="14" />
                    <Setter Property="BorderBrush" Value="DarkGreen" />
                </Style>
                <Style  x:Key="myLBStyle" TargetType="ListBoxItem">
                    <Setter Property="Background" Value="Khaki" />
                    <Setter Property="Foreground" Value="DarkSlateGray" />
                    <Setter Property="Margin" Value="5" />
                    <Setter Property="FontStyle" Value="Italic" />
                    <Setter Property="FontSize" Value="14" />
                    <Setter Property="BorderBrush" Value="DarkGray" />
                </Style>
  </StackPanel.Resources>
  <TextBox Height="30" Width="Auto" IsReadOnly="True" Text="Enter Country:"
  Style="{StaticResource myTBStyle}" BorderBrush="LightGray" />
  <sdk:AutoCompleteBox Width="150"  Height="30" x:Name="myAutoCompleteBox"
  TextBoxStyle="{StaticResource myTBStyle}" ItemContainerStyle="{StaticResource m  yLBStyle}" />    
</StackPanel>
</UserControl>

MainPage.Xaml.cs
public MainPage()
        {
            InitializeComponent();
            List<string> Countries = new List<string>();
            Countries.Add("USA");
            Countries.Add("UK");
            Countries.Add("Spain");
            Countries.Add("Netherlands");
            Countries.Add("Germany");
            Countries.Add("Switzerland");         
            myAutoCompleteBox.ItemsSource = Countries;
        }

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.



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