U2U WPF/Silverlight Blog

Visual State Manager or rather Behavior ? (part 3)

Mon, 20 Jun 2011 15:59:00 -1300

So far, so good. I created a little application indicating the distance to my geographically closest friend. I used Visual State Manager for making my indicator change, depending on the distance I get from the Distance-service. It takes some practice to get used to it. Now, I have two little problems with VSM:

It's a lot to write, even for having a simple control like our distance-indicator.
Changes (e.g. adding another state) always have to be done in two locations : code and XAML.

Now, when using Blend, you might have seen Behaviors, which you can drag and drop on top of your controls. They add some, ehm 'Behavior' to these controls. It also adds a specific assembly needed for creating these Behaviors, i.e. Microsoft.Phone.Interop. Next to a few out-of-the-box behaviors that Blend provides, you can start creating your own Behaviors. And the way of doing that, is just child's play. Simply create your own class, inheriting from Behavior<T> with T being the control for which you create a behavior. Of course, nothing stops you from using FrameworkElement here.

I keep it simple, and I create a Behavior for the Ellipse. I also create 3 properties for specifying the colors for my distance-indicator:

   1:  public class DistanceBehavior : Behavior<Ellipse>

   2:  {

   3:      protected override void OnAttached()

   4:      {

   5:          base.OnAttached();

6:

   7:          Ellipse ao = AssociatedObject as Ellipse;

   8:          DistanceReader.DistanceChanged += (s, ea) =>

   9:          {

  10:              if (ea.Distance>5)

  11:              {

  12:                  ao.Fill = this.FarColor;

  13:              }

  14:              else if (ea.Distance>2)

  15:              {

  16:                  ao.Fill = this.AverageColor;

  17:              }

  18:              else

  19:              {

  20:                  ao.Fill = this.CloseColor;

  21:              }

  22:          };

  23:      }

24:

  25:      public Brush FarColor { get; set; }

26:

  27:      public Brush AverageColor { get; set; }

28:

  29:      public Brush CloseColor { get; set; }

  30:  }

Let's now use this behavior on an ellipse we add to our MainPage. We first need to add the necessary namespaces to our xaml:

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

xmlns:my="clr-namespace:WindowsPhoneApplication1"

(!! I'm only showing the my-namespace here for completeness. Since we already added it to App.xaml in Part 1, we don't need to add it here).

Let's now add our ellipse, and give it our Behavior :

<Ellipse>

    <i:Interaction.Behaviors>

        <my:DistanceBehavior FarColor="Red" AverageColor="Orange" CloseColor="Green"/>

    </i:Interaction.Behaviors>

</Ellipse>

Test your application again, and you'll see your ellipse change in the same way as your VSM-control, but this time with less coding and (in my opinion) easier to maintain.

Visual State Manager or rather Behavior ? (part 2)

Sun, 19 Jun 2011 16:23:00 -1300

In part 1 I set up the service and the WP7-application. The WP7-application will poll the service regularly for asking the distance to the closest friend. Let's now finish the WP7-app so we can show the distance by a little indicator. When closer than 2 (km? miles ? light-years ? You choose) the indicator will show green, less then 5 will be orange, and all the rest is red. Let's first create an indicator using Visual State Manager. In VSM we will define different states. In code we define the state our control is in, and in XAML we define how a state should look like.

Let's create our control:

   1:  [TemplatePart(Name="Core",Type=typeof(FrameworkElement))]

   2:  [TemplateVisualState(Name="Far",GroupName="DistanceStates")]

   3:  [TemplateVisualState(Name = "Close", GroupName = "DistanceStates")]

   4:  [TemplateVisualState(Name = "VeryClose", GroupName = "DistanceStates")]

   5:  public class DistanceIndicator: Button

   6:  {

   7:      Ellipse corePart;

8:

   9:      private Ellipse CorePart

  10:      {

  11:          get { return corePart; }

  12:          set { corePart = value; }

  13:      }

14:

  15:      public override void OnApplyTemplate()

  16:      {

  17:          base.OnApplyTemplate();

18:

  19:          CorePart = (Ellipse) GetTemplateChild("Core");

  20:          VisualStateManager.GoToState(this, "Far", true);

  21:          DistanceReader.DistanceChanged +=

  22:              new EventHandler<DistanceEventArgs>(DistanceReader_DistanceChanged);

  23:      }

24:

  25:      void DistanceReader_DistanceChanged(object sender, DistanceEventArgs e)

  26:      {

  27:          if (e.Distance>5)

  28:          {

  29:              VisualStateManager.GoToState(this,"Far",true);

  30:          }

  31:          else if (e.Distance > 2)

  32:          {

  33:              VisualStateManager.GoToState(this,"Close",true);

  34:          }

  35:          else

  36:          {

  37:              VisualStateManager.GoToState(this, "VeryClose", true);

  38:          }

  39:      }

  40:  }

The code-attributes already shows you the different states my Indicator can have : Far, Close and VeryClose (OutOfInspirationException occurred). I add the controltemplate to App.xaml, describing how my three states should look like :

   1:  <ControlTemplate x:Key="u2uCtrl" TargetType="my:DistanceIndicator">

   2:      <Ellipse x:Name="ellipse" Height="{TemplateBinding Height}" Fill="Yellow">

   3:          <VisualStateManager.VisualStateGroups>

   4:              <VisualStateGroup x:Name="DistanceStates">

   5:                  <VisualState x:Name="Close">

   6:                      <Storyboard>

   7:                          <ColorAnimation Duration="0" To="Orange"

   8:                                          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"

   9:                                          Storyboard.TargetName="ellipse" d:IsOptimized="True"/>

  10:                      </Storyboard>

  11:                  </VisualState>

  12:                  <VisualState x:Name="VeryClose">

  13:                      <Storyboard>

  14:                          <ColorAnimation Duration="0" To="Green"

  15:                                          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"

  16:                                          Storyboard.TargetName="ellipse" d:IsOptimized="True"/>

  17:                      </Storyboard>

  18:                  </VisualState>

  19:                  <VisualState x:Name="Far">

  20:                      <Storyboard>

  21:                          <ColorAnimation Duration="0" To="Red"

  22:                                          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"

  23:                                          Storyboard.TargetName="ellipse" d:IsOptimized="True"/>

  24:                      </Storyboard>

  25:                  </VisualState>

  26:              </VisualStateGroup>

  27:          </VisualStateManager.VisualStateGroups>

  28:      </Ellipse>

  29:  </ControlTemplate>

I cheated, of course: I used blend for creating this template. Nevertheless, I add my control to my MainPage:

<my:DistanceIndicator Content="" x:Name="distanceIndicator1" Template="{StaticResource u2uCtrl}" />

That's it. Open the WPF-application, change the slider. Run the WP7-application and there you go. Play with the slider, and the WP7-app responds visually (after some time). Nice stuff, but it get's nicer with Behavior. That's for part 3.

Visual State Manager or rather Behavior(part 1)

Wed, 15 Jun 2011 23:15:00 -1300

During an interesting event last week, discussing the virtues of Silverlight apps out of the browser, I was confronted with Behavior. I should probably be ashamed because I never heard of them before. Because they have a high coolness- and awesomeness-level I checked if they were also available for Windows Phone, and hooray, they are!

Now what are they about ? In WPF you can use Triggers, to react on certain "events", like this one :

<Button.Triggers>

    <EventTrigger RoutedEvent="Click">

        <BeginStoryboard Storyboard="{StaticResource mySB}"/>

    </EventTrigger>

</Button.Triggers>

Specially useful when you're creating your own Controltemplates. Unfortunately they're not available in Silverlight (except for the Loaded-event). When creating your own controls, and you need them to have some kind of visual feedback, we'll have to use the Visual State Manager.

In my little example I have a WP7-app that regularly calls a "Distance-service" that gives the shortest distance between you and your geographically closest friend (could be something Foursquare provides). The closest distance will be shown by some small colored ellipse. Whenever the distance changes, the color changes.

Let's start by the service: I have a little WCF library that I'm hosting in a WPF-app. Service looks like this:

public class DistanceService : IDistanceService

    public double GetDistance()

        return DistanceHelper.Distance;

Can't make them smaller than this. What about this DistanceHelper ?

public static class DistanceHelper

    private static double distance=10;

    public static double Distance

        get { return distance; }

        set { distance = value; }

My MainWindow only has a slider going from 0 to 10, with an eventhandler for the ValueChanged. In this eventhandler I simply set the DIstance-property from DIstanceHelper:

 1: private void distanceSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

 2: {

 3:     DistanceHelper.Distance = distanceSlider.Value;

 4: }

5:

 6: private void Window_Loaded(object sender, RoutedEventArgs e)

 7: {

 8:     host = new ServiceHost(typeof(DistanceServiceLib.DistanceService));

 9:     host.Open();

 10: }

11:

 12: private void Window_Unloaded(object sender, RoutedEventArgs e)

 13: {

 14:     host.Close();

 15: }

I also configured my WCF-service to use simple basicHttpBinding.

In my WP7-app I start by creating a service reference towards my service. This will be used by a helper-class DistanceReader:

 1: public static class DistanceReader

 2: {

 3:     static DistanceReader()

 4:     {

 5:         DispatcherTimer timer = new DispatcherTimer();

 6:         timer.Interval = new TimeSpan(0, 0, 10);

 7:         timer.Tick += (s, ea) =>

 8:         {

 9:             var proxy = new DistanceServiceRef.DistanceServiceClient();

 10:             proxy.GetDistanceCompleted+=(s2,ea2)=>

 11:             {

 12:                 DistanceReader.LastDistance = ea2.Result;

 13:             };

 14:             proxy.GetDistanceAsync();

 15:         };

 16:         timer.Start();

 17:     }

18:

 19:     public static event EventHandler<DistanceEventArgs> DistanceChanged;

20:

 21:     public static void OnDistanceChanged(DistanceEventArgs e)

 22:     {

 23:         if (DistanceChanged!=null)

 24:         {

 25:             DistanceChanged(typeof(DistanceReader), e);

 26:         }

 27:     }

28:

 29:     private static double lastDistance;

 30:     public static double LastDistance

 31:     {

 32:         get { return lastDistance;}

 33:         set

 34:         {

 35:             if (lastDistance!=value)

 36:             {

 37:                 lastDistance = value;

 38:                 OnDistanceChanged(new DistanceEventArgs() { Distance=value});

 39:             }

 40:         }

 41:     }

 42: }

This class calls the service (every 10 seconds) and raises an event whenever the distance changes. Now, how to show this ? Let's start by the VSM-approach. But that is something I'll leave for part 2.

Updating WP7 live tiles without push notifications

Sun, 01 May 2011 09:59:00 -1300

While experimenting with push notifications for updating your live tiles, I found the ShellTileSchedule-class. It sounded interesting enough to play around with it.

On MSDN I found following description for this class : Creates an object which allows an application to schedule updates of its tile's background image. The ShellTileSchedule has some properties like the recurrence and the interval. The interval is an enumeration which goes from hourly to monthly :

Another Property is the RemoteImageUri. Because of the word "Remote" I assume that the image has to be remote (that was a hard one ). So for testing this thing I first set up a website, with simply a png-image (62*62 – I copied Background.png and changed it a bit with Paint). Let's set up our schedule. This has to be done in the Application_Launching:

private void Application_Launching(object sender, LaunchingEventArgs e)

    sts = new ShellTileSchedule();

    sts.Interval = UpdateInterval.

    sts.Recurrence = UpdateRecurrence.Interval;

    sts.RemoteImageUri = new Uri(String.Format("http://localhost:51177/Site/Tiles/1.png", TileNr.ToString()));

    sts.Start();

After starting the application I had to wait for an hour before my tile changed. Changing the clock settings didn't do the job either, but after an hour, finally the tile changed.

This could be useful for pulling tiles, instead of pushing. Get a tile every hour for showing the weather conditions in your area.

Now about this "Remote"-thing. Can I use a local png-file for changing the tile this way ? My first try was to add a png-file, and than refer to it this way:

sts.RemoteImageUri = new Uri("/LocalTile/5.png",UriKind.Relative);

That was not good.

Also tried it with "/TilesTest;component/LocalTile/5.png", but also no success. I needed to get the absolute path. In Silverlight I can use App.Current.Host.Source and Windows Phone is Silverlight, right. But I cannot use the Source-property here, although I can see it in my Locals-window:

OK, another try : let's use this code:

Uri uri = new Uri(new Uri(

    "file:///Applications//Install//27F6C4CB-1192-44AD-A970-635F12689A08//Install"),

    "//LocalTile//5.png");

sts.RemoteImageUri = uri;

OK, I know it's not very useful, because every user that has this application, will also have another GUID. Still : I do it for serving science . Result :

What happened to my GUID and stuff jQuery152010964315148992043_1315308924440 Last try, Let's simplify by using this :

Uri uri = new Uri(
    "file:///Applications//Install//27F6C4CB-1192-44AD-A970-635F12689A08//Install//LocalTile//5.png");

And now I get this :

OK, I quit. Remote indeed means Remote.

Saving an Image to the Pictures Hub

Thu, 28 Apr 2011 10:21:00 -1300

Something that will also be discussed during the upcoming Windows Phone course, here at U2U, is the cooperation between Silverlight for Windows Phone and XNA.

At the end of my previous blog post, I was left with one more challenge: saving my modified picture to the Pictures Hub. Until shortly I thought that the only way of using the Pictures Hub was through the PhotoChooserTask or the CameraCaptureTask. Luckily I came across the MediaLibrary-class from the XNA-framework, who gives much more possibilities for accessing your pictures.

To start I needed to add a reference to Microsoft.Xna.Framework. This results in an alarming message :

At first I tried to do some experimenting with the MediaLibrary. Let’s start by simply getting the number of pictures I have on the emulator :

ml = new MediaLibrary();

nrOfPics = ml.Pictures.Count;

MessageBox.Show(nrOfPics.ToString());

That works nice. The Medialibrary has several collection I can use, like Pictures, Songs, Genres,…

Next step : lets create a little slideshow-app for iterating through my pictures. I start out with a simple page :

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

    <Grid.RowDefinitions>

        <RowDefinition Height="523*" />

        <RowDefinition Height="84*" />

    </Grid.RowDefinitions>

    <Image Name="image1" Stretch="Fill" />

    <Grid Grid.Row="1" Name="grid1">

        <Grid.ColumnDefinitions>

            <ColumnDefinition/>

            <ColumnDefinition/>

        </Grid.ColumnDefinitions>

        <Button Content="&gt;&gt;" Grid.Column="1" Name="btnGoForward"

                Click="btnGoForward_Click" />

        <Button Content="&lt;&lt;" Name="btnGoBack" Click="btnGoBack_Click" />

    </Grid>

</Grid>

The code looks like this :

 1: public partial class MainPage : PhoneApplicationPage

 2: {

 3:     int nrOfPics;

 4:     int picNr = 0;

 5:     MediaLibrary ml;

 6:     BitmapImage img = new BitmapImage();

7:

 8:     // Constructor

 9:     public MainPage()

 10:     {

 11:         InitializeComponent();

 12:     }

13:

 14:     private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)

 15:     {

 16:         ml = new MediaLibrary();

 17:         nrOfPics = ml.Pictures.Count;

 18:         MessageBox.Show(nrOfPics.ToString());

19:

 20:         ShowImage();

 21:     }

22:

 23:     private void ShowImage()

 24:     {

 25:         img.SetSource(ml.Pictures[picNr].GetImage());

 26:         image1.Source = img;

 27:     }

28:

 29:     private void btnGoBack_Click(object sender, RoutedEventArgs e)

 30:     {

 31:         if (--picNr<0)

 32:         {

 33:             picNr = nrOfPics - 1;

 34:         }

 35:         ShowImage();

 36:     }

37:

 38:     private void btnGoForward_Click(object sender, RoutedEventArgs e)

 39:     {

 40:         if (++picNr>=nrOfPics)

 41:         {

 42:             picNr = 0;

 43:         }

 44:         ShowImage();

 45:     }

 46: }

Let's now return to the application created during my previous blog post. In the "Save Img" code we opened another page that simply showed the image with copyright-message. Let's now change the loaded-event of the WrittenImage-page so we can save the image :

WriteableBitmap bmp = PhoneApplicationService.Current.State["bmp"] as WriteableBitmap;

writtenImage.Source = bmp;

MediaLibrary ml = new MediaLibrary();

Stream stream = new MemoryStream();

bmp.SaveJpeg(stream, bmp.PixelWidth, bmp.PixelHeight, 0, 100);

ml.SavePicture("u2uPic.jpg", stream);

MessageBox.Show("Picture Saved...");

The SaveJpeg-method from WritableBitmap gives me a Stream containing the image in jpg-format. SavePicture saves the image in the MediaLibrary. However: it doesn't work ! It took me some time to find out why: It seems that the position of the stream remains at the end-position. Insert this line of code just before the SavePicture-call to make it work:

stream.Position=0;

It's working !! Cool.

Next step: let's deploy these two apps to my device and test. Not working ! How the hell is that possible ? Retesting in the emulator : works fine. Retesting on device: not working. Aaaaargh !! Disconnecting my device, going over to a colleague to ventilate my frustration and see that all of a sudden it is working !! Seems that for this thing to work, it needs to be disconnected from the PC.

Building WPF forms without GDI decoration

Thu, 15 Dec 2011 01:08:00 -1300

This article describes a base class for WPF windows. It hides all GDI chrome, without losing functionality. WPF promises entire freedom in look-and-feel of your application. In its standard configuration, however, a WPF Window is still hosted in a classic GDI-based WinForm. Its border and header are rendered by the operating system. This takes away a lot of styling opportunities: things like a custom close button or rounded borders become impossible. On top of that, the GDI chrome eats a lot of pixels away from your application. That waste of space becomes obvious if you use custom controls like the popular Ribbon.

I created the NoGdiWindow base class to solve all of these problems. The following screenshots from the attached sample application show the same WPF window - with and without using the base class. If you prefer the left window, you may stop reading now .

Hiding the GDI header

Setting the WindowStyle to System.Windows.WindowStyle.None removes the window header:

this.WindowStyle = System.Windows.WindowStyle.None;

You obviously loose the icon, the title and the minimize, maximize/restore, and close buttons. These are relatively easy to recover: the NoGdiWindow class contains the necessary commands and properties to rapidly create custom buttons in XAML. Here's an overview of the relevant class members:

Here's an example of a custom button:

<Button ToolTip="Maximize" Command="{Binding ElementName=Window, Path=MaximizeCommand}" Visibility="{Binding ElementName=Window, Path=MaximizeButtonVisibility}" />

Restoring the buttons is not sufficient: the beheaded window doesn't have a region anymore by which you can drag it, or minimize/restore by double-clicking. When using NoGdiWindow, all you need to do is create a region at the appropriate position and hook in the MouseLeftButtonDown event handler:

<Grid MouseLeftButtonDown="Header_MouseLeftButtonDown" Background="Transparent" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="32" Margin="80 0 0 0">

You may want to implement this functionality as a behavior instead of an event handler.

In the following screenshot, the region is highlighted. The left margin of 80 pixels keeps the ribbon's application menu accessible:

When you use WindowStyle.None your window will overlap the task bar if it's maximized. I personally don't mind at all. If you (or our end users) have a problem with this, you find some possible workarounds here.

Hiding the GDI border

You can make the remaining GDI border disappear by setting the AllowsTransparency property to True and your form's background to Transparent:

this.AllowsTransparency = true;
this.Background = new SolidColorBrush(Colors.Transparent);

This allows you to provide a rounded border around your window, or create an irregular shape. Unfortunately the native GDI border also hosts the resize handles, so you need to get these back. The NoGdiWindow draws a series of rectangles on the form, with the necessary mouse down handlers. Therefor, your main panel should be a Grid. In the following screenshot these rectangles are highlighted:

When the window is opened, it fetches its Win32 handle:

this.hwndSource = PresentationSource.FromVisual((Visual)sender) as HwndSource;

When you hold the left mouse button inside one of the resize rectangles, the resize message is sent to the operating system through a SendMessage call:

SendMessage(this.hwndSource.Handle, 0x112, (IntPtr)(61440 + direction), IntPtr.Zero);

The resize code is based on this article by Joshua. Here's an overview of the relevant class members:

The AllowsTransparency is implemented through a technique called 'layered windows'. If you type these keywords in your [insert favorite search engine here], you'll immediately see that there are some issues under Windows XP. Your user interface may run without hardware acceleration on older XP releases, and it definitely ruins some WPF controls (tooltips, popups, comboboxes). There there are also issues with WindowsFormHost controls, regardless of the operating system you use. NoGdiWindow is aware or this, and has some defensive code around the property:

if ((Environment.OSVersion.Version.Major > 5) & (!this.UsesWindowsFormsHost))
 {
    // Activate Transparency
  // ...
 }

Code

Here's the sample project :U2UConsult.WPF.NoGdiWindow.zip (1.31 mb)

Enjoy!

Using a server side Prism module catalog in Silverlight

Sun, 24 Apr 2011 09:03:00 -1300

Prism 4.0, Managed Extensibility Framework, and Silverlight 4.0 provide an ideal combination to develop robust and flexible enterprise applications. This article explains how you can keep the Prism module catalog in such an application on the server side. In most of the Prism Quickstarts, the module catalog is embedded in the shell:

The application class starts the bootstrapper:

privatevoid Application_Startup(object sender, StartupEventArgs e)
{
    ApplicationBootstrapper bootstrapper = new ApplicationBootstrapper();
    bootstrapper.Run();
}

The bootstrapper builds the catalog from the local file:

protectedoverrideIModuleCatalog CreateModuleCatalog()
{
    ModuleCatalog catalog = Microsoft.Practices.Prism.Modularity.ModuleCatalog.CreateFromXaml(new Uri("Prism.Sample.Shell;component/Modules/ModuleCatalog.xaml", UriKind.Relative));
    return catalog;
}

Unfortunately, this setup requires a rebuild and a redeploy of the shell application whenever a change in the catalog is needed (e.g. to add an extra module, or to remove a buggy module). In most -if not all- real-world scenarios it makes more sense to place the catalog in an area that allows easy modification. The following solution has the catalog in a file on the server side, but you can easily go for other storage locations, like a database table, a WCF service or a SharePoint list. Here's where the file is kept:

The bootstrapper gets an extra constructor that takes a stream:

privateStream stream;
 
public ApplicationBootstrapper(Stream stream)
{
    this.stream = stream;
}

This stream is used to build the catalog:

protectedoverrideIModuleCatalog CreateModuleCatalog()
{
    ModuleCatalog catalog = Microsoft.Practices.Prism.Modularity.ModuleCatalog.CreateFromXaml(this.stream);
    return catalog;
}

On application startup, the file is read, wrapped in a stream, and handed over to the bootstrapper:

privatevoid Application_Startup(object sender, StartupEventArgs e)
{
    WebClient client = new WebClient();
    client.OpenReadCompleted += this.Client_OpenReadCompleted;
    client.OpenReadAsync(new System.Uri(@"Modules\ModuleCatalog.xaml", System.UriKind.Relative));
}
 
private void Client_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
    ApplicationBootstrapper bootstrapper = new ApplicationBootstrapper(e.Result);
    bootstrapper.Run();
}

The following two projects demonstrate both approaches. The application is a small Prism-MEF-Silverlight tutorial application that I wrote a couple of months ago. Here's how it looks like:

Here's the project before and after the modification (it contains the Prism dll's, so you might need to unblock these):

Catalog in the Shell xap: U2UConsult.Prism.Sample.Application.1.zip (1,99 mb)
Catalog on the server: U2UConsult.Prism.Sample.Application.2.zip (1,03 mb)

Enjoy !