Silverlight Tutorials

Silverlight prerequisites and installation for web application development

Silverlight Development Tools & Software

Silverlight plug-in Inplace and Indirect installation, How to

Hello World Silverlight Example with <TextBlock> Tag

Step 1. Open Visual Studio,

Step 2. Open New Silverlight Project

Now By Default you will get Page.xaml with the following code

<Canvas x:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Loaded="Page_Loaded" 
        x:Class="SilverlightProject1.Page;assembly=
                    ClientBin/SilverlightProject1.dll"
        Width="640"
        Height="480"
        Background="White"
        >

</Canvas>

Step 3. To display a text message in silveright canvas we have tag called <TextBlock>

Find the following modified code after adding <TextBlock> tag with Foreground attribute (Solid Brush)

<Canvas
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        x:Name="parentCanvas" 
        Loaded="Page_Loaded" 
        x:Class="SilverlightProject1.Page;assembly=ClientBin/SilverlightProject1.dll"
        Width="885"
        Height="500"
        Background="White"
        >

  <TextBlock Text="Hello World with Solid brush" FontSize="50" Foreground="#FF0D2764"/>
    <TextBlock Text="Hello World with gradient brush" FontSize="50" Canvas.Left="8" Canvas.Top="161.368">
        <TextBlock.Foreground>
            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                <GradientStop Color="#FF141714" Offset="0"/>
                <GradientStop Color="#FFDD520E" Offset="0.37"/>
                <GradientStop Color="#FF0F2E6A" Offset="0.861"/>
            </LinearGradientBrush>
        </TextBlock.Foreground>
    </TextBlock>

</Canvas>

Step 4. Now Run the Application By Pressing F5 with debugging or Ctrl+F5 without debugging.

Download Source Code - How to use gradient brush in silverlight

See Also: 1. Hello World Silverlight Example with <TextBlock> Tag
2. How to display text with solid color brush
3. How to use gradient color brush in Silverlight

How to display text with solid color brush

See Also: 1. Hello World Silverlight Example with <TextBlock> Tag
2. How to display text with solid color brush
3. How to use gradient color brush in Silverlight

Download Source Code - How to use solid brush in silverlight

If you don't have silverilght installed in your system first go through these articles otherwise please simply skip bellow articles

Silverlight prerequisites and installation for web application development

Silverlight Development Tools & Software

Silverlight plug-in Inplace and Indirect installation, How to

Hello World Silverlight Example with <TextBlock> Tag

Step 1. Open Visual Studio,

Step 2. Open New Silverlight Project

Now By Default you will get Page.xaml with the following code

<Canvas x:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Loaded="Page_Loaded" 
        x:Class="SilverlightProject1.Page;assembly=
                    ClientBin/SilverlightProject1.dll"
        Width="640"
        Height="480"
        Background="White"
        >

</Canvas>

Step 3. To display a text message in silveright canvas we have tag called <TextBlock>

Find the following modified code after adding <TextBlock> tag with Foreground attribute (Solid Brush)

<Canvas
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        x:Name="parentCanvas" 
        Loaded="Page_Loaded" 
        x:Class="SilverlightProject1.Page;assembly=ClientBin/SilverlightProject1.dll"
        Width="885"
        Height="500"
        Background="White"
        >
  <TextBlock Text="Hello World with Solid brush" FontSize="50" Foreground="#FF0D2764"/>

</Canvas>

Step 4. Now Run the Application By Pressing F5 with debugging or Ctrl+F5 without debugging.

Download Source Code - How to use solid brush in silverlight

See Also: 1. Hello World Silverlight Example with <TextBlock> Tag
2. How to display text with solid color brush
3. How to use gradient color brush in Silverlight

Thursday, June 14, 2007

Hello World Silverlight Example with <TextBlock> Tag

See Also: 1. Hello World Silverlight Example with <TextBlock> Tag
2. How to display text with solid color brush
3. How to use gradient color brush in Silverlight

Download Source Code

If you don't have silverilght installed in your system first go through these articles otherwise please simply skip bellow three articles

Silverlight prerequisites and installation for web application development

Silverlight Development Tools & Software

Silverlight plug-in Inplace and Indirect installation, How to

Step 1. Open Visual Studio,

Step 2. Open New Silverlight Project

Now By Default you will get Page.xaml with the following code

<Canvas x:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Loaded="Page_Loaded" 
        x:Class="SilverlightProject1.Page;assembly=
                    ClientBin/SilverlightProject1.dll"
        Width="640"
        Height="480"
        Background="White"
        >

</Canvas>

Step 3. To display a text message in silveright canvas we have tag called <TextBlock>

Find the following modified code after adding <TextBlock> tag

<Canvas x:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Loaded="Page_Loaded" 
        x:Class="SilverlightProject1.Page;assembly=
                    ClientBin/SilverlightProject1.dll"
        Width="640"
        Height="480"
        Background="White"
        >
  <TextBlock Text="Hello World" FontSize="50"/>
</Canvas>

Step 4. StepNow Run the Application By Pressing F5 with debugging or Ctrl+F5 without debugging.

Download Source Code

See Also: 1. Hello World Silverlight Example with <TextBlock> Tag
2. How to display text with solid color brush
3. How to use gradient color brush in Silverlight

Wednesday, June 13, 2007

Expression Blend Tutorials

Today I have found very good tutorials for Expression Blend from www.movielibrary.lynda.com. These tutorials covers the topics like

Overview and Installation, The Workspace, Managing Your Projects, Drawing in Blend, Appearance, Working with Text, Using 3D, Media Integration, Layout Controls, Media Integration, Layout Controls, Transformations, Animation and Interactivity, WPF Controls, Working with Data, Application Deployment, Please find following Expression Blend tutorial pages

Expression Blend

Getting Started with Expression Blend 3.75 hours

Expression Blend Beta Preview 2.5 hours

Expression Design

Getting Started with Expression Design

Hope these tutorials are useful. Suggest the some more best tutorials on this topic in bellow comment section.

Silverlight Internet TV platform By Maven Networks

Maven Networks, which provides hosting services for Internet TV, will announce Wednesday plans to add Microsoft's new Silverlight technology as a video delivery vehicle. The company is collaborating with Microsoft on this endeavor. Through Silverlight, Maven's customer base of professional media companies will be able to leverage familiar Windows Media technology as well as workflow automation, publishing, and player creation capabilities of the Maven Internet TV platform. Read More

Monday, June 11, 2007

Changing Silverlight Text Direction Right to Left

In some languages text has to be displayed in right to left direction. 
For this case we don't have any property supported by XAML, Java script. 
To achieve it we can use following traditional way.

Silverlight 1.1

        char[] str = mystr.Text.ToCharArray();
        Array.Reverse(str);
        mystr.Text = new string(str);

Silverlight 1.0

mystr.Text = mystr.Text.split('').reverse.join('');

Hope It could be useful for silverlight lovers. Please post your comments bellow.

Silverlight Transparent Control Creation

Step1: Open page Default.aspx.js

Step2: Goto the function "createSilverlight"

Step3: set the isWindowless value to true.

Find the example bellow

function createSilverlight()
{
Sys.Silverlight.createObjectEx({
  source: "Page.xaml",
  parentElement: document.getElementById("SilverlightControlHost"),
  id: "SilverlightControl",
  properties: {
   width: "100%",
   height: "100%",
   version: "0.95",
   isWindowless:"true",
   background:"#00FFFFFF",
   enableHtmlAccess: true
  },
  events: {}
});
}

Now run your application your silverlight control will be in transparent.

Hope this can be useful. Post your comments bellow.

Silverlight Video Tutorials

To view silverlight components in web page. you need silverlight plu-in. please see process of silverlight plug-in installation Silverlight plug-in Inplace and Indirect installation, How to, to develop rich silverlight applications you need have to have essential silverlight tools. Please find the Silverlight Development Tools & Software and to learn the silverlight following video tutorials would be very useful for you.

Publishing Media Content to Silverlight Streaming Services	Real-Time Data Update with Silverlight and Web Services
Overlaying HTML and Silverlight Content	Creating a Video Playlist with Silverlight and ASP.NET
Using AJAX to Dynamically Update Silverlight Content	Delivering Parameterized Silverlight Content with Java
Delivering Parameterized Silverlight Content with PHP	Delivering Parameterized Silverlight Content with ASP.NET
Animating Vector Art for Silverlight with Expression Blend Part II	Animating Vector Art for Silverlight with Expression Blend Part I
Creating Vector Art for Silverlight with Expression Blend