Alex Golesh's Blog About Silverlight Development : Source Code

Windows Phone 7 Quick Tip: How to use Bing Maps in XNA games

Alex Golesh — Fri, 22 Oct 2010 14:31:00 GMT

A few days ago, a colleague of mine pointed out to this site which shows a Bing Maps usage within XNA game.

I was intrigued how to achieve it… I know that Silverlight applications for Windows Phone 7 could use Bing Maps control (see great usage tutorial here), but XNA games cannot render Silverlight controls…

To solve it, I decided to use a different approach for XNA – download image tiles and present them in XNA game.

Let’s get started. First, in order to use Bing Maps API you need a Bing Maps Account and Application Private Key.
The Bing Maps Account Center allows you to create keys to use the Bing Maps Control, Bing Maps SOAP Services, Bing Maps REST (representational state transfer) Services and Bing Spatial Data Services.

If you already have a key for using Bing, you may skip next few lines.

Without a valid key, you won’t be able to see retrieve Bing Maps content from the web. To create the account use the following steps (shamelessly taken from here)

Open your web browser and go to the following address: http://www.bingmapsportal.com.
Click Create to create a new Bing Maps account using your Windows Live ID.
On the next page, fill in your details.
Once you’ve agreed the terms and registered and/or signed in, you may choose to create a new key for your application. Click the “Create or view keys” link on the left.
On the next page fill in your application details and click Create Key.
Below, you’ll see your new private key. Save this key, you will use it later.

Now let’s do some coding! I decided to create very simple XNA game, which uses Windows Phone 7 location services (on the device) or hardcoded location (on emulator). The game will query Bing maps services and display the received map on screen.

In addition I added my XBOX Live avatar to the center of the map – this will simulate a game process.

Lastly I decided to add simple Zoom In/Out controls too.

Disclaimer: this sample is not an XNA tutorial. To learn about 2D game development with XNA game studio 4.0 for Windows Phone 7 please refer to great tutorial (which I had a great honor to be an author ) at new MSDN Apps Hub site (http://create.msdn.com/en-US/education/catalog/lab/catapult_wars).

My game will start with loading some assets at LoadContent function – it will load a font to draw text on screen, default background (to fill the screen while first map tile still downloading) and ZoomIn/ZoomOut images.

First – the references I will need in order to make whole thing work – please make sure all of the selected assemblies referenced in the project (some of them automatically referenced with new Windows Phone 7 Game project, some of them need to be referenced manually):

Make sure or add the following using statements at the top of the class:

using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Input.Touch;
using System.Device.Location;
using System.Net;
using Microsoft.Devices;

Let’s see the LoadContent function:

protected override void LoadContent()
{
    // Create a new SpriteBatch, which can be used to draw textures.
    spriteBatch = new SpriteBatch(GraphicsDevice);

    // TODO: use this.Content to load your game content here
    font = Content.Load<SpriteFont>("Font");
    mapImage = Content.Load<Texture2D>("Nowhere");
    zoominImage = Content.Load<Texture2D>("zoomin");
    zoomoutImage = Content.Load<Texture2D>("zoomout");

}

In addition I created a number of class level variables which will be used during the game:

GeoCoordinateWatcher watcher;
Texture2D mapImage;
Texture2D playerImage;
Texture2D zoominImage;
Texture2D zoomoutImage;
SpriteFont font;
GeoCoordinate co;
bool mapLoaded = false;
bool mapUpdated = false;

float baseScale = 0.04545454545454545454545454545455f;
float scale = 1f;
Vector2 zoomInPosition = new Vector2(20, 20);
Vector2 zoomOutPosition = new Vector2(20, 100);

const string bingAppKey = "MY_BING_MAPS_KEY";

The GeoCoordinateWatcher will be used to observe location changes on the device; once location changes it will be retrieved to the GeoCoordinate variable.

Since Bing Maps uses scale between 1 and 22, I have to scale my textures accordingly.

baseScale variable is 1/22 in order to enable easy scale calculation.

bingAppKey is a private key received at step 6 during registration process.

Now game will draw a mapImage on screen and will display status text according to boolean variables introduced above:

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);

    // TODO: Add your drawing code here
    spriteBatch.Begin();

    spriteBatch.Draw(mapImage, Vector2.Zero, Color.White);

    if (mapLoaded)
        DrawZoomControls();

    if (null != playerImage)
    {
        Vector2 position = 
            new Vector2(GraphicsDevice.Viewport.Width / 2 - 
                        (playerImage.Width * baseScale * scale) / 2,
                        GraphicsDevice.Viewport.Height / 2 - 
                        (playerImage.Height * baseScale * scale) / 2);

        spriteBatch.Draw(playerImage, position, null, Color.White, 0f, 
            Vector2.Zero, baseScale * scale, SpriteEffects.None, 0);
    }

    if (!mapLoaded || mapUpdated)
    {
        string text = !mapLoaded ? "Locating position..." : "Refining map...";
        Color color = !mapLoaded ? Color.White : Color.Red;
        Vector2 size = font.MeasureString(text);
        Vector2 position = new Vector2(10, GraphicsDevice.Viewport.Height - size.Y  - 10);
        spriteBatch.DrawString(font, text, position, color);
    }

    spriteBatch.End();
    base.Draw(gameTime);
}

private void DrawZoomControls()
{
    spriteBatch.Draw(zoominImage, zoomInPosition, Color.White);
    spriteBatch.Draw(zoomoutImage, zoomOutPosition, Color.White);
}

The code snippet is pretty simple, yet requires some explanations. In XNA the on-screen object location and its Z-Index depends on draw order during the Draw function. In order to start drawing the function should Begin a sprite batch rendering process and End it after all objects are drawn. First, the function above draws a background texture which currently will be a “Nowhere” image and will be replaced by the map once it arrives from server. Next, if map already downloaded it will call to helper method to draw zoom controls at known fixed positions. This assures, that zoom texture will be paced above the background (Z-Index is higher). After then, if the player’s image (remember - it will be my XBOX Live Avatar) arrived, it will display it at the center of the screen scaled accordingly to the map scale. Lastly, it will display “Loading” text if the map is not loaded yet or zoom level changed and map image being updated.

Running application at this stage produces the following result (both at emulator and the device):

To get map images I will use a WebClient class (same one which used also in Silverlight applications on Windows Phone 7).

Now it is a time to look at Bing Maps API; from MSDN documentation (http://msdn.microsoft.com/en-us/library/ff701716.aspx, http://msdn.microsoft.com/en-us/library/ff701724.aspx) I see, that the request URI should be build as follows:

http://dev.virtualearth.net/REST/version/Imagery/Metadata/imagerySet?key=BingMapsKey

For more info about version, Imagery, Metadata, etc. please refer to the Bing Maps APIs documentation.

In my sample I will use static image search by query on the emulator:

http://dev.virtualearth.net/REST/V1/Imagery/Map/AerialWithLabels/eiffel tower?zoomLevel=SCALE&mapSize=800,480&key=MY_BING_MAPS_KEY

and location centers at specified geographical coordinate (longitude and latitude) on the device:

http://dev.virtualearth.net/REST/V1/Imagery/Map/Aerial/LATITUDE,LONGTITUDE/SCALE?mapSize=800,480&key=MY_BING_MAPS_KEY

SCALE will be replaced by current scale and MY_BING_MAPS_KEY by my private key. On the device also LATITUDE and LONGTITUDE will be replaced by values reported by Windows Phone 7 location services.

In this quick-and-dirty sample I put the initialization code in Initialize function of XNA game class:

protected override void Initialize()
{
    string requestUri = "";
    WebClient wc = null;

    float currentScale = baseScale * scale * 22;

    // TODO: Add your initialization logic here
    if (Microsoft.Devices.Environment.DeviceType == DeviceType.Device)
    {
        watcher = new GeoCoordinateWatcher(GeoPositionAccuracy.High); // Use high accuracy.
        watcher.MovementThreshold = 20; // Use MovementThreshold to ignore noise in the signal.
        watcher.StatusChanged += (sender, e) =>
        {
            if (e.Status == GeoPositionStatus.Ready)
            {
                mapUpdated = true;
                co = watcher.Position.Location;
                //watcher.Stop(); //Stop to conserve the battery - will disable the movement updates

                requestUri = string.Format("http://dev.virtualearth.net/REST/V1/Imagery/Map/Aerial/{0},{1}/{3}?mapSize=800,480&key={2}", 
                    co.Latitude, co.Longitude, 
                    bingAppKey, currentScale);
                wc = new WebClient();
                wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
                wc.OpenReadAsync(new Uri(requestUri, UriKind.Absolute), "MAP");
            }
        };
        watcher.Start();
    }
    else
    {
        //Get static location (also by lat/long) on emu
        requestUri = "http://dev.virtualearth.net/REST/V1/Imagery/Map/AerialWithLabels/eiffel tower?zoomLevel=" 
            + currentScale.ToString() + "&mapSize=800,480&key=" + bingAppKey;
        wc = new WebClient();
        wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
        wc.OpenReadAsync(new Uri(requestUri, UriKind.Absolute), "MAP");
    }

    //Download avatar anyway
    requestUri = "http://avatar.xboxlive.com/avatar/Dark%20Virus%20ISR/avatar-body.png";
    wc = new WebClient();
    wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
    wc.OpenReadAsync(new Uri(requestUri, UriKind.Absolute), "IMG");

    base.Initialize();
}

The code snippet above check the Environment variable in order to understand where it is being executed.

Note: this is not System.Environment available for all .NET applications, but Microsoft.Device.Environment specific to Windows Phone apps.

If the device is actual device (Windows Phone 7 hardware) the code snippet initializes GeoCoordinateWatcher and subscribes to StatusChanged events. Once the status turns to “Ready”, the code snippet gets current reported location and requests a map image using WebClient. It uses reported Longitude, Latitude and current zoom level; in addition it provides Bing Maps private key.

If the device is emulator (and GeoCoordinateWatcher will never return meaningful value), the code snippet uses WebClient to request a map centered at some landmark – in my case Eiffel Tower.

In both request WebClient passes desired image size 800x480 to match Windows Phone 7 landscape resolution.

Lastly, it uses another instance of WebClient to download my XBOX Live avatar.

Last parameter in all OpenReadAsync calls is a state object I’m using to identify which image is arrived.

Let’s see the wc_OpenReadCompleted method:

void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
    if (e.Error == null)
    {
        if (e.UserState.ToString() == "MAP")
        {
            mapImage = Texture2D.FromStream(graphics.GraphicsDevice, e.Result);
            mapLoaded = true;
            mapUpdated = false;
        }
        else
            playerImage = Texture2D.FromStream(graphics.GraphicsDevice, e.Result);
    }
}

Running the application at the current state produces the following output on the emulator:

and the following at the device:

Note small red rectangle I put on both images – there is a very small scaled avatar inside

Now let’s enable zoom controls. First, I enabled a Tap gesture at the Game constructor:

TouchPanel.EnabledGestures = GestureType.Tap;

Next, at the Update function of the game I checked Available gestures and if available, their positions. I limited the scale between 1 and 22 (supported by Bing Maps) and if scale change detected used WebClient to get new map at desired zoom level:

protected override void Update(GameTime gameTime)
{
    float prevScale = scale;

    // Allows the game to exit
    if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
        this.Exit();

    // TODO: Add your update logic here
    while (TouchPanel.IsGestureAvailable && mapLoaded)
    {
        GestureSample sample = TouchPanel.ReadGesture();

        //Prepare a rectangle around touch position to allow more comfortable touch 
        Rectangle touchPosition = new Rectangle((int)sample.Position.X - 5, 
                                                (int)sample.Position.Y - 5,
                                                10, 10);

        //Prepare a rectange from ZoomIn texture and on-screen position
        Rectangle zoomInRect = new Rectangle((int)zoomInPosition.X, (int)zoomInPosition.Y,
                                                zoominImage.Width, zoominImage.Height);

        //Prepare a rectange from ZoomOut texture and on-screen position
        Rectangle zoomOutRect = new Rectangle((int)zoomOutPosition.X, (int)zoomOutPosition.Y,
                                zoomoutImage.Width, zoomoutImage.Height);

        //Check Touch and zoom rectangles intersection
        if (touchPosition.Intersects(zoomInRect))
            scale += 1;
        else if (touchPosition.Intersects(zoomOutRect))
            scale -= 1;

        //Limit the result between 1 and 22 (scale values supported by Bing Maps
        scale = MathHelper.Clamp(scale, 1, 22);
    }

    if (prevScale != scale)
    {
        string requestUri = "";
        WebClient wc = null;

        float currentScale = baseScale * scale * 22;

        if (Microsoft.Devices.Environment.DeviceType == DeviceType.Device)
            requestUri = string.Format("http://dev.virtualearth.net/REST/V1/Imagery/Map/Aerial/{0},{1}/{3}?mapSize=800,480&key={2}", 
                co.Latitude, co.Longitude, bingAppKey, currentScale);
        else
            //Get static location (also by lat/long) on emu
            requestUri = "http://dev.virtualearth.net/REST/V1/Imagery/Map/AerialWithLabels/eiffel tower?zoomLevel=" 
                + currentScale.ToString() + "&mapSize=800,480&key=" + bingAppKey;

        wc = new WebClient();
        wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
        wc.OpenReadAsync(new Uri(requestUri, UriKind.Absolute), "MAP");
        mapUpdated = true;
    }

    base.Update(gameTime);
}

Now when running the application on the device touching Zoom In/Out buttons produces the following results:

Note: in this image the next map image is still downloading…

and on the emulator:

From here the process is simple: add some real game logic, animations, some Bing Maps pushpins (using sample Bing Maps APIs), respond to drag/pinch gestures and voila – the XNA game for Windows Phone 7 with Bing Maps integrated is ready!

Completed sample hosted here. Note: you will need a Bing Maps Application Key to run it.

To see more of XNA 4.0 with Windows Phone 7, PC and Xbox 360 visit my session “XNA Studio 4.0: Code Once, Play Everywhere! PC, Xbox, Phone” at TechEd 2010 Israel/Development Tools & Technologies track. In this session you will see how to build the real world computer games running on all platforms together!

Stay tuned for more come!

Enjoy,

Alex

Silverlight 4 Tutorial @SDP

Alex Golesh — Mon, 28 Dec 2009 13:06:03 GMT

My Silverlight 4 Tutorial day at SDP is over. I’d like to thank all participants!!!

As promised, here is source of application I’ve build during the session.

Additional samples here and here.

Labs could be found here.

See you at Silverlight 4 session tomorrow :)

Alex

Silverlight Quick Tip: Dynamically Updating Class Fields/Properties

Alex Golesh — Thu, 27 Aug 2009 15:03:30 GMT

In previous post (here) I blogged about displaying values of class/control in runtime and displaying them in Visual Studio - like property window. Today I’ll show how to push them back to the class instance.

In previous post I’ve stored values in “ObservableCollection<FieldsPropertiesData>” for easy databinding and connected this ListBox control. In order to get user input I’ve created TwoWay databinding in DataTemplate – here is updated data template:

<Style TargetType="local:FiledPropertyData">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="local:FiledPropertyData">
        <Grid ToolTipService.Placement="Mouse" Width="{TemplateBinding Width}">
          <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
          </Grid.ColumnDefinitions>
          <TextBlock Text="{Binding DisplayName}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,0,10,0"/>
          <TextBox Text="{Binding FieldValue, Mode=TwoWay}" VerticalAlignment="Center" HorizontalAlignment="Right" 
                   IsEnabled="{Binding IsReadOnly, Converter={StaticResource boolToEnabledConverter}}" Grid.Column="1"/>
          <ToolTipService.ToolTip>
            <ToolTip Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Padding="0" Margin="5">
              <ToolTip.Content>
                <Border Background="PaleGoldenrod" BorderBrush="Black" BorderThickness="2" CornerRadius="5" Padding="5" Margin="0">
                  <TextBlock Text="{Binding Description}"/>
                </Border>
              </ToolTip.Content>
            </ToolTip>
          </ToolTipService.ToolTip>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Now at the setter of the “FieldValue” property all I need is to push it back to the instance.

I’ve create function, which accepts FieldName, FieldType (from data already exits in the file from the loading) and new value:

private static void SetFieldValue(string FieldName, Type FieldType, object TheValue)
{
  Assembly asm = Assembly.GetExecutingAssembly();
  Type type = asm.GetType("SAMPLE_TYPE_TO_UPDATE");
  FieldInfo[] fields = type.GetFields(BindingFlags.Static | BindingFlags.Instance | BindingFlags.Public);

  var fieldInfo = from field in fields
                  where field.FieldType == FieldType && field.Name == FieldName
                  select field;

  FieldInfo theField = fieldInfo.FirstOrDefault();
  if (null != theField)
    if (value.GetType() == FieldType)
      theField.SetValue(if (theField.IsStatic) ? null : TheInstance, TheValue);
    else //In case of value changed by databinding in most cases ToString() result will be here, 
         //hence need to convert
      theField.SetValue(if (theField.IsStatic) ? null : TheInstance, Convert.ChangeType(TheValue, FieldType, null));

  fieldInfo = null;
  fields = null;
  type = null;
  asm = null;
}

That’s it… Now the data dynamically displayed, updated by user and pushed back to the instance of the object.

Enjoy,

Alex

Silverlight Quick Tip: Dynamically Displaying Class Fields/Properties

Alex Golesh — Thu, 13 Aug 2009 19:21:25 GMT

In one of my projects I had to create something like Visual Studio property window, for data set of different controls/data classes. Those controls/classes are still under development and I needed the way to display/change values of those properties dynamically without even knowing what is inside.

For the simple case, let’s assume the following class which holds the data:

public class SampleData
{
  public SampleData()
  {
    BooleanProperty = false;
  }

  public string StringProperty { get; set; }
  public bool BooleanProperty { get; set; }
  public Button ButtonProperty { get; set; }
  public static double StaticDoubleFiled = 123;
  public static string StaticStringFiled = "This is static field";
  public int IntFiled = 345;
  public string StringFiled = "This is non static field";
  public float FloatProperty = 456.0f;
}

The class fields/properties should be displayed dynamically. I decided to create an attribute to decorate the relevant fields/properties and then get the values/metadata from attributes on-the-fly via reflection.

So here is a sample attribute I’ve create for this:

[AttributeUsage(AttributeTargets.Field | AttributeTargets.Property, Inherited = false, AllowMultiple = false)]
internal sealed class PropertyFieldDescriptionAttribute : Attribute
{

  #region .ctor
  public PropertyFieldDescriptionAttribute(string DisplayName)
  {
    this.displayName = DisplayName;
    this.IsReadOnly = false;
  }
  #endregion

  #region Public proerties
  public string DisplayName
  {
    get { return displayName; }
  }

  public string Description { get; set; }
  public string DefaultValue { get; set; }
  public bool IsReadOnly { get; set; }
  #endregion

  #region Private variables
  readonly string displayName;
  #endregion
}

And decorated fields/properties with the attribute (partial code):

[PropertyFieldDescription("Sample String Property", Description="This is sample string property")]
public string StringProperty { get; set; }

[PropertyFieldDescription("Sample Boolean Property", Description = "This is sample boolean property", DefaultValue="false")]
public bool BooleanProperty { get; set; }

[PropertyFieldDescription("Sample Button Property", Description = "This is sample button property")]
public Button ButtonProperty { get; set; }

From here everything were pretty straight forward – sample code for getting fields information:

FieldInfo[] fields = type.GetFields(BindingFlags.Static | BindingFlags.Instance | BindingFlags.Public);

if (fields.Length > 0)
{
  foreach (var field in fields)
  {
    PropertyFieldDescriptionAttribute[] attribs = (PropertyFieldDescriptionAttribute[])field.GetCustomAttributes(
                                                      typeof(PropertyFieldDescriptionAttribute), false);

    if (attribs.Length == 1) //Each valid property in this sample case should have only 1(!) such attribute
    {
      //Define data class to hold it
      FieldsPropertiesData constant = new FieldsPropertiesData(field.Name, field.FieldType);
      if (field.IsStatic)
        constant.FiledValue = field.GetValue(null);
      else
        constant.FiledValue = field.GetValue(instance);
      constant.DefaultValue = attribs[0].DefaultValue;
      constant.Description = attribs[0].Description;
      constant.DisplayName = attribs[0].DisplayName;
      constant.ReadOnly = attribs[0].IsReadOnly;
      //add to collection, which will be databoud to the screen
      constants.Add(constant);
    }
  }
}

and almost the same function for the properties.

The results I stored in “ObservableCollection<FieldsPropertiesData>” for easy data binding.

The FieldsPropertiesData of mine is like follows:

public class FieldsPropertiesData
{
  #region .ctor
  public FieldsPropertiesData(string FiledName, Type FieldType)
  {
    this.FieldName = FieldName;
    this.FieldType = FieldType;
  }

  #endregion

  #region Public properties
  public object FiledValue { get; set; }
  public Type FieldType { get; private set; }
  public string FieldName { get; private set; }
  public string DisplayName { get; set; }
  public string Description { get; set; }
  public string DefaultValue { get; set; }
  public bool ReadOnly { get; set; }
  #endregion
}

I’ve created 2 simple custom controls – one to serve as a grid for my properties grid, and another to hold data item

The Grid:

[TemplatePart(Name="lst", Type=typeof(ListBox))]
public class FieldsPropertiesGrid : Control
{
  public FieldsPropertiesGrid()
  {
    this.DefaultStyleKey = typeof(FieldsPropertiesGrid);
  }

  public ObservableCollection<FieldsPropertiesData> Data
  {
    get { return (ObservableCollection<FieldsPropertiesData>)GetValue(DataProperty); }
    set { SetValue(DataProperty, value); }
  }

  // Using a DependencyProperty as the backing store for Data.  This enables animation, styling, binding, etc...
  public static readonly DependencyProperty DataProperty =
      DependencyProperty.Register("Data", typeof(ObservableCollection<FieldsPropertiesData>), typeof(FieldsPropertiesGrid), null);

  public override void  OnApplyTemplate()
  {
       base.OnApplyTemplate();

    ListBox lst = GetTemplateChild("lst") as ListBox;
    lst.DataContext = this;
  }
}

The DataItem (partial):

public class FiledPropertyData : Control
{
  public FiledPropertyData()
  {
    this.DefaultStyleKey = typeof(FiledPropertyData);
  }


  public bool IsReadOnly
  {
    get { return (bool)GetValue(IsReadOnlyProperty); }
    set { SetValue(IsReadOnlyProperty, value); }
  }

  // Using a DependencyProperty as the backing store for IsReadOnly.  This enables animation, styling, binding, etc...
  public static readonly DependencyProperty IsReadOnlyProperty =
      DependencyProperty.Register("IsReadOnly", typeof(bool), typeof(FiledPropertyData), null);

  public string DefaultValue
  {
    get { return (string)GetValue(DefaultValueProperty); }
    set { SetValue(DefaultValueProperty, value); }
  }

  // And following depenedency properties: DefaultValue, Description, DisplayName, etc.
  // ... 
}

The default template for the controls:

<Style TargetType="local:FieldsPropertiesGrid">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="local:FieldsPropertiesGrid">
        <Border Background="{TemplateBinding Background}"
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}">
          <ListBox x:Name="lst" ItemsSource="{Binding Data}">
            <ListBox.ItemTemplate>
              <DataTemplate>
                <local:FiledPropertyData Margin="0,2.5"/>
              </DataTemplate>
            </ListBox.ItemTemplate>
          </ListBox>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style TargetType="local:FiledPropertyData">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="local:FiledPropertyData">
        <Grid ToolTipService.Placement="Mouse" Width="{TemplateBinding Width}">
          <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
          </Grid.ColumnDefinitions>
          <TextBlock Text="{Binding DisplayName}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,0,10,0"/>
          <TextBox Text="{Binding DefaultValue}" VerticalAlignment="Center" HorizontalAlignment="Right" IsEnabled="{Binding IsReadOnly, Converter={StaticResource boolToEnabledConverter}}" Grid.Column="1"/>
          <ToolTipService.ToolTip>
            <ToolTip Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Padding="0" Margin="5">
              <ToolTip.Content>
                <Border Background="PaleGoldenrod" BorderBrush="Black" BorderThickness="2" CornerRadius="5" Padding="5" Margin="0">
                  <TextBlock Text="{Binding Description}"/>
                </Border>
              </ToolTip.Content>
            </ToolTip>
          </ToolTipService.ToolTip>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

The sample page creates an instance of SampleData class, and displays attributed the properties/fields in the fields grid:

<Grid x:Name="LayoutRoot" Background="White">
  <Grid.Resources>
    <local:PropetiesConverter x:Key="propertiesConverter"/>
    <Button x:Key="theSampleButton" Content="Sample Button" Width="100" Height="25"/>
    <local:SampleData x:Key="theSampleData" BooleanProperty="True" StringProperty="Test String" 
                                            ButtonProperty="{StaticResource theSampleButton}"/>
  </Grid.Resources>
  <local:FieldsPropertiesGrid x:Name="propGrid" Data="{Binding Source={StaticResource theSampleData}, 
                                                               Converter={StaticResource propertiesConverter}}"/>
</Grid>

The last thing here is the converter which get’s the instance and returns the ObservableCollection with properties/fields info:

public class PropetiesConverter : IValueConverter
{
  #region IValueConverter Members

  public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
    Type destType = value.GetType();
    ObservableCollection<FieldsPropertiesData> props = ReflectionHelper<SampleData>.GetProperties((SampleData)value);

    return props;
  }

  public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
    throw new NotImplementedException();
  }

  #endregion
}

That’s it – not any type with known attributes will be displayed in the Properties Grid:

If adding new Field/Property with the attribute it will be shown next time the Properties grid displayed:

[PropertyFieldDescription("Additional String Field", Description = "This is additional sample string field", 
                                                     DefaultValue = "Test Value")]
public string AdditionaStringProperty = "New Value";

The source code here.

Running sample here.

Enjoy,

Alex

Silverlight 3: Hebrew and Arabic Support

Alex Golesh — Fri, 10 Jul 2009 14:36:10 GMT

Since I’m constantly getting many questions about Hebrew and Arabic support and also huge amount of requests to provide/support it, I’ve updated the SilverlightRTL project at codeplex to support Silverlight 3.

The project homepage here.

Latest release for Silverlight 3 RTW is here.

The updated source also includes sample application to demonstrate Bidi controls usage and comparison with standard core controls with Hebrew and Arabic:

Enjoy,

Alex

Silverlight 3 Quick Tip #6: Navigation Framework and Uri Routing

Alex Golesh — Thu, 02 Apr 2009 18:44:14 GMT

Silverlight 3 introduced the Navigation Framework and URI Routing features. Today I’ll show how to use those features.

To use navigation features you could either create a new “Silverlight Navigation Application” or simply add relevant references to standard “Silverlight application”

In case of standard “Silverlight Application” you need to add reference to “System.Windows.Controls.Navigation” assembly and relevant XAML introduce namespace:

xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

To use the navigation feature, simply add new Frame to your XAML page. Frame could have default content, specify Journal usage (own history storage or integration within browser’s history), raise navigation related events.

<navigation:Frame x:Name="frame" Source="/Pages/DefaultPage.xaml"
                      HorizontalContentAlignment="Stretch"
                      VerticalContentAlignment="Stretch"
                      Padding="15,10,15,10"
                      Margin="5,0"
                      Background="White">
  <TextBlock Text="This is default content for the navigation frame" FontFamily="Times New Roman" FontSize="25"/>
</navigation:Frame>

To navigate to new page use “Navigate” function of Frame object:

frame.Navigate(new Uri(“/Pages/Page1.xaml”, UriKind.Relative));

Navigation could be done to class instances derived from “System.Windows.Controls.Page” class. The simplest way to create such a class (and XAML) is by adding to the project new item from “Silverlight Page” type:

In addition to navigation, the Frame provides functionality to navigate Forward/Backward according to own/browsing history. Sample “Next”/“Previous” button handlers:

private void btnNext_Click(object sender, RoutedEventArgs e)
{
  if (frame.CanGoForward)
    frame.GoForward();
}

private void btnPrev_Click(object sender, RoutedEventArgs e)
{
  if (frame.CanGoBack)
    frame.GoBack();
}

The history definition for the frame defined by JournalOwnership dependency property:

Automatic [default]	Whether or not this Frame will create and use its own journal depends on its parent
OwnsJournal	The Frame maintains its own journal
UsesParentJournal	The Frame uses the journal of the next available navigation host up the content tree, if available. Otherwise, navigation history is not maintained for the Frame

To raise navigation related events subscribe to themNext:

//This event will be fired when frame is already navigated
this.frame.Navigated += new NavigatedEventHandler(frame_Navigated);
//This event will be fired when frame is navigating
this.frame.Navigating += new NavigatingCancelEventHandler(frame_Navigating);
//This event will be fired when navigation error occurs
this.frame.NavigationFailed += new NavigationFailedEventHandler(frame_NavigationFailed);

By using this Navigation Framework features you could implement deep linking support by URI Routing feature. To use this feature you need to create the UriMapper in application resources. To do so first you need to introduce a namespace in your App.XAML:

xmlns:navcore="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"

Then create the UriMapper as a part of application resources:

<Application.Resources>
  <navcore:UriMapper x:Key="uriMapper">
    <navcore:UriMapping Uri="Home" MappedUri="/Pages/DefaultPage.xaml"/>
    <navcore:UriMapping Uri="Link{number}" MappedUri="/Pages/Page{number}.xaml"/>
    <navcore:UriMapping Uri="Page/{number}" MappedUri="/Pages/Page{number}.xaml"/>
    <navcore:UriMapping Uri="Customers/{id}" MappedUri="/Pages/Page1.xaml?action=getCustomer&amp;id={id}"/>
    <navcore:UriMapping Uri="Products/{id}" MappedUri="/Pages/Page1.xaml?action=getProduct&amp;id={id}"/>
    <navcore:UriMapping Uri="Stories/{id}&amp;{number}" MappedUri="/Pages/Page1.xaml?action={id}&amp;page={number}"/>
  </navcore:UriMapper>
</Application.Resources>

In Beta 1 build the Uri Mapper must have “uriMapper” name, otherwise it will not work.

In my case the mapping is very straightforward:

Uri	Target + Description
Home	/Pages/DefaultPage.xaml
Link{number}	/Pages/Page{number}.xaml –-> use {number} as variable received from navigation input
Page/{number}	/Pages/Page{number}.xaml –-> use {number} as variable received from navigation input
Customers/{id}	/Pages/Page1.xaml?action=getCustomer&id={id} –-> use {id} as part of Query String
Products/{id}	/Pages/Page1.xaml?action=getProduct&id={id} –-> use {id} as part of Query String
Stories/{id}&{number}	/Pages/Page1.xaml?action={id}&page={number} –> use {id} and {number} in Query String. You could introduce as many, as you need.

When navigating, the navigating URI becomes something much more readable (and SEO):

The passed query string parameters could be used on specific page from NavigationContext. While creating new “Silverlight Page” visual studio also creates override function “OnNavigatedTo” which being executed right after navigation to the page:

// Executes when the user navigates to this page.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
  if (this.NavigationContext.QueryString.ContainsKey("action"))
  {

    switch (this.NavigationContext.QueryString["action"])
    {
      case "getCustomer":
        txtOutput.Text = "This is DUMMY info CustomerID = " + this.NavigationContext.QueryString["id"];
        break;
      case "getProduct":
        txtOutput.Text = "This is DUMMY info ProductID = " + this.NavigationContext.QueryString["id"];
        break;
      default:
        txtOutput.Text = "This is DUMMY story saved in my sources with ID = " 
          + this.NavigationContext.QueryString["action"] + " opened on page #" 
          + this.NavigationContext.QueryString["page"];
        break;
    }
  }
}

That’s it for today.

Sample application sources is here.

Enjoy,

Alex

Silverlight 3 Quick Tip #3: Creating custom easing for Silverlight animations

Alex Golesh — Thu, 19 Mar 2009 05:15:17 GMT

This time I’ll show how to use new easing functions for animations. In Silverlight 3 we could apply one of existing easing functions to our animation (storyboard) or create our own.

First, let’s apply existing easing function.

On my sample page I have a bunch of buttons to control UI, a stack panel with some path that looks like a spring and a ball attached to it. Also I created a storyboard to animate the Width property:

<StackPanel x:Name="LayoutRoot" Background="LightGray">

    <StackPanel.Resources>

        <BeginStoryboard x:Name="sb1">

            <Storyboard >

                <DoubleAnimation x:Name="springAnim" RepeatBehavior="Forever" AutoReverse="True" Duration="0:0:3"

                             From="50" To="300" Storyboard.TargetName="spring" Storyboard.TargetProperty="Width"/>

            </Storyboard>

        </BeginStoryboard>

    </StackPanel.Resources>

    <StackPanel Orientation="Horizontal">

        <Button x:Name="btnAnimate" Content="No Ease" Click="btnAnimate_Click_1"  Width="100" Height="25" Margin="10"/>

        <Button x:Name="btnAnimate1" Content="Predefined Ease" Click="btnAnimate_Click" Width="100" Height="25" Margin="10"/>

        <Button x:Name="btnAnimate2" Content="Custom Ease" Click="btnAnimate2_Click"  Width="100" Height="25" Margin="10"/>

    </StackPanel>

    <StackPanel Orientation="Horizontal">

        <Path x:Name="spring" Width="100" Fill="Transparent" Stretch="Fill" Stroke="Black" StrokeThickness="2" Data="M49,306 L75,266 L91.5,303.5 L116.70348,265.5 L132.89345,300.56708 L151.9158,268.95731 L165.57288,297.60367 L175.32793,282.78659 L183.58783,281.79877" RenderTransformOrigin="0.5,0" VerticalAlignment="Center" HorizontalAlignment="Left" >

            <Path.RenderTransform>

                <TransformGroup>

                    <ScaleTransform/>

                </TransformGroup>

            </Path.RenderTransform>

        </Path>

        <Ellipse x:Name="ball" Width="30" Height="30" Fill="Red" HorizontalAlignment="Left" VerticalAlignment="Center"/>

    </StackPanel>

</StackPanel>

Now let’s see the the code behind those buttons…

No ease is simple – just assign NULL to easing function property of the storyboard:

private void btnAnimate_Click_1(object sender, RoutedEventArgs e)

    springAnim.EasingFunction = null;

Using existing easing is also very simple task – just select one on existing ease function in System.Windows.Media.Animiation namespace, tweak the function parameters (optional) and assign it as EasingFunction of the storyboard:

private void btnAnimate_Click(object sender, RoutedEventArgs e)

  ElasticEase ease = new ElasticEase();

  ease.EasingMode = EasingMode.EaseOut;

  ease.Springiness = 5;

  ease.Oscillations = 10;

  springAnim.EasingFunction = ease;

Now the interesting one – I’ll create my simple easing function. To do it, I have to create a new class, which derives from EasingFunctionBase class (the base class in from System.Windows.Media.Animiation namespace):

public class CustomSquareRootEase : EasingFunctionBase

  public CustomSquareRootEase()

    : base()

  protected override double EaseInCore(double normalizedTime)

    return Math.Sqrt(normalizedTime);

My math was very simple, but still not standard easing. Now the usage of this one is exactly like any other existing easing function:

private void btnAnimate2_Click(object sender, RoutedEventArgs e)

 springAnim.EasingFunction = new CustomSquareRootEase();

Sample code is here.

Stay tuned to more tips and enjoy,

Alex

Silverlight 2 Metro Training Event in Mumbai

Alex Golesh — Thu, 26 Feb 2009 16:16:00 GMT

I’m doing a Silverlight 2 Training for MS Metro program in Mumbai.

Thanks for all participants in this event. Hope you enjoyed the course as much as I enjoyed doing it.

As promised the selected samples from this event could be found here.

Samples updated…

Thanks and Enjoy the samples

Alex

Silverlight 2 Developer Day – a minute after

Alex Golesh — Wed, 04 Feb 2009 19:24:18 GMT

Thank you all, who participated today at Silverlight 2 Developer Day (Microsoft Israel offices). I uploaded printouts of the slides, presented during the session and the demo code so you can download it for a reference.

I’m really interesting within your feedback (leave comments) in order for me to be able to enhance it for future events.

PowerPoint printouts here:

Demo project sources here.

Thanks and hope to see you again next time!

Alex

Silverlight in the Mesh and the “Cloud” – Hosted Service and Blob Storage (Part 2)

Alex Golesh — Thu, 15 Jan 2009 21:43:07 GMT

Hello. As I promised here I’m starting to describe my experiences in creating Silverlight Mesh Enabled Web Application (MEWA or SMEWA) with Cloud Hosted Services and Cloud Storage.

Today I’ll talk about creating the storage and supported hosted services.

First of all I needed to be a part of Windows Azure CTP and have at least 1 Storage account (to have persistent and non-persistent storage in Windows Azure) and at least 1 Hosted Services account (environment that provides the hosting and management service for cloud based applications).

To get such account(s) one should apply for them via Microsoft Connect site.

After getting invitation to this program from Microsoft Connect you could go to Azure Services Developer Portal, claim received tokens, download and install Windows Azure SDK and Windows Azure Tools Visual Studio and start creating cloud based applications. One small note here – those tools doesn’t support Windows 7 Beta right now, so it will not work there.

Once all setup done, we could go to Azure Services Developer Portal and create a new project:

I created 1 for Storage

(Endpoints are gateways that I could use from anywhere when accessing my storage account, and pair of key access is to secure my connection.)

Another project was created for Hosted Services

You could have 2 projects simultaneously running at the cloud – one for testing/debugging online and one as a real production service. The URL for the service in Staging will change every time you will re-deploy the new version of the service, thus you have to reconfigure your applications which will work with those services externally.

Now back to my “Cloud Store”. I decided to provide access to my cloud storage via Web Services and those web services will be in my Host Services Project.

After installing Windows Azure Tools for Visual Studio you will get new project templates:

For my purposes I’ve created Web Cloud Service. In my service I’ve added 2 new web services – one which will be used by Content Management UI SMEWA, and one by Content Consumer UI SMEWA. I wish I had more Hosted Services projects allocated to use different projects for each application, but I haven’t. Also, I could use the same service for both applications but I wanted the whole thing to me close to the real world architecture.

When you creating such a project Visual Studio will create 2 projects in the solution – ASP.NET Web Application and the Web Cloud Service Project:

In my case I’ve also added 2 exiting projects from Windows Azure SDK Samples (Common and Storage Client) which will handle for me all communications with the blob.

Now to the interesting part. Lets see how to work with the blob storage. Most of the “real mesh code” was taken from PCD demos and samples from Windows Azure SDK so if you need more info you know where to find it.

Let’s see the FileUpload WebMethod as an example:

[WebMethod]

public bool UploadFile(string fileName, string contentType ,byte[] f)

  //Assume success - its good to be optmistic :)

  bool bRes = true;

try

    // Get the configuration from the cscfg(cloud service configuration) file

    StorageAccountInfo accountInfo = StorageAccountInfo.GetDefaultBlobStorageAccountFromConfiguration();

    // Container names have the same restrictions as DNS names

    BlobStorage blobStorage = BlobStorage.Create(accountInfo);

    _Container = blobStorage.GetBlobContainer(RoleManager.GetConfigurationSetting("ContainerName"));

    // returns false if the container already exists, ignore for now

    // Make the container public so that we can hit the URLs from the web

    _Container.CreateContainer(new NameValueCollection(), ContainerAccessControl.Public);

    BlobProperties properties = new BlobProperties(Guid.NewGuid().ToString());

    // Create metadata to be associated with the blob

    NameValueCollection metadata = new NameValueCollection();

    metadata["FileName"] = fileName;

    properties.Metadata = metadata;

    properties.ContentType = contentType;

    // Create the blob

    BlobContents fileBlob = new BlobContents(f);

    _Container.CreateBlob(properties, fileBlob, true);

  catch (WebException webExcept)

    bRes = false;

    if (webExcept.Status == WebExceptionStatus.ConnectFailure)

      System.Diagnostics.Debug.WriteLine("Failed to connect to the Blob Storage Service, make sure it is running: " + webExcept.Message);

    else

      System.Diagnostics.Debug.WriteLine("Error creating container: " + webExcept.Message);

  catch (Exception ex)

    bRes = false;

    System.Diagnostics.Debug.WriteLine(ex.Message);

  return bRes;

The code itself is pretty easy – create or get blob container, fill new blob properties and metadata and the create new blob to the container.

Same goes for DeleteFile WebMethod

[WebMethod]

public bool DeleteFile(string fileName)

  bool bRes = true;

  // Get the configuration from the cscfg file

  StorageAccountInfo accountInfo = StorageAccountInfo.GetDefaultBlobStorageAccountFromConfiguration();

  // Container names have the same restrictions as DNS names

  BlobStorage blobStorage = BlobStorage.Create(accountInfo);

  _Container = blobStorage.GetBlobContainer(RoleManager.GetConfigurationSetting("ContainerName"));

  //Check if desired blob exists, and if it does - delete it

  if (_Container.DoesBlobExist(fileName))

    bRes = _Container.DeleteBlob(fileName);

  return bRes;

Last, but not least is I want to able to show blob contents in my management SMEWA, so I created GetFiles WebMethod

[WebMethod]

public List<ContentEntry> GetFiles()

  // Get the configuration from the cscfg file

  StorageAccountInfo accountInfo = StorageAccountInfo.GetDefaultBlobStorageAccountFromConfiguration();

  // Container names have the same restrictions as DNS names

  BlobStorage blobStorage = BlobStorage.Create(accountInfo);

  _Container = blobStorage.GetBlobContainer(RoleManager.GetConfigurationSetting("ContainerName"));

  //Get blobs in my account

  IEnumerable<object> blobs = _Container.ListBlobs(string.Empty, false);

  List<ContentEntry> filesList = new List<ContentEntry>();

  foreach (object o in blobs)

    BlobProperties bp = o as BlobProperties;

    if (bp != null)

      //Get current blob properties

      BlobProperties p = _Container.GetBlobProperties(bp.Name);

      NameValueCollection fileEntryProperties = p.Metadata;

      //Create data container which will return relevan information to the client

      filesList.Add(new ContentEntry() { BlobName = p.Name, FileUri = bp.Uri.ToString(), FileName = fileEntryProperties["FileName"], Submitter = "ALEX" });

  return filesList;

The ContentEntry class itself is pretty simple also:

public class ContentEntry

  public ContentEntry()

  public ContentEntry(string blobName, string fileAddress, string name, string user)

      BlobName = blobName;

      FileUri = fileAddress;

      FileName = name;

      Submitter = user;

  public string FileUri { get; set; }

  public string BlobName { get; set; }

  public string FileName { get; set; }

  public string Submitter { get; set; }

After doing all that, I had to configure my service to work with local development storage. Configuration settings for cloud services defined in file named “ServiceDefinition.csdef”. In my case it is like follows:

<ServiceDefinition name="StoreBusinessTier" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceDefinition">

  <WebRole name="WebRole">

    <InputEndpoints>

      <!-- Must use port 80 for http and port 443 for https when running in the cloud -->

      <InputEndpoint name="HttpIn" protocol="http" port="80" />

    </InputEndpoints>

    <ConfigurationSettings>

      <Setting name="AccountName"/>

      <Setting name="AccountSharedKey"/>

      <Setting name="BlobStorageEndpoint"/>

      <Setting name="ContainerName"/>

    </ConfigurationSettings>

  </WebRole>

</ServiceDefinition>

And the actual values for those configuration settings are in “ServiceConfiguration.cscfg” file:

<ServiceConfiguration serviceName="StoreBusinessTier" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceConfiguration">

  <Role name="WebRole">

    <Instances count="1"/>

    <ConfigurationSettings>

      <!--Local Develoment Storage Account Settings-->

      <Setting name="AccountName" value="devstoreaccount1"/>

      <Setting name="AccountSharedKey" value="Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw=="/>

      <Setting name="BlobStorageEndpoint" value="http://127.0.0.1:10000/"/>

      <!--Real Cloud Storage Settings-->

      <!--<Setting name="AccountName" value="STORAGE_PROJECT_NAME"/>

      <Setting name="AccountSharedKey" value="PRIMARY_ACCESS_KEY"/>

      <Setting name="BlobStorageEndpoint" value="https://blob.core.windows.net"/>-->

      <Setting name="ContainerName" value="files"/>

    </ConfigurationSettings>

  </Role>

</ServiceConfiguration>

Compiling an executing the application will bring Developer Storage

and the Development Fabric

and finally IE with standard ASP.NET Web Application debugging experience. In my case the WebService was a start-up file, so I’ve got this:

My second web service has pretty simple functionality – Listing the exiting files and getting the specific file content:

GetFile WebMethod should return me the list of files (like FileHandler web service) – I thought I could even use the one from FileHandler… I thought so, but it will not work – will see why in last part.

GetFile WebMethod should return me the contents of the selected file (byes[] or Stream or something) – pretty easy task… Hm… This one was actually not trivial as it turns out – will see why also in last part.

Last thing I did after checking this service locally with some tester application I’ve deployed this service to the cloud and started to work on my SMEWA:

Stay tuned for the next part.

This part will connect the two worlds which are very close, but somehow not connected until now - I will show how to create management SMEWA and use Azure Storage (blob) and Azure Hosted Services (I just created here) to save the data from Live Mesh Application to the Windows Azure Storage.

Enjoy,

Alex

Silverlight in the Mesh and the “Cloud” – Introduction/Teaser (Part 1)

Alex Golesh — Wed, 14 Jan 2009 17:47:24 GMT

Hello,

For quite some time I’m investigating the Azure Services and Live Framework. After gaining some experience, I decided to build simple project - Content Store – to share with you how to build the next generation of applications.

My “Cloud Store” project will use Windows Azure Storage Account to persist content at the cloud, will use Windows Azure Hosted Services as business logic provider (submit contents to the store, display the contents and “purchase” it). Also, my project will use Live Framework Mesh Silverlight applications to provide UI for content submitters and content viewers/buyers.

Schematically my project looks like follows:

The store itself will be pretty simple – not the real store with security restrictions, money transactions, etc. – to keep the project as simple as possible. In my “ideal” world everyone will be able to submit content, and everyone will be able to “purchase” content for free :)

Along with it, it will include the demos about how to work with storage account (blobs and possibly tables), how to create/consume hosted services, how to create Mesh applications and consume hosted services from there. Also it will show how to create mesh objects to store purchased content at users Live desktop (at the mesh).

All parts will be accompanied with sources, but to use the sources you will need to have access to Azure Services Developer Portal and have an ability to create a new projects. At the current stage you have to be a member of CTP to do it.

Stay tuned for next parts really soon.

Enjoy,

Alex

Silverlight Tip: Dynamic animations

Alex Golesh — Tue, 06 Jan 2009 19:19:03 GMT

Hello,

I was asked about creation of animations dynamically for various elements. Today I’ll show how to create such animations for any (almost) Silverlight element. I’ll create some of popular standard PowerPoint animations.

I know that it is not the full set of animations available in PowerPoint, also the animations itself are probably not perfect but it is a good starting point to those who want to know how to do it.

Generally, to create the animation on-the-fly we need to create a storyboard, add one or more animations to it, add the created storyboard to resources of our container and run it.

For this sample I’ve created function, which will receive Target Element, new storyboard name and some animation definitions. The function will add created storyboard to topmost parent element resources.

private void CreateAnimation(FrameworkElement targetElement,

                             string StoryboardName,

                             AnimationSpeed StoryboardDuration,

                             AnimationType type,

                             AnimationDirection direction)

    //...

Also, I’ve created a couple Enums to define animation

private enum AnimationType

      FlyIn,

      FlyOut,

      FadeIn,

      FadeOut

private enum AnimationDirection

     Top,

     Bottom,

     Right,

     Left,

     TopLeft,

     TopRight,

     BottomLeft,

     BottomRight,

     None

private enum AnimationSpeed

     ExtremlySlow = 10000,

     VerySlow = 5000,

     Slow = 3000,

     Normal = 1000,

     Fast = 500,

     VeryFast = 250,

     ExtrimlyFast = 100

In my “CreateAnimation” function I did the following:

1. Prepared TransformGroup with all possible Transforms for my desired element

private FrameworkElement prepareTransformGroup(FrameworkElement targetElement, Point transformOrigin)

  targetElement.RenderTransform = new TransformGroup();

  (targetElement.RenderTransform as TransformGroup).Children.Add(new ScaleTransform());

  (targetElement.RenderTransform as TransformGroup).Children.Add(new SkewTransform());

  (targetElement.RenderTransform as TransformGroup).Children.Add(new RotateTransform());

  (targetElement.RenderTransform as TransformGroup).Children.Add(new TranslateTransform());

  targetElement.RenderTransformOrigin = transformOrigin;

  return targetElement;

2. Created new Duration object (based on received parameter) and Storyboard object

Duration duration = new Duration(TimeSpan.FromMilliseconds((double)StoryboardDuration));

Storyboard sb = new Storyboard();

sb.Duration = duration;

3. Then, based on direction, created animations (will see one of them – in my case other will be almost identical)

DoubleAnimation animX = new DoubleAnimation();

animX.Duration = duration;

FrameworkElement parent = GetParent(targetElement);

if (type == AnimationType.FlyIn)

  animX.From = parent.ActualWidth * -SCALE_FACTOR;

else

  animX.To = parent.ActualWidth * -SCALE_FACTOR;

animX.SetValue(Storyboard.TargetNameProperty, targetElement.Name);

Storyboard.SetTargetProperty(animX, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"));

sb.Children.Add(animX);

DoubleAnimation animY = new DoubleAnimation();

animY.Duration = duration;

if (type == AnimationType.FlyIn)

  animY.From = parent.ActualHeight * -SCALE_FACTOR;

else

  animY.To = parent.ActualHeight * -SCALE_FACTOR;

animY.SetValue(Storyboard.TargetNameProperty, targetElement.Name);

Storyboard.SetTargetProperty(animY, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"));

sb.Children.Add(animY);

4. Added created storyboard to topmost parent

FrameworkElement p = GetParent(targetElement);

p.Resources.Add(StoryboardName, sb);

5.GetParent function recursively traverses the visual tree until it gets topmost FrameworkElement

private FrameworkElement GetParent(FrameworkElement element)

  if ((element.Parent as FrameworkElement) == null)

    return element;

  else

    return GetParent((element.Parent as FrameworkElement));

Now we can call the “CreateAnimation” and then execute created animation

FrameworkElement elm = someButton;

if (null == ((LayoutRoot.Parent as FrameworkElement).Resources["myDynamicAnimation"] as Storyboard))

    CreateAnimation(elm, "myDynamicAnimation", AnimationSpeed.Fast, AnimationType.FadeIn, AnimationDirection.None);

((LayoutRoot.Parent as FrameworkElement).Resources["myDynamicAnimation"] as Storyboard).Begin();

Here it works…

Dynamic Silverlight Animation

Full sources here.

Enjoy,

Alex

Silverlight Tip: How to Inject and Execute JavaScript Function(s) on-the-fly from Silverlight

Alex Golesh — Thu, 04 Dec 2008 14:18:09 GMT

Today I’ve been asked by colleague how to inject and execute JavaScript functionality from Silverlight application to the HTML DOM of hosting page.

Well, things are pretty easy. First we need to get JavaScript from somewhere. In colleague's case it was an embedded resource, in my sample I’ll use TextBox to accept the script code. Also I’ll accept function name and parameters from UI.

From here we have two approaches: to Eval the function code or to create “Script” element dynamically.

First approach is very straightforward:

string src = txtScript.Text;

HtmlPage.Window.Eval(src);

Second approach is pretty much of the same, but creates a real “Script” block in the document’s body:

HtmlElement Script = HtmlPage.Document.CreateElement("script");

Script.SetAttribute("type", "text/javascript");

Script.SetProperty("text", txtScript.Text);

HtmlPage.Document.DocumentElement.AppendChild(Script);

Now all we have to do is execute the function:

string funcParames = null;

if (txtFunctionParams.Text.Length > 0)

    funcParames = txtFunctionParams.Text;

HtmlPage.Window.Invoke(txtFunctionName.Text, funcParames);

That’s it… Running application here:

Dynamic JavaScript Injection and Execution with Silverlight

Sure this application is pretty simple and unsecure, but this is only a demo and could be enriched with any needed functionality.

Sources here.

p.s. Noam – many thanks for idea ;)

Enjoy,

Alex

Quick Silverlight Tips: Control Reflection, Control Properties Data Binding, Window Title and Status Bar text (IE only)

Alex Golesh — Mon, 01 Dec 2008 14:32:57 GMT

Well it was pretty long time since my last post here… I was busy, mostly doing consulting… Now the pressure is eased of alittle, so I hope to write here more.

During this time I heard a couple of questions from clients which were pretty easy to solve but possibly still not obvious.

My first tip today will be about “how to produce reflection under text box” and “emulate PropertyBinding” (like it worked at WPF)

To produce reflection (in case of TextBox) I built Vertical StackPanel with desired TextBox and TextBlock with applied ScaleTransform.

Here sample XAML:

<StackPanel Orientation="Vertical" Width="300" Height="250" Background="Lavender" >

        <TextBox x:Name="txtTitle" Width="200" Height="35" Text="Test Text" FontSize="20"/>

        <TextBlock x:Name="txtStatus" Width="200" Height="35" Text="Test Text" Margin="0,25" Padding="3,0" FontSize="20">

            <TextBlock.RenderTransform>

                <TransformGroup>

                    <ScaleTransform ScaleY="-1"/>

                </TransformGroup>

            </TextBlock.RenderTransform>

            <TextBlock.Foreground>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="#FF000000" Offset="1"/>

                    <GradientStop Color="#FFFFFFFF" Offset="0"/>

                </LinearGradientBrush>

            </TextBlock.Foreground>

        </TextBlock>

    </StackPanel>

In my case I’ve added some Gradient to TextBlock’s foreground to achieve better reflection effect:

The second part (“property binding emulation”) is slightly harder. To emulate “Property Binding” let’s first see how to bind the TextBox.Text property to the TextBlock.Text property.

I prepared simple class, which in my case will hold single string property and will implement INotifyPropertyChanged.

public class TextData : INotifyPropertyChanged

    string str = "";

    public string Text

      get { return str; }

set

        str = value;

        if (null != PropertyChanged)

          PropertyChanged(this, new PropertyChangedEventArgs("Text"));

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    #endregion

Now I can do TwoWay binding of my TextBox.Text property to this class and also OneWay binding of TextBlock.Text property to the same instance. Here the XAML:

<UserControl.Resources>

    <SilverlightApplication20:TextData x:Key="TextDataDS" d:IsDataSource="True"/>

</UserControl.Resources>

<StackPanel Orientation="Vertical" Width="300" Height="250" Background="Aqua" >

    <TextBox x:Name="txtTitle" Width="150" Height="25" Text="{Binding Mode=TwoWay, Path=Text, Source={StaticResource TextDataDS}}" Margin="5"/>

    <TextBox x:Name="txtStatus" Width="150" Height="25" Text="{Binding Mode=OneWay, Path=Text, Source={StaticResource TextDataDS}}" Margin="5"/>

</StackPanel>

Now the class instance will be updated once user will leave the TextBox (Lost Focus) and it will update the TextBlock:

Good, but client wanted to perform update every key press… Thus I created dependency property from TextData type:

public TextData textValue

      get { return (TextData)GetValue(textValueProperty); }

      set { SetValue(textValueProperty, value); }

public static readonly DependencyProperty textValueProperty =

    DependencyProperty.Register("textValue", typeof(TextData), typeof(Page), null);

In control’s constructor set it to be a DataContext and subscribed to TextBox.KeyUp:

textValue = new TextData();

textValue.Text = "";

txtTitle.KeyUp += new KeyEventHandler(txtTitle_KeyUp);

this.DataContext = textValue;

All left to is is to update my data source at the time of event handlig:

textValue.Text = txtTitle.Text;

The last, but not least I’ve changed a little my XAML, so now TextBox.Text property is databound like following:

Text="{Binding Mode=TwoWay, Path=Text}"

and TextBlock.Text property bounded defind like follows:

Text="{Binding Mode=OneWay, Path=Text}"

Also, I removed TextDataDS (from previous example) because I don't need it anymore. Here it goes:

"Property Binding" and Reflection in Silverlight - Demo

The second tip today will be about changing Page Title dynamically and setting Browsers status text.

Changing page title is really easy – all you have to do is to change “title” property of the document which holds the application:

HtmlPage.Document.SetProperty("title", "Some Text");

Changing status text is very easy in IE, but will not in other browsers: it could work in Firefox for example but it is turned off by default. So my example is for IE folks:

string strAgent = HtmlPage.BrowserInformation.UserAgent;

if (strAgent.IndexOf("MSIE") > -1)

    HtmlPage.Window.SetProperty("status", txtStatus.Text);

else

    //This browser does not support windows.status messages

Here it goes:

Page Title and Status Bar Text with Silverlight - Demo

Sources for all samples here.

Don’t forget about DevAcademy3 (local event) which will take place at 15 Dec at Avenue, Airport City.

My lecture is DEV303 - Integrating Silverlight 2 into Existing Web Sites (Level 300)

Registration is still open here.

Enjoy,

Alex

Silverlight TreeView and String-To-PathGeometry Converter projects updated to RC0 syntax

Alex Golesh — Thu, 09 Oct 2008 11:09:55 GMT

I've updated Silverlight TreeView control and with RC0 changes.

Both projects has couple community requested changes.

For example, TreeView supports DoubleClick and Single click on node and String-To_PathGeometry Converter supports multiple figures in Path string.

Latest sources/build could be downloaded from here (TreeView) and here (String-To-PathGeometry Converter).

Enjoy,

Alex