ASP.NET 4 and WPF Content (part 2) - WPF Content and Web Applications

3. WPF Content and Web Applications

You can serve WPF content from an ASP.NET application in much the same way that ASP.NET serves other content. You can include loose XAML files in a Web application, or you can host some specific WPF content in an <iframe> HTML element.This exercise illustrates how you can use WPF content in an ASP.NET application.

Adding XAML content to a site

1. Create a new Empty ASP.NET Web Application project in Visual Studio. Name the project XAMLORama.

2. Use Visual Studio to add a new text file to the project. Right-click the XAMLORama project node in Visual Studio, and click Add, New Item. Select a text file type from the templates.

3. Rename the file so that it has an .xaml extension. This file shows a paper airplane drawing, so name the file PaperAirplane.xaml. The Visual Studio XAML designer might show an error right away because there's no content yet. This is not a problem because you add content in the next step.

4. Add some XAML content to the file, starting by defining the top-level layout node. Include the following XML namespaces and make the window 750 units wide:

   <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="750">
   
   </Page>

   All WPF layouts begin with a top-level node. In this case, the node is a Page so that it will show up in the client's browser.

5. Add a Grid to the page, and add two row definitions and two column definitions:

   <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="750">
       <Grid>
           <Grid.RowDefinitions>
               <RowDefinition/>
               <RowDefinition Height="100"/>
           </Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
               <ColumnDefinition/>
               <ColumnDefinition Width="25"/>
           </Grid.ColumnDefinitions>
       </Grid>
   </Page>

6. Add WPF elements to the grid. Add a Canvas to the upper left corner of the Grid, and make the Background SkyBlue. Add two Slider controls to the Grid, too. The first Slider controls the X position of the airplane. Name the Slider sliderX. Put the slider into row 1, and use the ColumnSpan to stretch the Slider across two columns. The maximum value of this slider should be 500. Orient the second Slider vertically and configure it to occupy column 1 in the Grid. Use the RowSpan to stretch the Slider across both rows. This slider controls the rotation of the airplane. Name this Slider sliderRotate. Its maximum value should be 360.

   <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="750">
       <Grid
           <!-- Grid column and row definitions are here... -->
           <Canvas Background="SkyBlue" Grid.Row="0"  
                   Grid.Column="0">
           </Canvas>
           <Slider x:Name="sliderRotate" Orientation="Vertical"  
                   Grid.Row="0"  
                   Minimum="0" Maximum="360"  
                   Grid.Column="1"></Slider>
           <Slider x:Name="sliderX" Maximum="500"  
                   Grid.Column="0" Grid.Row="1"  
                   Grid.ColumnSpan="2"></Slider>
       </Grid>
   </Page>

7. Add the airplane and connect it to the sliders using XAML data binding. Here's how: Create the airplane drawing using a WPF Path. The Path draws a series of line segments using a specific pen. Make the Stroke Black and set the the StrokeThickness to 3. The Path data should connect the following points. Move the cursor to 0,0, and then draw a line to 250,50, and then to 200,75 to 0,0. Then, move the cursor to 200,75 and draw a line to 190,115 and another line to 180,85 to 0,0. Next, move the cursor to 180,85 and draw a line to 140,105 and then to 0,0. Finally, move the cursor to 190,115 and draw a line to 158,93. Set the Path's relationship to the Top of the Canvas as 200. Bind the Path's relationship to the Left of the Canvas to sliderX's Value. Finally, add a RenderTransform to the Path and include a RotateTransform. Bind the RotateTransform's Angle to sliderRotate's Value. Set the Path's RenderTransformOrigin to .5, .5. Here's the Path code:

    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="750">
   
       <Grid>
           <!-- Grid column and row definitions are here... -->
           <Canvas Background="SkyBlue" Grid.Row="0"
                   Grid.Column="0">
               <Path Stroke="Black" StrokeThickness="2" Fill="White"
                 Data="M0,0 L250,50 L200,75 L0,0 M200,75 L190,115 L180,85
                     L0,0 M180,85 L140,105 L0,0 M190,115 L158,93"
                     RenderTransformOrigin=".5, .5"
                     Canvas.Top="200"
                     Canvas.Left="{Binding ElementName=sliderX,Path=Value}" >
                   <Path.RenderTransform>
                       <RotateTransform Angle=
                           "{Binding ElementName=sliderRotate,Path=Value}"/>
                   </Path.RenderTransform>
               </Path>
           </Canvas>
           <!--Sliders go here... -->
       </Grid>
   </Page>

   After setting up the Canvas, the Path, and the Sliders in the grid, you should see it appear in Visual Studio.

8. Add these references to the project: WindowsBase, PresentationCore, and PresentationFramework by right-clicking the References node in Solution Explorer and clicking Add Reference. Look in the .NET tab of the Add Reference dialog box to find these assemblies. Run the page. Because Visual Studio doesn't allow you to run loose XAML files directly, you need to navigate from another page. Add a new page to the application. Name it Default.aspx. Add a Hyperlink to the Default.aspx page and set the NavigationUrl property to PaperAirplane.xaml. Surf to the default page and click the hyperlink that loads the XAML file in the browser. It should appear like this:

   

9. Experiment by moving the sliders. Because the vertical slider controls the angle of rotation, moving it up causes the airplane to spin in a clockwise direction. Because the horizontal slider is connected to the Path's Canvas.Left property, moving the horizontal slider moves the plane along the x-axis, like this:

   

10. Integrate the new WPF content with some HTML. Add a new Page to the XAMLORama file by right-clicking the XAMLORama node in Solution Explorer and adding a new Web page. Name the page PaperAirplane.aspx. Add an <iframe> tag to the page in between the <div> tags that Visual Studio provides. Set the <iframe> height to 500 and the width to 750. Finally, set the <iframe> src to PaperAirplane.xaml.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PaperAirplane.aspx.cs"
          Inherits="PaperAirplane" %>
    
    <!DOCTYPE html PUBLIC "...">
    
    <html >
    <head runat="server">
         <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
    
            <iframe height="500"   
               width="750"  
               src="paperairplane.xaml"></iframe> <br />
        </div>
        </form>
    </body>
    </html>

11. Run the page. The PaperAirplane.xaml content appears in a frame in the page. The XAML content has the same functionality in the frame as it did when it was run in the browser:

    

    Because this is rendered from a typical ASP.NET page, you could include ASP.NET server controls along with the WPF content.

12. Add the XBAP content from the previous example to this site. First, create a new folder under the Project node in Solution Explorer. Name the folder XBAPContent. Right-click the new folder and click Add, Exiting Item. Navigate to the previous example's bin directory . Add XBAPORama.xbap, XBAPORama.exe, and XBAPORama.exe.manifest to this XAMLORama ASP.NET project.

13. Add a new link to the Default.aspx page. Set the NavigationUrl property to the XBAPORama.xbap file in the XBAPContent folder. Run the application and click the link that redirects to the XBAP content. You will see the XBAPORama.xbap content in the browser. The Web server downloads the XBAP content (you can see a little status bar in the browser, as shown in the following graphic). Try adding some items to the list box to ensure that it works.

    

    Here is the XBAP content running from in the ASP.NET site.

    

This example illustrates how it is possible to integrate HTML with XAML-based content. You also saw that it is possible to include XBAP content in an ASP.NET site. Although these techniques lie somewhat outside of the usual ASP.NET pipeline, XBAP-based and XAML-based WPF content is still useful in many cases.