How to integrate Silverlight component into ASP.Net Website

To integrate your Silverlight component into ASP.Net Website, all you need is your xap file. You may find it under Bin folder inside your Silverlight project folder. Before you copy it, make sure you have build and compiled it.

Steps:

1. In your Website project, create a folder named “ClientBin”.
2. Copy the xap file from your Silverlight application project into the ClientBin folder.
3. Open your Website project in VS 2008, and include the ClientBin folder into the solution. To include it, you need to open your Solution Explorer, click on the “Show All File” icon, and then right click on the invisible (ClientBin) folder and select “Include In Project”.
4. Then open the web page that you want to insert your silverlight component.

<!-- If ASPX page, use ScriptManager and Silverlight control -->
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
      <div  style="height:100%;">
          <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/Sample.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />
      </div>
</form>
    
<!-- If HTML page, use Object control -->
<div id="silverlightControlHost">
<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">
    <param name="source" value="ClientBin/Sample.xap"/>
    <param name="background" value="white" />
            
    <a href=http://go.microsoft.com/fwlink/?LinkID=115261 style="text-decoration: none;">
        <img src="http://o.microsoft.com/fwlink/?LinkId=108181" alt="Gt Microsoft Silverlight" style="border-style: none"/>
    </a>
</object>

<iframe style='visibility:hidden;height:0;width:0;border:0px'>
</iframe>
</div>





5. Verify it by debugging your website project and view the page.

How to control an animation to be on/off at certain time

I find this useful when you want to catch your web user’s attention when they are browsing your website. Besides, animation can make your website look more lively and interactive.

In this section, I am not going to explain how to create an animation but how to control it to begin and stop in code behind using C#.

Before we go there, we need to create an animation in the first place and name it accordingly. You can create an animation easily using Expression Blend. You just have to click on the Add New Storyboard icon under the Objects and Timeline section and it will start recording. You may try to scale up and down an object or change its color. Let’s look at the following screenshot as an example:-

If you notice it, you may see the “Bip!” text coming out to represent ringing. So how do I set the animation begin time and stop time? The answer is “it depends on how you want it to be”.

Okay now, go to your Page.xaml.cs file.

1. Create a Storyboard object and set it to null under Page class.

Storyboard PhoneBip = null;





2. Under the Public Page() constructor, instantiate a Storyboard object.




PhoneBip = new Storyboard();





3. PhoneBip object is a new object that does not have any animation set. So now I want to reference it to the one that I have already created in XAML.




PhoneBip = (Storyboard)base.FindName("PhoneRing");





4. I also want to set its behavior to Stop once it has finished the animation.




PhoneBip.FillBehavior = FillBehavior.Stop;





5. You have done the necessary set-up, you may try to begin the animation.




PhoneBip.Begin();





6. You may want to start the animation at certain time, then you can use DispatcherTimer object to control the tick count.

Below is the sample code:-

public partial class Page : UserControl
    {
        Storyboard PhoneBip = null;
        DispatcherTimer t = null;
        private static int tickCount = 0;

        public Page()
        {
            InitializeComponent();

            PhoneBip = new Storyboard();
            PhoneBip = (Storyboard)base.FindName("PhoneRing");
            PhoneBip.FillBehavior = FillBehavior.Stop;

            t = new DispatcherTimer();
            t.Interval = TimeSpan.Zero; 
            t.Tick += new EventHandler(t_Tick); 
            t.Start();
            
        }

        protected void t_Tick(object sender, EventArgs e)
        {
            tickCount += 1;
            this.Update();
        }

        private void Update()
        {
            
            if (tickCount > 300)
            {
                PhoneBip.Begin();
                tickCount = 0;
                
            }
        }
…

How to create a template for a button type with visual states

Silverlight allows user to create template for button with visual states. For example let’s look at the following screenshot:

It is an image button that contains customized template. XAML will look like the following

<Button Height="Auto" Width="Auto" Content="Contact" Margin="10,0,10,0" x:Name="Contact" Template="{StaticResource LeftHeader_Top_Contact}" Cursor="Hand" Click="Contact_Click" >

...

</Button>

1. To create this using Expression Blend,



2. Drag a button into the page.



3. Select the button, Right Click and Select Edit Control Parts (Template) -> Create Empty.



4. The button is now assigned with an empty template and the XAML will look similar to the code above.



5. In the Edit Template section, you can put in image, text or create animation using visual states.



6. All of the states are remained in Base state, it means no animation. You may want to create a bit of animation during MouseOver state.                                                                       



7. To do that, click on the MouseOver state and it will start recording each change into key frame. For e.g Change color, Scale up and down, etc.

Once you have done, click on the Base state to stop recording.

How to create a tooltip with customized style

Tooltip is a very useful tool to provide brief information about an object (usually during mouse hover action) in a web application and Silverlight is flexible enough to let you customized its style. In my case, I am using it on image button.

By looking at 3 image button above, you may not understand where the buttons will lead you to. Thus, if you are using tooltip, you will know the information about the image button. For example, above image shown a mouse hover action on a “mail-like” icon, and tooltip appeared and shows “Contacts”.

XAML

<Button Height="Auto" Width="Auto" Content="Contact" Margin="10,0,10,0" x:Name="Contact" Template="{StaticResource LeftHeader_Top_Contact}" Cursor="Hand" Click="Contact_Click" >
    <ToolTipService.ToolTip>
        <TextBlock Height="Auto" Width="Auto" Text="Contacts" TextWrapping="Wrap" Style="{StaticResource ToolTipStyle}"/>
    </ToolTipService.ToolTip>
</Button>

Above code shown inheriting a style from a StaticResource named TooltipStyle. To create a Page level style:

<UserControl.Resources>
    <Style x:Key="ToolTipStyle" TargetType="TextBlock">
        <Setter Property="Foreground" Value="#FF9A9898" />
        <Setter Property="FontSize" Value="10"/>
        <Setter Property="VerticalAlignment" Value="Bottom"/>
        <Setter Property="FontFamily" Value="Times New Roman"/>
    </Style>

…

How to create shadow

Shadow effect gives 3D experience to the user and it greatly increases UX (user experience) during browsing. Unlike WPF, Silverlight does not have a pre-defined object that can create the effect for you. So to create shadow, you may need to create a shape and color it with black.

Let’s look at the MENU Bar again, when mouse hover over, the menu item will raise and leave a shadow below it. (“About Us”)

The shadow is created using Ellipse. XAML looks like this:

<Ellipse Height="4" x:Name="ellipse" Width="50" Opacity="0.5" RenderTransformOrigin="0.5,0.5" StrokeThickness="0" Margin="0,0,0,0" VerticalAlignment="Stretch">
    <Ellipse.Fill>
        <RadialGradientBrush>
            <GradientStop Color="#00000000"/>
            <GradientStop Color="#FFFFFFFF" Offset="1"/>
       </RadialGradientBrush>
    </Ellipse.Fill>
</Ellipse>

*Noticed that I am using a RadialGradientBrush to create the fading effect at the outer area.

How to create a Silverlight Application

Technology

Technology Used:

1. Microsoft Silverlight 2.0 Beta 2
2. Microsoft Silverlight 2.0 SDK Beta 2
3. Microsoft Silverlight 2.0 Tools Beta 2 for Visual Studio 2008
4. Microsoft Expression Blend 2.5 June 2008 Preview
5. Microsoft Visual Studio 2008
6. IIS 7

Implementation

How to create a Silverlight Application

Silverlight Application can be created in both Visual Studio 2008 and Expression Blend. It can be opened in both programs too.

Visual Studio 2008

To create in VS 2008,

1. Run Visual Studio 2008 (if Win Vista, run as Administrator)
2. Go to File -> New and click on Project.
3. Select Silverlight at the Project Type panel, and then select Silverlight Application at the Template List panel.
4. Noticed that it prompts you a new window with the title “Add a Silverlight Application”, in this window you may select a default settings and it will create a Website Project and a Silverlight Application Project.
5. Build the solution, and you will notice that a file with the extension .xap is created in the ClientBin folder under the website project.
6. You can find 2 XAML files under Silverlight Application project. App.xaml is a XAML file that stores application level resources while Page.xaml is a main page that stores the resources and page elements at page level. To View the Page.xaml file, you will see:-
   

<UserControl x:Class="SilverlightApplication6.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

    Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

  </Grid>

</UserControl>

Expression Blend

To create in Expression Blend,

1. Run Expression Blend 2.5 (if Win Vista, run as Administrator.



2. Click on New Project on the start-up menu.



3. You will see 4 options, WPF Application (.exe), WPF Control Library, Silverlight 1 Site, and Silverlight 2 Application. You need to select Silverlight 2 Application.



4. After it is completed, you will see the same file structure as in Visual Studio 2008 but without the website project. If you build and debug it, it will dynamically generate a test page to display the result.
   
   

del.icio.us Tags: Silverlight 2,Visual Studio 2008

How to use Grid Layout to partition the layout of the website

Grid Layout is one of the widely used layouts in Silverlight application. It allows the user to partition it into structural grid like TABLE element in HTML.

To create columns/rows, user needs to define the columns and rows first under the Grid tag.

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="0.5*"/>
    </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
        <RowDefinition Height="0.3*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
</Grid>

The value “*” means the rest of the remaining space but if value like “0.5*”, it works as a percentage. User may also use pixels as value, for e.g. “300”.

Once you have finished definining the layout, you can assign them to elements. You can imagine them like Array, their index starts with value “0”. The Border element must be inside the Grid tag.

<Border Grid.Column="0" Grid.Row="0">
...
</Border>

Or if you want to work with RowSpan or ColumnSpan,

<Border Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2"

If you do not want to define the columns and spans, the items under the Grid element can overlap each other, and this can give another type of good effect like

The above picture shows 3 Border elements under a Grid element.

del.icio.us Tags: Silverlight 2,Visual Studio 2008

How to use StackPanel Layout to arrange the items

StackPanel layout is another one of the widely used layouts but its behavior differs from other layouts. As the name speaks (Stack), it can stack child elements vertically or horizontally. Thus, you can find it neat and you do not need to adjust the position manually.

Stack Horizontally

One scenario that I can think of is Horizontal Menu Bar. Let’s look at the sample screenshot below for more feel of it.

XAML

<StackPanel Orientation="Horizontal" x:Name="stackPanel_Name" HorizontalAlignment="Right" Margin="0,5,0,0">
…
</StackPanel>

Stack Vertically

I used this quite often when I was creating shadow effect or reflection effect, and it works perfectly. Let’s look at the next screenshot.

XAML

<StackPanel Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
…
</StackPanel>

del.icio.us Tags: Silverlight 2,Visual Studio 2008

How to create reflection on images and objects

Different type of objects may have different way to create reflection in Silverlight. If you wish to brush an image, you may need to use ImageBrush object. Or if you need to brush a video, you may need to use VideoBrush. Or otherwise, just duplicate the object, turn it around by using transform.

We are going to use the same sample here.

Inside the StackPanel, the code will look like this

//Create an Image inside a ContentPresenter

<ContentPresenter>
    <Image x:Name="imgLogo" Source="images/logo.jpg" >
    </Image>
</ContentPresenter>

//Create a Rectangle that will use ImageBrush on the jpg file

<Rectangle x:Name="rectReflect" Height="28" Width="190" Opacity="0.5">
    <Rectangle.OpacityMask>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#00000000" Offset="0.5"/>
            <GradientStop Color="#FF000000" Offset="1"/>
        </LinearGradientBrush>
    </Rectangle.OpacityMask>

    <Rectangle.Fill>
        <ImageBrush ImageSource="images/logo.jpg" Stretch="Uniform"/>
    </Rectangle.Fill>

    <Rectangle.RenderTransform>
        <TransformGroup>
            <ScaleTransform CenterY="0.5" ScaleX="1" ScaleY="-1"/>
        </TransformGroup>
    </Rectangle.RenderTransform>
</Rectangle>

Repository Factory for VS 2008

This has been awhile and Thanks Daniel for pointing it out!! Guys, whoever wanting this for a long time, please visit the link below and leave a comment.

Thanks a lot to Ratnakar.

http://ratnakarg.wordpress.com/2008/04/07/repository-factory-for-vs-2008/#comment-52

You may also leave a comment here and I can email it to you.

Cheers

How to make Repository Factory supported in VS 2008?

I believe this has been an issue to alot of developers that have used to build the data access layer using Repository Factory for the past years using VS 2005. Unforturenately, Microsoft has shown no more interest in upgrading the current package to support VS 2008 and .net 3.0 above.

However, the community has taken alot of test to move it to VS 2008. I wish to give a big thank to 2 developers who have provided us a workaround, Jose Escrich and Noel Anderton!

Noel Anderton 's piece
"So we have taken the Source for the Guidance and opened in vs2008 this updated the guidance to vs2008 projects with out incident. We made sure we had the VS 2008 Guidance package for creating guidance packages installed and enabled the package. We then ran the Register guidance recipe which successfully registered the Repository Package Guidance. We opened another version of VS2008 and used the repository guidance to create a solution.. Great. So we tried the installer. We updated the registry paths in the launch conditions of the set up project and after unregistering in vs the guidance package we ran the installer. The installation was ran without error but when we attempted to use the repository guidance package we could not enable it. It did not show up. "

the above content can be found in http://www.codeplex.com/RepositoryFactory/Thread/View.aspx?ThreadId=23088

Jose Escrich's piece
To achieve that you must add/change some arguments in all the custom actions as follow:

/Hive=9.0 /Configuration="[TARGETDIR]MyGP.xml"

the argument that you have to change is /Hive=9.0 and also you can specify something like /Hive=9.0Exp /RANU in case that if you want to register the guidance package into the experimental hive and RANU mode. Note that changes applies just for the installer so, if you want to change the registration hive in design time, that's when you register a GP through Visual Studio, you have to add under the GuidancePackage element a HostData child element as follow:
<HostData>
<RegistrationSettings>/Hive=9.0</RegistrationSettings>
</HostData>

the above content can be found in http://forums.msdn.microsoft.com/en-US/vsgatk/thread/194e5c70-aa51-4de6-96df-cfda1c8832be