When you publish your website to IIS, most probably you will find your xap file copied along into the server. But when you open it in your web browser, you may not be able to see the Silverlight component in your website. There is one thing that you may need to do in order to see it, it is to
Register your silverlight extension to MIME type
Go to your IIS, Add MIME type
Extension: .xap
Application: application/x-silverlight-app
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:
<!-- 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>
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.
Storyboard PhoneBip = null;PhoneBip = new Storyboard();PhoneBip = (Storyboard)base.FindName("PhoneRing");
PhoneBip.FillBehavior = FillBehavior.Stop;
PhoneBip.Begin();
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;
}
}
…
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>
Once you have done, click on the Base state to stop recording.
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>
…
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.
Technology Used:
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,
<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,
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.
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>
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>
Posts
All Comments
