Sunday, December 21, 2008

Silverlight Extenders

Source updated 12/24 with cross-browser support
Source updated 12/30 with RotateScaleExtender repaint fix
Work on the final version of Zleek is progressing nicely. The new UI is coming along, as well as the backend. The new features, including integration with other photo services and video support, are just about complete as well.

Over the coming months before our release, I will be posting code snippets and libraries that I put together for Zleek that may be helpful for other Silverlight developers.

This first post is a combination of a few extenders that I put together:
  • DragExtender: Adds mouse drag functionality to any FrameworkElement
  • RotateScaleXtender: Adds mouse rotate/scale functionality to any FrameworkElement
  • KeyExtender: Adds extra keyboard support, including handling of DOM events and extra keys
  • FillContainerExtender: Automatically resizes the Silverlight application to fill its container.

Here is the running example.

The source code in the test harness is pretty simple. You declare an instance of the extender and give it a reference to the FrameworkElement you want to add functionality to, and the extender does the rest. There are extensibility points inside of the extenders that should make them useful for any application.

Here is the source code, and here's a snippet from the test harness showing example usage:

   1:  using System;
   2:  using System.Windows.Controls;
   3:  using Agnition.Silverlight.Input;
   4:  using Agnition.Silverlight.Controls;
   5:   
   6:  namespace ExtenderTestHarness
   7:  {
   8:    public partial class Page : UserControl
   9:    {
  10:      public Page() {
  11:        InitializeComponent();
  12:   
  13:        // Initialize extenders
  14:   
  15:        _fillContainerExtender = new FillContainerExtender(this.LayoutRoot);
  16:   
  17:        _keyExtender = new KeyExtender(this, true, true, true);
  18:        _keyExtender.KeyDown += new EventHandler<KeyCodeEventArgs>(KeyExtender_KeyDown);
  19:        _keyExtender.KeyUp += new EventHandler<KeyCodeEventArgs>(KeyExtender_KeyUp);
  20:   
  21:        _dragExtender = new DragExtender(this.DragMe);
  22:        _dragExtender.StateChangeStart += new EventHandler<StateChangingEventArgs>(DragExtender_StateChangeStart);
  23:   
  24:        _rotateScaleExtender = new RotateScaleExtender(this.DragMe, 0.75, 6);
  25:        _rotateScaleExtender.StateChangeStart += new EventHandler<StateChangingEventArgs>(RotateScaleExtender_StateChangeStart);
  26:      }
  27:   
  28:      private void FullScreenButton_Click(object sender, System.Windows.RoutedEventArgs e) {
  29:        // Toggle full screen
  30:        _fillContainerExtender.IsFullScreen = !_fillContainerExtender.IsFullScreen;
  31:   
  32:        // Toggle display of warning
  33:        FullScreenWarning.Visibility =
  34:          FullScreenWarning.Visibility == System.Windows.Visibility.Collapsed ?
  35:          System.Windows.Visibility.Visible : System.Windows.Visibility.Collapsed;
  36:      }
  37:   
  38:      private void KeyExtender_KeyDown(object sender, KeyCodeEventArgs e) {
  39:        // Demonstrates KeyCode event arguments Key and TextValue
  40:   
  41:        // Show which key was pressed
  42:        if (e.Key == KeyCode.Shift) {
  43:          MouseMode.Text = "Mouse Mode: Rotate/Scale";
  44:        }
  45:        else {
  46:          // Don't show message on shift, to prevent spamming while holding
  47:          KeysPressed.Text += e.Key.ToString() + " ";
  48:        }
  49:   
  50:        // Render the text
  51:        if (e.TextValue != null) {
  52:          KeyText.Text += e.TextValue;
  53:        }
  54:        else if ((e.Key == KeyCode.Backspace) && (KeyText.Text.Length > 0)) {
  55:          // Check for backspace
  56:          KeyText.Text = KeyText.Text.Substring(0, KeyText.Text.Length - 1);
  57:        }
  58:      }
  59:   
  60:      private void KeyExtender_KeyUp(object sender, KeyCodeEventArgs e) {
  61:        // Demonstrates KeyCode event arguments Key and TextValue
  62:   
  63:        // Show which key was pressed
  64:        if (e.Key == KeyCode.Shift) {
  65:          MouseMode.Text = "Mouse Mode: Drag";
  66:        }
  67:      }
  68:   
  69:      private void DragExtender_StateChangeStart(object sender, StateChangingEventArgs e) {
  70:        // Demonstrates how to cancel an event in order to combine two MouseMovementExtenders
  71:   
  72:        // If not holding shift, allow dragging
  73:        e.CancelEvent = _keyExtender.IsShiftDown;
  74:      }
  75:   
  76:      private void RotateScaleExtender_StateChangeStart(object sender, StateChangingEventArgs e) {
  77:        // Demonstrates how to cancel an event in order to combine two MouseMovementExtenders
  78:   
  79:        // If holding shift, allow rotate/scale
  80:        e.CancelEvent = !_keyExtender.IsShiftDown;
  81:      }
  82:   
  83:      private readonly FillContainerExtender _fillContainerExtender;
  84:      private readonly KeyExtender _keyExtender;
  85:      private readonly DragExtender _dragExtender;
  86:      private readonly RotateScaleExtender _rotateScaleExtender;
  87:   
  88:    }
  89:  }