October 2008 - Posts
I am proud to announce we have released the official version our Silverlight Tools for Silverlight 2. Prior to this release we had released an RC1 candidate alongside the RTW version of Silverlight.
If you have the RC1 or any previous version please upgrade today. The link to download the RTW version of Silverlight is: http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en
The Silverlight Tools package includes:
- Silverlight 2 developer runtime
- Silverlight 2 software development kit
- KB956453 for Visual Studio 2008 SP1
and/or
KB956485 for Visual Web Developer 2008 Express with SP1 - Silverlight Tools for Visual Studio 2008 SP1
and/or
Silverlight Tools for Visual Web Developer 2008 Express with SP1
Features:
- Visual Basic and C# Project templates
- Intellisense and code generators for XAML
- XAML design preview
- Debugging of Silverlight applications
- Remote debugging of Silverlight applications for Mac
- Web reference support
- WCF Templates
- Team Build and command line build support
- Integration with Expression Blend
Before installing Silverlight Tools:
- Upgrade Microsoft Visual Studio 2008 to Service Pack 1 and make sure that the Visual Web Developer feature is installed.
or
Install Microsoft Visual Web Developer 2008 Express with SP1. - Uninstall any Beta or Preview versions of Expression Blend. You will need to have Blend 2 and install Microsoft Expression Blend™ 2 Service Pack 1.
Supported Operating Systems:
Windows Server 2008; Windows Vista; Windows XP
Thank you,
--Mike Snow
Subscribe in a reader
Microsoft Expression Design is a professional illustration and graphic design tool that lets you build compelling elements. This tool is especially great for creating vector based graphics for your elements.
If you do not have Expression Designer, check out: http://www.microsoft.com/expression/products/FAQ.aspx?key=design for more info.
Once you have created an element from this tool, you can copy the XAML of the objects you created directly into your Silverlight application through the Windows clipboard.
To do this, open your project and select the element you want to copy in Expression Designer. To select an element, mouse left click on the canvas and hold the mouse button down while moving the selection rectangle over your element. When it’s selected, it should be highlighted in red like this element:
Next, choose Edit->Options->Clipboard (XAML)…
This will bring up the Options dialog. From the “Clipboard format” option, drop down the combo box and choose “XAML Silverlight Canvas”. Click the OK button when done.
From the Edit menu choose Edit->Copy XAML.
Finally, open up your Silverlight Application project in Visual Studio. Open the XAML page you want to copy the element into. When ready, press Ctrl+v to paste your elements XAML into your XAML page.
Result:
Thank you,
--Mike Snow
Subscribe in a reader
In Tip of the Day #23 I showed you how to capture the mouse wheel event. In this tip we will take it one step further by implementing a IMouseWheelObserver interface that your Silverlight elements and controls can inherit from. This way, anytime the mouse wheel is used over your control, your control will be notified.
The following code is the interface declaration for IMouseWheelObserver:
public interface IMouseWheelObserver
{
void OnMouseWheel(MouseWheelArgs args);
event MouseEventHandler MouseEnter;
event MouseEventHandler MouseLeave;
}
The OnMouseWheel() event passes the following EventArgs when the event is fired for your control. These args:
- Track the Shift, Ctrl and Alt key combinations.
- Track the delta in change made by the mouse wheel scoll.
public class MouseWheelArgs : EventArgs
{
private readonly double
_Delta;
private readonly bool
_ShiftKey,
_CtrlKey,
_AltKey;
public double Delta
{
get { return this._Delta; }
}
public bool ShiftKey
{
get { return this._ShiftKey; }
}
public bool CtrlKey
{
get { return this._CtrlKey; }
}
public bool AltKey
{
get { return this._AltKey; }
}
public MouseWheelArgs(double delta, bool shiftKey, bool ctrlKey, bool altKey)
{
this._Delta = delta;
this._ShiftKey = shiftKey;
this._CtrlKey = ctrlKey;
this._AltKey = altKey;
}
}
Next, let’s take a look at the implementation of the WheelMouseListener class. In this class we:
- Call the HTMLPage methods to attach to the mouse scroll events on create.
- Call the HTMLPage methods to detach the mouse scroll events when the class is destroyed.
- Declare a element stack. We keep on the top of a stack the element that the mouse is currently over. This way we know which element to call when the mouse scroll event has occured.
public class WheelMouseListener
{
private Stack<IMouseWheelObserver> _ElementStack;
private WheelMouseListener()
{
this._ElementStack = new Stack<IMouseWheelObserver>();
HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheel);
HtmlPage.Window.AttachEvent("onmousewheel", OnMouseWheel);
HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheel);
Application.Current.Exit += new EventHandler(OnApplicationExit);
}
/// <summary>
/// Detaches from the browser-generated scroll events.
/// </summary>
private void Dispose()
{
HtmlPage.Window.DetachEvent("DOMMouseScroll", OnMouseWheel);
HtmlPage.Window.DetachEvent("onmousewheel", OnMouseWheel);
HtmlPage.Document.DetachEvent("onmousewheel", OnMouseWheel);
}
public void AddObserver(IMouseWheelObserver element)
{
element.MouseEnter += new MouseEventHandler(OnElementMouseEnter);
element.MouseLeave += new MouseEventHandler(OnElementMouseLeave);
}
private void OnMouseWheel(object sender, HtmlEventArgs args)
{
double delta = 0;
ScriptObject e = args.EventObject;
if (e.GetProperty("detail") != null)
{
// Mozilla and Safari
delta = ((double)e.GetProperty("detail"));
}
else if (e.GetProperty("wheelDelta") != null)
{
// IE and Opera
delta = ((double)e.GetProperty("wheelDelta"));
}
delta = Math.Sign(delta);
if (this._ElementStack.Count > 0)
this._ElementStack.Peek().OnMouseWheel(new MouseWheelArgs(delta, args.ShiftKey, args.CtrlKey, args.AltKey));
}
private void OnElementMouseLeave(object sender, MouseEventArgs e)
{
this._ElementStack.Pop();
}
private void OnElementMouseEnter(object sender, MouseEventArgs e)
{
this._ElementStack.Push((IMouseWheelObserver)sender);
}
private void OnApplicationExit(object sender, EventArgs e)
{
this.Dispose();
}
private static WheelMouseListener _Instance = null;
public static WheelMouseListener Instance
{
get
{
if (_Instance == null)
{
_Instance = new WheelMouseListener();
}
return _Instance;
}
}
}
There are three modifications you need to make to your controls:
- Inherit from the IMouseWheelObserver interface
- Enlist in the event listener by calling WheelMouseListener.Instance.AddObserver(this); from your controls class constructor.
- Add the method OnMouseWheel() to your control which will be called when the event is fired.
Example:
public partial class Toolbar : UserControl, IMouseWheelObserver
{
public Toolbar()
{
InitializeComponent();
WheelMouseListener.Instance.AddObserver(this);
}
public void OnMouseWheel(MouseWheelArgs args)
{
// Process the event here...
}
}
Finally, I would like to thank Laith Alasad (Laith.Alasad@hyro.com) for this idea and the code contribution above to my original Mouse Wheel code!
Thank you,
--Mike Snow
Subscribe in a reader
In Tip of the Day #42 I discussed how to create Silverlight-enabled WCF web service. In this tip I will discuss the steps necessary to take in order to publish and deploy the web service with your Silverlight application on your server.
For security reasons, in order for Silverlight to talk with your web service on your server it will first request the file clientaccesspolicy.xml. This prevents attacks such as cross-site forgery from happening. If this file is not present it then checks for the Adobes default crossdomain.xml file. If neither of these files are not present you will get an exception thrown by Silverlight. See Tip of the Day #62 for details on this error and how to see it happening. One of these files will need to be at the root directory of your web site (I.e. c:\inetpub\wwwroot).
This following configurations for these files allow access from any other domain to all resources on the current domain. You will want to configure these to meet your needs.
ClientAccessPolicy.xml –
<?xml version="1.0" encoding="utf-8"?>
<access-policy>
<cross-domain-access>
<policy>
<allow-from http-request-headers="*">
<domain uri="*"/>
</allow-from>
<grant-to>
<resource path="/" include-subpaths="true"/>
</grant-to>
</policy>
</cross-domain-access>
</access-policy>
CrossDomain.xml:
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-http-request-headers-from domain="*" headers="*"/>
</cross-domain-policy>
For more on making your service available across domain boundaries see: http://msdn.microsoft.com/en-us/library/cc197955(VS.95).aspx
Thank you,
--Mike Snow
Subscribe in a reader
Recently when deploying a Silverlight application with a web service I forgot to include a client access policy and cross domain file. As a result I got the following exception when attempting to browse to my application:
The exception did not make the error very obvious and I spent more time than I should have debugging it. Fortunately I discovered a rather awesome, freeware tool that quickly identified the problem. The tool, called Fiddler, is available at http://www.fiddlertool.com/fiddler. In a nutshell, Fiddler is a HTTP debugging proxy which logs all HTTP traffic between your computer and the Internet. You can:
- Inspect all HTTP traffic.
- Set breakpoints.
- Modify incoming and outgoing data.
- Extend it with any .NET language.
When running Fiddler than browsing to to my web site I was able to see right away that Silverlight was looking for the files clientaccesspolicy.xml and crossdomain.xml:
Thank you,
--Mike Snow
Subscribe in a reader
Hyperlinks are a graphic or string that connects readers to another web site when clicked. Generally these are a few words that are identified by a blue color and a underline. Here is an example of a hyperlink:
Click Me
In Silverlight Hyperlinks can be created through the HyperlinkButton control.
Here is an example of a how to declare a HyperlinkButton control in XAML:
<HyperlinkButton Content="Click Me" NavigateUri="http://www.silverlight.net">
</HyperlinkButton>
Couple notes:
- Content is what is displayed to the user.
- NavigateUri is the destination the user is taken too when the link is clicked.
When run you will see this:
You can target the link to open the link in a new page or the same page by setting the TargetName property.
- TargetName = _blank, _media, _search = Open the link in a new window
- TargetName = _parent, _self, _top, “” = Open the link in the window the link was clicked.
Example opening a new page:
<HyperlinkButton Content="Click Me" TargetName="_blank" NavigateUri="http://www.silverlight.net">
</HyperlinkButton>
Opening the same page:
<HyperlinkButton Content="Click Me" TargetName="_self" NavigateUri="http://www.silverlight.net">
</HyperlinkButton> Additionally, the Hyperlink does not have to be represented by text. You can use any control such as a Image, etc. by setting the HyperlinkButton.Content. For example:
<HyperlinkButton NavigateUri="http://www.silverlight.net">
<HyperlinkButton.Content>
<Canvas>
<Rectangle Width="100" Height="100" Fill="Black" Stroke="Blue" StrokeThickness="2" ></Rectangle>
<TextBlock Canvas.Top="40" Canvas.Left="25">Click Me</TextBlock>
</Canvas>
</HyperlinkButton.Content>
</HyperlinkButton>
As shown when run:
Thank you,
--Mike Snow
Subscribe in a reader
If you have a FrameworkElement such as an Image, Button, TextBlock, etc. you can add a tooltip to the element. Tooltips are usually small, boxed text that popup when a user hovers over the control. The purpose of the tooltip is to tell the user what the control does.
For example, let’s say we have a toolbar of flags that represent the language a user can select:
If a user did not recognize a flag they could hover over it and the tooltip would say what language the flag represents. For example:
To add a Tooltip to a FrameworkElement all you have to do is declare the property TooltipService.Tooltip. For Example:
<Image Source="images/france.png" ToolTipService.ToolTip="French">
A tooltip does not have to only be text, rather a tooltip can be any control you declare. For example, to make a tooltip an image you would declare it as: