Gavin Leader

Animating Text in Silverlight

2009-09-25T22:11:00Z

Text animations in Silverlight have been really dissapointing in the past. Especially with zooming, text motion looked extremely choppy. However Silverlight 3 includes a text rendering option that significantly improves text rendering - TextHintingMode.

Setting the TextHintingMode to Animated allows you to achieve this effect. The default TextHintingMode is set to Fixed, which is intended to improve overall readability. To me, Animated looks like a graphic, while Fixed looks like HTML. Since I’m usually trying to make Silverlight text look clean as opposed to easily readable, the Animated text rendering looks better to me in general. Plus I can’t find any drawbacks to using it, so I see myself using it more often than not, even if the text isn’t going to be animated.

To set TextHintingMode, you must use the SetTextHintingMode function in Silverlight’s static TextOptions class. http://msdn.microsoft.com/en-us/library/system.windows.media.textoptions(VS.95).aspx

For example - If my TextBlock is named textBlock, the following would suffice:

TextOptions.SetTextHintingMode(textBlock, TextHintingMode.Animated);

Introduction to Silverlight Controls

2008-11-12T15:48:55Z

This introduction to Silverlight Controls is the topic of the second week of a Silverlight class that John Stockton and I are beginning at Ascentium. Last week we gave a more high-level review of the Silverlight plug-in and an intro to XAML. The summary of last week's class can be found on John's blog: http://riathoughts.com/blog/silverlight/silverlight-training-week-1-ndash-introduction-to-silverlight/.

Overview

Silverlight Controls are the basic pieces needed to build your user experience (UX). They are layout, graphics, shapes, text, media, and user inputs. You can define a control's appearance through parameters, styles, and templates. For this week, we only wanted to cover inline styles as parameters.

Layout Controls

Primary Layout Controls

The Grid, Canvas, and StackPanel layout controls provide the three main methods for laying out controls.

Grid - the default layout control in Blend, the Grid allows you to layout controls by setting the child object's HorizontalAlignment and VerticalAlignment properties. A child object that doesn't contain alignment nor width/height properties will expand to the size of it's parent Grid.
Canvas - provides absolute positioning through a child object's Canvas.Left and Canvas.Top properties.
StackPanel - easily stacks controls in a vertical or horizontal fashion based on the Orientation property.

Other Layout Controls

The following layout controls don't allow multiple child elements, but assist in very common layout scenarios. Often when using a Border or ScrollViewer, you'll want it's single child element to be one of the three primary layout controls.

Border - allows different border widths for each side and different radiuses for each corner.
ScrollViewer - in addition to the single content child object, the ScrollViewer contains horizontal and vertical scrollbars. This scenario is similar to CSS's overflow:scroll, except the scrollbars can be styled.

Graphical Controls

Basic Shapes

Rectangle
Ellipse
Line

If you are using Blend, you won't come across the Line very often. In fact, using the Line tool in Blend will create a Path object (discussed below).

Media Controls

MediaElement - used for playing audio/video
Image

The Media controls Stretch parameter allows you to change how the media fits within the dimensions of the media control.

Advanced Shapes

Polyline - creates a line from a string of x,y points provided in the Points parameter.
Polygon - same as Polyline, except you can set the Fill property.
Path - one of the more common controls when creating designs, the Path uses a string Data parameter that defines lines, bezier curves, and tells the path how to fill itself. For the most part, you won't be editing the Data string, but instead will have it generated by drawing Paths in Blend.

Input Controls

Silverlight 2 was packaged with several user input controls that any .net developer should be familiar with:

TextBox
Button
HyperlinkButton
CheckBox
ComboBox
ListBox
RadioButton
Scrollbar
Slider

The big advantage over HTML controls, is that all of these input controls can be customized through styles and templates.

Next week we'll be going over styling and hopefully will dive into some templates as well. This customization allows us to build very rich and powerful user experiences previously unavailable with HTML controls.

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

2008-09-08T18:13:00Z

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

2008-06-19T21:58:00Z

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

2008-06-19T21:28:00Z

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;
      }

}