You are here:   Silverlight 1.0 > Silverlight ToolBar
  |  Login
 Silverlight ToolBar


 The Application

Install the module and place it on a page in a DotNetNuke site.

Click the Edit Menu Items link.

Add images and indicate the web address to navigate to when the image is clicked on. The image will be automatically resized (for best results use an image that is 50x50 pixels).

On the Settings page the number of buttons to show at a time can be set.

The toolbar will automatically resize and display navigation arrows as needed.

About The Application

The toolbar is composed of a Toolbar and a Box. The Box is simply placed in the toolbar multiple times to create the elements on the Toolbar.

The graphic above shows the files in the project. The Silverlight portion of the application is primarily composed of Page.xaml that contains the toolbar and Box.xaml that contains the element used to represent the menu items. 

Page.xaml: 

The picture above shows how the toolbar looks when viewed in Expression Blend. All the elements are easily editable. The ToolBar scrolls to the left and the right. The JavaScript method (SetToolbarWindowClip) will apply a "Clip" that will only show a portion of the Toolbar.

The graphic above shows the outline of the elements.

Box.xaml

The Box.xaml file is simply an image with a reflected image below it. This file is also easily editable in Expression Blend.

The Animation

The animation is simple and straightforward. Page.xaml contains a storyboard:

<Canvas.Resources>
<Storyboard x:Name="Movebar">
<DoubleAnimation x:Name="animateToolbar" Duration="0:0:0.5" Storyboard.TargetName="ToolBar"
Storyboard.TargetProperty="(Canvas.Left)" />
</Storyboard>
</Canvas.Resources>

Page.xaml.js contains this reference to the storyboard and the animation contained in the storyboard:

storyboard = rootElement.findName("Movebar");
animation = rootElement.findName("animateToolbar");

After a button is pressed, scrollPosition is calculated. The animation destination value (animation.To) is set to the current scrollPosition and the storyboard is triggered to run the animation.

animation.To = scrollPosition;
storyboard.Begin();

Source Code

What if they don't have Silverlight installed?

This tutorial demonstrates how you can show default module content when a visitor does not have Silverlight.

When a website visitor has Silverlight installed they will see this toolbar:

If they do not have Silverlight installed they will see this one:

Create The User Interface For The Non-Silverlight Toolbar

The first task is to create the user interface for the non-Silverlight toolbar. First, you will need to download the following 2 images and place them in the images directory that is located in the SilverlightToolBar directory:

Next, open the View.ascx file and switch to Source view. The screen will look like this:

Place the following code below </asp:Panel>:

<asp:Panel ID="noSilverlight" runat="server" Height="100px" Width="100%">
<br />
<asp:Table ID="Table1" runat="server" BorderStyle="None" CellPadding="4">
<asp:TableRow runat="server">
<asp:TableCell runat="server" Width="10%">
<asp:ImageButton ID="ltbtn" runat="server" ImageUrl="~/DesktopModules/SilverlightToolBar/images/ltbutton.gif"
OnClick="ltbtn_Click" /></asp:TableCell>
<asp:TableCell HorizontalAlign="Center" Width="80%" runat="server">
<asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal"
ShowFooter="False" ShowHeader="False" CellPadding="4" CellSpacing="4" RepeatLayout="Table">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Bind("Picture") %>'
PostBackUrl='<%# Bind("Url") %>' />
</ItemTemplate>
</asp:DataList></asp:TableCell>
<asp:TableCell runat="server" Width="10%">
<asp:ImageButton ID="rtbtn" runat="server" ImageUrl="~/DesktopModules/SilverlightToolBar/images/rtbutton.gif"
OnClick="rtbtn_Click" /></asp:TableCell>
</asp:TableRow>
</asp:Table>
<br />
<asp:Label ID="lblTotalPages" runat="server" Visible="False"></asp:Label>
<asp:Label ID="lblCurrentPage" runat="server" Visible="False"></asp:Label>
</asp:Panel>
 
<script type="text/javascript">
<asp:Literal ID="lrlSilverlightDetection" runat="server"></asp:Literal>
</script>

(The code above may be difficult to copy due to the formatting. Copy the code from the download file instead)

When you switch to Design view for the View.ascx file it will now appear like this:

We have simply created a DataList that we will bind to the same data source that is populating the Silverlight toolbar. A left and right button are placed on either side. All three elements are wrapped in a ASP.NET table. An ASP.NET table is used rather than a normal table because it's width is easily adjusted programmatically based on the number of elements that are to be shown. In addition, hidden labels to track the number of pages and the current page are placed on the form.

Create The Code For The Non-Silverlight Toolbar

Now we will switch to the View.ascx.cs file:

Add the following code:

#region ShowNonSilverlightToolbar
private void ShowNonSilverlightToolbar(int intCurrentPageIndex)
{
PagedDataSource pagedData = new PagedDataSource();
pagedData.DataSource = Edit_DAL.GetPictures(ModuleId);
pagedData.AllowPaging = true;
pagedData.PageSize = NumberOfButonsToShow;
pagedData.CurrentPageIndex = intCurrentPageIndex - 1;
 
this.lblTotalPages.Text = Convert.ToString(pagedData.PageCount);
this.lblCurrentPage.Text = Convert.ToString(pagedData.CurrentPageIndex + 1);
 
DataList1.DataSource = pagedData;
DataList1.DataBind();
DataList1.RepeatColumns = NumberOfButonsToShow;
 
//Hide or show navigation
if (pagedData.PageCount == 1)
{
this.ltbtn.Visible = false;
this.rtbtn.Visible = false;
}
else
{
if (intCurrentPageIndex == 1)
{
this.ltbtn.Visible = false;
}
else
{
this.ltbtn.Visible = true;
}
 
if (intCurrentPageIndex == pagedData.PageCount)
{
this.rtbtn.Visible = false;
}
else
{
this.rtbtn.Visible = true;
}
}
}
 
protected void ltbtn_Click(object sender, EventArgs e)
{
CurrentPageIndex = Convert.ToInt32(this.lblCurrentPage.Text) - 1;
ShowNonSilverlightToolbar(CurrentPageIndex);
}
protected void rtbtn_Click(object sender, EventArgs e)
{
CurrentPageIndex = Convert.ToInt32(this.lblCurrentPage.Text) + 1;
ShowNonSilverlightToolbar(CurrentPageIndex);
}
 
#endregion

This code consists of three methods:

ShowNonSilverlightToolbar - This method calls the same "Edit_DAL.GetPictures(ModuleId)" method that the Silverlight toolbar uses to retrieve the pictures and urls's used for this instance of the module. It places the results in a PagedDataSource control and then binds the PagedDataSource to the DataList.

ltbtn_Click and rtbtn_Click - Are methods attached to the navigation buttons.

Now add the following code:

#region ClientsideJavaScriptSilverlightDetection
 
private string ClientsideJavaScriptSilverlightDetection()
{
StringBuilder sb = new System.Text.StringBuilder();
 
sb.Append("<script type='text/javascript'> ");
sb.Append(string.Format("function ShowHideSilverlight{0}() ", Convert.ToString(ModuleId)));
sb.Append("{ ");
sb.Append("Silverlight.isInstalled(this); ");
sb.Append("if (Silverlight.available) ");
sb.Append("{ ");
sb.Append(string.Format("showhide('dnn_ctr{0}_View_noSilverlight'); ", Convert.ToString(ModuleId)));
sb.Append("}else{ ");
sb.Append(string.Format("showhide('dnn_ctr{0}_View_SilverlightControlHost'); ", Convert.ToString(ModuleId)));
sb.Append("} ");
sb.Append(" ");
sb.Append("function showhide(id) ");
sb.Append("{ ");
sb.Append("if (document.getElementById) ");
sb.Append("{ ");
sb.Append("obj = document.getElementById(id); ");
sb.Append(" ");
sb.Append("if (obj.style.display == 'none') ");
sb.Append("{ ");
sb.Append("obj.style.display = ''; ");
sb.Append("}else{ ");
sb.Append("obj.style.display = 'none'; ");
sb.Append("} ");
sb.Append("} ");
sb.Append("} ");
sb.Append("} ");
sb.Append("</script> ");
 
return sb.ToString();
}
 
#endregion

This code creates a JavaScript method that will detect if Silverlight is enabled and will hide the DIV containing the Silverlight plug-in and show a DIV that will display the non-Silverlight toolbar if Silverlight is not installed. Notice the ModuleId is attached to the script, this prevents JavaScript collisions.

Add the following global variable below "int NumberOfButonsToShow;"

int CurrentPageIndex;

The code should appear like this:

Finally, add the following code below "SilverlightControlHost.Width = (70 * NumberOfButonsToShow);" :

Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
string.Format("SilverlightDetection{0}", Convert.ToString(ModuleId)), ClientsideJavaScriptSilverlightDetection());
lrlSilverlightDetection.Text = string.Format("ShowHideSilverlight{0}() ", Convert.ToString(ModuleId));
Table1.Width = (85 * NumberOfButonsToShow);
 
if (!IsPostBack)
{
// Show Buttons when Silverlight is not installed
ShowNonSilverlightToolbar(1);
}

This code registers the Silverlight detection script and then triggers the script by filling the Literal control with a call to the ShowHideSilverlight method. The code also sets the width of the table containing the non-Silverlight toolbar. Finally it calls the ShowNonSilverlightToolbar method when the page first loads.

The code should appear like this:

Save the page and from the Visual Studio toolbar select Build, then Build Page. The page should build without errors.

When you view the page on a computer that does not have Silverlight installed you will see the non-Silverlight toolbar.

 

 Download

Silverlight Toolbar version:

SilverlightToolBar_01.00.00_Install.zip

The Silverlight Toolbar and the non-Silverlight toolbar version:

Silverlight ToolBar_02.00.00_Install.zip

Requires DotNetNuke version 4.6 or higher