With the release of Silverlight 1.0 Beta and Silverlight 1.1 Alpha, the WPF/E Developer Content blog is now the Silverlight SDK blog. Visit us at our new location!

Thanks,
Silverlight SDK Team

Note: You only need to do this if the following dialog appears during uninstall AFTER you've installed Visual Studio 2005 SP1.

1) Add the following registry key (the attached reg file allows you to quickly add it):

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Installer\Products\E8032D1D4E8BAF1498CA286FB5A952A5]
"ProductName"="Web Application Projects"

2) Uninstall "WPF/E Visual Studio 2005 Template CTP (Dec 2006)".

3) Remove the registry key you added in Step 1.

4) Install the new template available in the WPF/E CTP (Feb 2007) SDK. 

WAP.reg

If you haven't already heard, the February CTP of WPF/E has been released (go here for more information). There are a number of sources detailing the new features added with this release, but I thought it would be worth while to list out all the new API. The API are grouped by object. The new objects and members are listed first, then the new API on existing objects are listed.

New Objects

New Enumeration Objects

New API on existing objects

--Brian

Drag and drop is a very useful feature of interactive content. You can easily add drag and drop to your WPF/E control by implementing simple event handlers on mouse events. This posting illustrates the use of drag and drop functionality in a creative WPF/E application.

The Zip file (CocoDressUpKit.zip) contains all the files used for this application. You can also view the WPF/E application at:

    https://wpfesdk.members.winisp.net/samples/coco

Using Drag and Drop in a WPF/E Control
The Coco's Dress Up Kit application allows you to drag and drop decorative objects from a panel onto an image:

Coco's Dress Up Kit

Each decorative object that is on the panel is defined as a Canvas object, and provides event handlers for the mouse events: MouseLeftButtonDown, MouseLeftButtonUp, and MouseMove. Here is the XAML content definition for one of the purple ribbons:

<Canvas x:Name="Ribbon_01"
  MouseLeftButtonDown="javascript:onMouseDown"
  MouseLeftButtonUp="javascript:onMouseUp"
  MouseMove="javascript:onMouseMove"
  Canvas.Top="440" Canvas.Left="140">
  <Canvas.RenderTransform>
    <RotateTransform Angle="135" />
  </Canvas.RenderTransform>
  <Polygon Points="0,0 100,30 100,0 0,30"
    Fill="#c71585"/>
  <Ellipse Canvas.Left="35" Canvas.Top="5"
    Height="20" Width="30"
    Fill="#cf1f8f"/>
</Canvas>

All decorative objects share the same three mouse event handlers, since the drag and drop functionality is implemented the same for all the objects.

Event Handlers for Drag and Drop Operations
A drag and drop operation is a sequence of three steps:

• Mouse Down—the object is selected. The object must ensure it has exclusive access to all mouse events generated by the WPF/E control.
• Mouse Move—the object moves to a new position, relative to the current position of the mouse.
• Mouse Up—the object stops responding to mouse events.

Let's look at how each of these steps is implemented in a WPF/E control. The onMouseDown event handler in the eventhandler.js file initiates the drag and drop operation by storing the beginning position of the mouse, setting a flag to indicate the drag and drop operation is in effect, and gaining exclusive access to mouse events by invoking the CaptureMouse method:

// Start drag and drop operation.
function onMouseDown(sender, mouseEventArgs)
{
    // Set the beginning position of the mouse.
    beginX = mouseEventArgs.x;
    beginY = mouseEventArgs.y;

    isMouseDown = true;
    updateStatus(sender.name);

    // Ensure object receives all mouse events.
    sender.captureMouse();
}

The onMouseMove event handler in the eventhandler.js file determines whether the drag and drop operation is in effect by testing the value of the isMouseDown variable. If the drag and drop operation is in effect, the incremental difference between the last stored mouse position and the current mouse position is applied to the object's Canvas.Top and Canvas.Left values:

// Reposition object during drag and drop operation.
function onMouseMove(sender, mouseEventArgs)
{
    // Determine whether the mouse button is down.
    // If so, move the object.
    if (isMouseDown == true)
    {
        // Retrieve the current position of the mouse.
        var currX = mouseEventArgs.x;
        var currY = mouseEventArgs.y;

        // Reset the location of the object.
        sender["Canvas.Left"] += currX - beginX;
        sender["Canvas.Top"] += currY - beginY;

        // Update the beginning position of the mouse.
        beginX = currX;
        beginY = currY;
    }
}

The onMouseUp event handler in the eventhandler.js file stops the drag and drop operation by invoking the ReleaseMouseCapture method on the object. This method releases the object's exclusive access to the WPF/E control's mouse events. This means that all objects can now receive mouse events:

// Stop drag and drop operation.
function onMouseUp(sender, mouseEventArgs)
{
    isMouseDown = false;
    updateStatus("");

    // Allow all objects to receive mouse events.
    sender.releaseMouseCapture();
}

How Mouse Capture Enables Drag and Drop
The reason why all the decorative objects can share mouse event handlers is that each object enables mouse capture during the drag and drop operation. The end result is that when you drag an object, such as the sunglasses, no mouse events are sent to other objects. So when the sunglasses is dragged under the flower, the flower does not receive mouse events, even though the mouse cursor is directly over the flower:

   Dragging the sunglasses does not trigger mouse events for the flower

Mouse capture also enables drag and drop operations when you move the mouse quickly. As long as mouse capture is enabled, the mouse cursor does not need to be exactly on the object being dragged. Eventually, the object being dragged will render under the mouse cursor.

Enjoy,
Lorin
WPF/E Developer Content Team

and my dog, Coco


 

CocoDressUpKit.zip

~m jacobs

You'll create a reflection for the following image.

The following illustration shows the completed reflection.

1. Download the following zip file and extract it: reflection_examples.zip. From the directory where you extracted the file, navigate to the reflection_examples\reflection_example subfolder. It contains four files: aghost.js, gear_large.png, reflection.html, and reflection.xaml.
2. Open the file named reflection.xaml. It contains the following markup.
   XAML (reflection.xaml)

   <Canvas
     xmlns="https://schemas.microsoft.com/client/2007"
     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
     
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
       Canvas.Left="75" Canvas.Top="20">
     </Image>
   
   </Canvas>

   To run the sample, open the file named reflection.html in a browser. You should see the following output.

   
3. Create a duplicate image to serve as the reflection.
XAML (reflection.xaml)

<Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

  <!-- The object to reflect. -->
  <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="20">
  </Image>

  <!-- The reflection. -->
  <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="20">
  </Image>

</Canvas>

4. To flip the reflection so that it's upside down, create a ScaleTransform and set its ScaleY property to -1.
   XAML (reflection.xaml)

   <Canvas
     xmlns="https://schemas.microsoft.com/client/2007"
     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
   
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
       Canvas.Left="75" Canvas.Top="20">
     </Image>
   
     <!-- The reflection. -->
     <Image Source="gear_large.png"
       Canvas.Left="75" Canvas.Top="20">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-1" />
       </Image.RenderTransform>
     </Image>
   
   </Canvas>

   When you run the sample, notice that the second image has been flipped almost out of sight.

   

5. Move the flipped image so that it is below the original image. The most straightforward way to do this is to adjust the Canvas.Top property of the second image.
   XAML (reflection.xaml)

   <Canvas
     xmlns="https://schemas.microsoft.com/client/2007"
     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
   
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
       Canvas.Left="75" Canvas.Top="20">
     </Image>
   
     <!-- The reflection. -->
     <Image Source="gear_large.png"
       Canvas.Left="75" Canvas.Top="258">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-1" />
       </Image.RenderTransform>
     </Image>
   
   </Canvas>

   The markup now produces the following output.

   

6. Now for some finishing touches. Use an opacity mask to fade the reflected image into the background.
   XAML (reflection.xaml)

   <Canvas
     xmlns="https://schemas.microsoft.com/client/2007"
     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
   
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
       Canvas.Left="75" Canvas.Top="20">
     </Image>
   
     <!-- The reflection. -->
     <Image Source="gear_large.png"
       Canvas.Left="75" Canvas.Top="258">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-1" />
       </Image.RenderTransform>
       <Image.OpacityMask>
         <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
           <GradientStop Offset="0.0" Color="#00000000" />
           <GradientStop Offset="1.0" Color="#FF000000" />
         </LinearGradientBrush>
       </Image.OpacityMask>
     </Image>
   
   </Canvas>

   As you can see in the following output, the second image now fades into the background.

   

7. Add some distortion to the reflection by changing the ScaleY value of the ScaleTransform from -1 to -0.75.
   XAML (reflection.xaml)

   <Canvas
     xmlns="https://schemas.microsoft.com/client/2007"
     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
   
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
       Canvas.Left="75" Canvas.Top="20">
     </Image>
   
     <!-- The reflection. -->
     <Image Source="gear_large.png"
       Canvas.Left="75" Canvas.Top="258">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-0.75" />
       </Image.RenderTransform>
       <Image.OpacityMask>
         <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
           <GradientStop Offset="0.0" Color="#00000000" />
           <GradientStop Offset="1.0" Color="#FF000000" />
         </LinearGradientBrush>
       </Image.OpacityMask>
     </Image>
   
   </Canvas>

   The sample now produces the following output. Notice that the reflected image appears to have changed position.

   

8. Move the reflected image so that it is just below the original image.
   XAML (reflection.xaml)

   <Canvas
     xmlns="https://schemas.microsoft.com/client/2007"
     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
   
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
       Canvas.Left="75" Canvas.Top="20">
     </Image>
   
     <!-- The reflection. -->
     <Image Source="gear_large.png"
       Canvas.Left="75" Canvas.Top="228">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-0.75" />
       </Image.RenderTransform>
       <Image.OpacityMask>
         <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
           <GradientStop Offset="0.0" Color="#00000000" />
           <GradientStop Offset="1.0" Color="#FF000000" />
         </LinearGradientBrush>
       </Image.OpacityMask>
     </Image>
   
   </Canvas>

   As you can see in the following output, the reflected image is now in the correct position.

   

9. For the final finishing touch, make the reflection fade into the background a little bit more by setting its opacity to 0.75.
   XAML (reflection.xaml)

   <Canvas
     xmlns="https://schemas.microsoft.com/client/2007"
     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
   
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
       Canvas.Left="75" Canvas.Top="20">
     </Image>
   
     <!-- The reflection. -->
     <Image Source="gear_large.png"
       Canvas.Left="75" Canvas.Top="228"
       Opacity="0.75">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-0.75" />
       </Image.RenderTransform>
       <Image.OpacityMask>
         <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
           <GradientStop Offset="0.0" Color="#00000000" />
           <GradientStop Offset="1.0" Color="#FF000000" />
         </LinearGradientBrush>
       </Image.OpacityMask>
     </Image>
   
   </Canvas>

   The following illustration shows the completed reflection.

   

-m jacobs  

Related Topics

• Transforms Overview: Describes how to use WPF/E transforms to scale, skew, translate, and rotate objects.
• Brushes Overview: Describes how to paint with WPF/E brush objects, such as LinearGradientBrush and RadialGradientBrush.

reflection_examples.zip

Opacity is a very useful property for creating graphical effects in a WPF/E application. This is particularly true when creating mashups, in which you overlay custom content on other Web content. This posting illustrates the use of opacity in a Microsoft Virtual Earth mashup that allows you to display selected landmarks in New York City.

At the bottom of this posting, you can find an attached Zip file (Landmarks.zip) that contains all the files used for this mashup. You can also view the WPF/E application at:
    https://wpfesdk.members.winisp.net/samples/landmarks

Using Animated Opacity to Fade In Text
When the nyc landmarks mashup loads, the title fades into view:

Title fades in as partially translucent text

The title is simply a pair of TextBlock objects whose parent Opacity property value is animated when the WPF/E control loads it. You can achieve this effect by creating a WPF/E control with the WindowlessMode property set to true, and setting the BackgroundColor value to be transparent. The BackgroundColor value setting, #00000000, represents a 16-bit RGB value with alpha transparency (#AARRGGBB). The end result is that the TextBlock text is overlaid directly on the map data.

new agHost(
  "WpfeControlHost_1",    // DIV tag id.
  "WpfeControl_1",        // WPF/E control id.
  "440",                  // Width.
  "80",                   // Height.
  "#00000000",            // Background is transparent,
                          //   since alpha value is 0.
  null,                   // SourceElement not used.
  "xaml/Title.xaml",      // Source property value.
  "true");                // WindowlessMode enabled.

The title text fades in by defining an animation for the TextBlock objects.  Notice that the To property is set to 0.7, which means the title is partially translucent, allowing the map to show through just a little:

<Canvas.Triggers>
  <EventTrigger RoutedEvent="Canvas.Loaded">
    <EventTrigger.Actions>
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="title"
            Storyboard.TargetProperty="Opacity"
            BeginTime="0:0:3"
            To="0.7"
            Duration="0:0:3" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger.Actions>
  </EventTrigger>
</Canvas.Triggers>

Creating a Drop Shadow Effect
The title text is defined as a pair of TextBlock objects. The top object displays the primary text, while the bottom object, offset slightly, displays the same text in a darker color. This creates a drop shadow effect. Notice that the TextBlock objects are contained within a Canvas object. Although the animation is applied to this containing Canvas object, the effects of the animation are applied to the Canvas object and all its descendants.

<Canvas
  x:Name="title"
  Opacity="0.0" >

  <!-- Shadow text below -->
  <TextBlock
    Canvas.Top="4" Canvas.Left="4"
    FontFamily="Verdana" FontWeight="Bold" FontSize="48"
    Foreground="Black" >
    nyc landmarks
  </TextBlock>

  <!-- Primary text above -->
  <TextBlock
    FontFamily="Verdana" FontWeight="Bold" FontSize="48"
    Foreground="Gold" >
    nyc landmarks
  </TextBlock>

</Canvas>

Using the WindowlessMode Property with an Alpha Value
The landsmarks list panel also fades into view using animated opacity. In order to allow the underlying map to show through, the Canvas and TextBlock objects that comprise the panel are set to less than 100% opacity:

Panel fades in as partially translucent text and background

Notice the translucent outline around the border of the panel. Like the title, the panel is defined as a WPF/E control with the WindowlessMode property set to true. However, in this case the alpha value of the BackgroundColor property value, #40000000, is set to be semi-transparent, which means a black color value with 25% opacity is blended with the underlying map data.

new agHost(
  "WpfeControlHost_2",    // DIV tag id.
  "WpfeControl_2",        // WPF/E control id.
  "220",                  // Width.
  "260",                  // Height.
  "#40000000",            // Background partially transparent,
                          //   since alpha value is 25%.
  null,                   // SourceElement not used.
  "xaml/LandMarks.xaml",  // Source property value.
  "true");                // WindowlessMode enabled.

Using the Opacity Property to Indicate Focus and Selection
When you move the mouse over a landmark name, the text in the TextBlock darkens. When you select a landmark name, a blue-green selection rectangle appears under the clicked TextBlock.

Focus and selection uses opacity

To indicate focus, each TextBlock object representing a landmark name defines a MouseEnter and MouseLeave event. Notice that the Opacity value is set to "0.8":

<TextBlock
  x:Name="Staten Island Ferry"
  Canvas.Left="20" Canvas.Top="120"
  FontFamily="Verdana" FontWeight="Bold" FontSize="12"
  Opacity="0.8"
  MouseLeftButtonDown="javascript:landmarkSelected"
  MouseEnter="javascript:mouseEnter"
  MouseLeave="javascript:mouseLeave" >
  Staten Island Ferry
</TextBlock>

The event handling functions for all the MouseEnter and MouseLeave events are defined as:

//
// Toggle the opacity of the TextBlock to indicate focus.
//
function mouseEnter(sender) {
    sender.opacity = 1.0;
}

function mouseLeave(sender) {
    sender.opacity = 0.8;
}

To indicate selection, a transparent Rectangle object is defined, so that it is below the rendering order of the TextBlock objects:

<Rectangle
  x:Name="selectionRect"
  Canvas.Left="0" Canvas.Top="-20"
  Height="20" Width="180"
  Fill="Teal" Opacity="0.0" />

The event handler function for the MouseLeftButtonDown event of each TextBlock object calls the custom SetMapToLandmark function which repositions the the selection rectangle underneath the clicked TextBlock object, and sets its Opacity value to 0.5:

//
// Set the selection rectangle.
// Then set the Birdseye view to the landmark.
//
function SetMapToLandmark(landmark, top) {
    if (selectionRect["Canvas.Top"] == top) return;

    selectionRect["Canvas.Top"] = top;
    selectionRect.opacity = 0.5;

    map.LoadMap(
        new VELatLong(landmark.Latitude, landmark.Longitude),
        2,
        VEMapStyle.Oblique);
}

Creating Virtual Earth Mashups
This mashup uses the the Virtual Earth Map Control SDK, version 4.0, which allows you to create client-side Web apps. The Virtual Earth Development portal provides you samples, tutorials, and other developer content to get you started creating mashups.

Enjoy,
Lorin
WPF/E Developer Content Team

Landmarks.zip

• Updated SDK docs
• Updated QuickStart
• VS Template support for VS 2005 SP1

The MSDN Library provides the WPF/E SDK overviews and reference content for the exposed API set and XAML.

WPF/E QuickStart
The WPF/E QuickStart is now available online at the following Web location:

   WPF/E QuickStart

The WPF/E QuickStart is designed to show you how to create a simple WPF/E application in a short time. Try it out!

Enjoy,
Lorin
WPF/E Developer Content Team

The MSDN Library provides the WPF/E SDK overviews and reference content for the exposed API set and XAML. The WPF/E SDK can also be downloaded from the MSDN WPF/E Dev Center, and includes a WPF/E QuickStart Tutorial that guides you through key features and concepts in building WPF/E applications.

WPF/E Control
When you install the WPF/E runtime components, you install a browser plug-in that exposes a WPF/E control. WPF/E content is displayed by using one or more WPF/E controls that are defined on an HTML page. The OBJECT and EMBED tags are the HTML tags that allow you to reference the WPF/E control. The OBJECT and EMBED tags direct the browser to load the WPF/E control, using the set of supplied parameter values. These tags also allow you to define an identifier which can be used to access the control at runtime.

The WPF/E control is packaged differently on the supported platforms. Internet Explorer on Windows uses an ActiveX model to host WPF/E controls, while all other browser and platform combinations use the Netscape plug-in technology to host WPF/E controls.

The following diagram shows the relationship of the Web page, the host WPF/E control, and its WPF/E content:

Relationship of Web page to WPF/E content

Once you have created the WPF/E control, you can reference its id value by using the Document Object Model (DOM) for the Web page. The following JavaScript example shows how to retrieve the id value of the WPF/E control by using the document.getElementById method:

var wpfeControl = document.getElementById("WpfeControl1");

WPF/E Object Hierarchy
When you add XAML objects to the WPF/E control, you are defining a hierarchical tree structure with a root object. For example, the following XAML example creates a object hierarchy containing a parent Canvas object and a child TextBlock and Canvas object. In this case, the first Canvas object defined is the root object for the tree structure.

<Canvas xmlns="https://schemas.microsoft.com/client/2007" >

  <!-- Canvas objects can be a child of a Canvas object. -->
  <Canvas Canvas.Left="20" Canvas.Top="20">
    <Rectangle Width="200" Height="35" Fill="PowderBlue" />
    <TextBlock Canvas.Left="25" Canvas.Top="5"
      Foreground="Teal" FontFamily="Verdana">
      Sample Output
    </TextBlock>
  </Canvas>

  <TextBlock Canvas.Left="36" Canvas.Top="80"
    Foreground="Maroon" FontFamily="Verdana">
    Hello, world
  </TextBlock>

</Canvas>

XAML content is converted into a a hierarchical tree structure with a root object. For example, the content in the previous XAML example is converted into the following tree structure:

XAML content as a tree structure

The tree structure determines the rendering ordering of WPF/E objects. The order of traversal starts with the root object, which is the top-most node in the tree structure. The root object's children are then traversed, left to right. If an object has children, its children are traversed before the object's siblings. This means the content of a child object is rendered in front of the object's own content. Here is the rendered output from the previous XAML example, showing the rendering order sequence:

Rendering order of XAML content

WPF/E XAML
For those of you who are familiar with WPF, the pre-release version of WPF/E will look familiar as far as XAML is concerned, even though it is a reduced subset. Try it out and see what you think!

Enjoy,
Lorin
WPF/E Developer Content Team