Gavin Leader : c#

Calling Silverlight managed code (C#) from the client-side (Javascript)

gavinleader — Mon, 08 Sep 2008 18:13:00 GMT

Even though we write managed code to build Silverlight apps, it all exists on the client side, so we need to be able to have html and Silverlight interact without hitting the server-side. This is built into Silverlight 2, and is very similar to exposing C# web service calls to the client using ASP.net AJAX... only we never have to make calls to the server.To provide a quick example, I'll create a simple Silverlight object that contains only a TextBox and show how it can be updated from Javascript. I'll create an html text box that updates my silverlight object's TextBox while I type. So in my html test page, I'll add an <input/> right above the generated code for the Silverlight object. Before I write client side functionality, I want to setup my Silverlight code to accept commands from Javascript. First, the Xaml:

<UserControl x:Class="JStoManagedCode.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">
        <TextBlock x:Name="SilverlightText"></TextBlock>
    </Grid>
</UserControl>

Next, in my code behind for the root visual (Page.xaml.cs), I’ll need to:
    a)      Make the class a scriptable type, and register it in the html page
    b)      Create a function to update the Silverlight text, and expose it to the client.

To make the class scriptable, I need to add a [ScriptableType] attribute to the class declaration (System.Windows.Browser namespace). Then I’ll register the class to the client by calling HtmlPage.RegisterScriptableObject. Then I’ll write a function that updates the Silverlight object, and will add a [ScriptableMember] attribute to that function. Here’s what the final code looks like:

using System.Windows.Controls;
using System.Windows.Browser;

namespace JStoManagedCode
{
      [ScriptableType]
      public partial class Page : UserControl
      {
            public Page()
            {
                  InitializeComponent();
                  HtmlPage.RegisterScriptableObject("SilverlightTextSample", this);
            }
            [ScriptableMember]
            public void UpdateSilverlightText(string newText)
            {
                  SilverlightText.Text = newText;
            }
      }
}

Now my Silverlight object is ready to accept calls to UpdateSilverlightText via Javascript! Let’s call it.In my Html page, I’ll add a textbox (input) above the silverlight object add an event handler to the textbox’s onkeypress event:

    <input id="clientTextBox" onkeypress="clientTextChanged(event)" />

     
     <div id='errorLocation' style="font-size: small;color: Gray;"></div>
     <div id="silverlightControlHost">
            <object id="silverlightObject" data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">
                  <param name="source" value="ClientBin/JStoManagedCode.xap"/>
                  <param name="onerror" value="onSilverlightError" />
                  <param name="background" value="white" />
                      <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
                      <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
                      </a>
            </object>
            <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
    </div>

Finally I’ll write the Javascript event handler that in turn calls my Silverlight function:

function clientTextChanged ( e ) {
      var newText = document.getElementById("clientTextBox").value;
      var silverlightObject = document.getElementById("silverlightObject");
      var keynum;      if ( window.event ) { // IE
            keynum = e.keyCode;
      }
      else if ( e.which ) { // Other browsers
            keynum = e.which;
      }
      newText += String.fromCharCode(keynum);

      silverlightObject.content.SilverlightTextSample.UpdateSilverlightText(newText);
}

And here’s how it all looks (aplogies for the screenshot, I'm unable to post Xap files):

AJAX History control - using with a GridView

gavinleader — Thu, 19 Jun 2008 21:58:00 GMT

The History control allows web applications to inject browser history checkpoints based on the state of a AJAX control. The History control can store the state of a single serializable object, or can take a Dictionary<string, object> pairing where the string is a key identifying the serialized object.

To begin implimentation, add a <asp:History /> control to the page….

<asp:History ID="HistoryManager" runat="server" OnNavigate="HistoryManager_Navigate"></asp:History>

Then add a asyncronous trigger to the related UpdatePanel:

<asp:AsyncPostBackTrigger ControlID="HistoryManager" />

</Triggers>

Once the History control has been added to the page, in your code-behind, you need to insert checkpoints as well as handle the a postback created by the browser buttons, or OnNavigate.

First, insert checkpoints where they make sense. This usually occurs within a partial page postback, for example a LinkButton within your UpdatePanel. In the following example, the AddGridHistory function is called whenever I want to store a history checkpoint. The function stores the state of a GridView by serializing every parameter needed to grab the exact data of a history checkpoint.

private void AddGridHistory()

{

Dictionary<string, object> gridState = new Dictionary<string, object>();

gridState.Add("ProductID", this.ProductID);

gridState.Add("NewerThan", this.NewerThan);

gridState.Add("SearchText", this.SearchText);

gridState.Add("SortCriteria", this.SortCriteria);

gridState.Add("SortOrder", this.SortOrder);

gridState.Add("NumberofRowsToReturn", this.NumberofRowsToReturn);

HistoryManager.AddHistoryPoint(gridState);

}

Now all we need to do is handle the OnNavigate event, which occurs when the browser Forward and Back buttons are used. The event handler is referenced above in our <asp:History /> control. When called, the handler will assign that state's Parameters, before the app retrieves data and DataBinds the GridView. The handler looks like this:

public void HistoryManager_Navigate(object sender, Microsoft.Web.Preview.UI.Controls.HistoryEventArgs args)

{

if (args.State.ContainsKey("ProductID")) this.ProductID = (string)args.State["ProductID"];

if (args.State.ContainsKey("NewerThan")) this.NewerThan = (string)args.State["NewerThan"];

if (args.State.ContainsKey("SearchText")) this.SearchText = (string)args.State["SearchText"];

if (args.State.ContainsKey("SortCriteria")) this.SortCriteria = (SortCriteria)args.State["SortCriteria"];

if (args.State.ContainsKey("SortOrder")) this.SortOrder = (SortOrder)args.State["SortOrder"];

if (args.State.ContainsKey("NumberofRowsToReturn")) this.NumberofRowsToReturn = (string)args.State["NumberofRowsToReturn"];

RefreshGrid();

}

Silverlight 2 - Creating a Play/Pause button using a ControlTemplate

gavinleader — Thu, 19 Jun 2008 21:28:00 GMT

A Button is one of the most common elements used in an interactive application. In Silverlight 2, it is possible to specify nearly any control’s appearance by using a ControlTemplate. The control’s template can be defined within the control’s <ControlTemplate/> inner property, or it can be built as a resource at the page or application level. We can reference these resources in the control's Style or ControlTemplate property (ControlTemplate can be a child of a Style, making it possible to add additional Setters to that Style).

In this sample, we'll create a Play/Pause button that can be used in a media player. We'll end up with a ControlTemplate in the App.xaml that can be reused for several media controls (i.e. Stop, Forward, Backward, etc.) by setting their Template property.

Creating a simple ControlTemplate

Using Blend, I can generate some of markup to get started. First, create a Button control in Blend within the Silverlight Object structure:

To create an empty ControlTemplate for this button, right-click the button in the Object Viewer, and create an blank template:

This will modify the Button Xaml to reference the new resource,

and will generate the following in the App.xaml resources, based on the Button control's pre-defined TemplateVisualStates:

</vsm:VisualStateManager.VisualStateGroups>

</Grid>

</ControlTemplate>

We can see Button's pre-defined visual states by looking up the class' custom attributes (http://msdn.microsoft.com/en-us/library/system.windows.controls.button(VS.95).aspx):

[TemplateVisualStateAttribute(Name = "Unfocused", GroupName = "FocusStates")][TemplateVisualStateAttribute(Name = "MouseOver", GroupName = "CommonStates")][TemplateVisualStateAttribute(Name = "Pressed", GroupName = "CommonStates")][TemplateVisualStateAttribute(Name = "Focused", GroupName = "FocusStates")][TemplateVisualStateAttribute(Name = "Disabled", GroupName = "CommonStates")][TemplateVisualStateAttribute(Name = "Normal", GroupName = "CommonStates")]public class Button : ButtonBase

We can either modify the Xaml by hand or use the States Viewer in the June release of Blend, either way, we'll need to add Storyboards for any desired visual state:

I'll first create the base template style, which is a circular button without the play or pause icons. The updated template Xaml looks like this:

</ControlTemplate>

Now I want to add a MouseOver state, so I'll change the following VisualState to create a glow effect on the button:

<vsm:VisualState x:Name="MouseOver">
      <Storyboard>
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Fade" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                  <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF98BFFB"/>
            </ColorAnimationUsingKeyFrames>
      </Storyboard>

</vsm:VisualState>

Now my button is glowing nicely on mouseover, and I haven't had to write any C# yet!

Adding Button Content (Play and Pause icons)

The play and pause icons will need to exist within the control’s Content in order for us to access them in the code-behind. There is currently no support for accessing items within the ControlTemplate, but something tells me this will be supported in the future. One downside to separating the icons from the ControlTemplate is that we cannot include visual states for the icons… There are worse things in life. The positive side is that we can specify where content shows up in the template by adding a ContentPresenter to the template:

We could add another element below the ContentPresenter, allowing for the possibility of a gradient over the top of our icons, which can be edited in the visual states.

To add the play and pause icons, we'll simply add Xaml to be a child-node of the Button:

</Button>

All of this templating work sets us up nicely to write some simple logic for the Button's Click handler:

private void PlayPauseButton_Click(object sender, RoutedEventArgs e)
{
      if (VideoPlayer.CurrentState == MediaElementState.Playing)
      {
            VideoPlayer.Pause();
            PauseIcon.Visibility = Visibility.Collapsed;
            PlayIcon.Visibility = Visibility.Visible;
      }
      else
      {
            VideoPlayer.Pause();
            PlayIcon.Visibility = Visibility.Collapsed;
            PauseIcon.Visibility = Visibility.Visible;
      }

}