SpriteHand
Module Border
  Andy's Blog
Module Border
Author: host Created: 3/6/2006 9:55 PM
Adventures in .NET

Silverlight for Interactive CD/DVD
By Andy Beaulieu on 1/11/2009 9:29 PM

Back in the day before broadband internet access, it was quite common to distribute Flash applications on CD or DVD along with large video files and interactive content. This was the only practical way for users to view video because internet connection speeds were too slow for streaming video.

But even today, there is still a demand for Interactive content on CD – a couple of examples that come to mind are educational software and media distributed at conferences and trade shows. Silverlight is an attractive option for interactive media, because of its quick adoption rate and small runtime install. So what if we wanted to use Silverlight as a solution for an Interactive CD?

There are a few ways we could go about this, including using a Stand-Alone Silverlight solution such as Desklighter. Or, we could use an HTML Application (HTA) – which is the approach I took for a recent project. An HTA is really just an HTML file, renamed to have an .HTA extension, and with optional embedded tags to control things such as Window Title, Menus, and Icon. Oh, and an HTA is a trusted application, so it can get access to the client operating system unlike a normal HTML page in a browser.

[DOWNLOAD SAMPLE CODE]

THE INGREDIENTS

1.       A Silverlight Application, compiled to a XAP.

2.       An HTML test page pointing to the Silverlight XAP (the testpage HTML file generated by Silverlight Tools for Visual Studio will work fine). Rename this file’s extension to .HTA so that it can be launched as an HTML Application (after renaming the file you can test launch it by double-clicking the HTA file). You can also add optional HTA attributes inside the section of your HTML to control things such as Window appearance and menus. An example Application tag is shown below, and you can find all of the HTA attributes here.

BORDER="Thin"
CAPTION="yes"
APPLICATIONNAME="Hello Silverlight DVD"
MAXIMIZEBUTTON="yes"
MINIMIZEBUTTON="yes"
SINGLEINSTANCE="yes"
SHOWINTASKBAR="yes"
SYSMENU="yes"
SCROLL="no"
SELECTION="no"
WINDOWSTATE="normal"/>

3.       An autorun.inf file.  This will allow us to “AutoPlay” the Silverlight application on CD or DVD. Autorun.inf is a simple text file with an [autorun] section containing the name of an Executable file to launch and an optional icon file to show:

[autorun]
OPEN=ShellExecuteWin.exe
ICON=setup.ico

* The important thing to note here is that the Autorun OPEN setting MUST point to an EXE file. We cannot point directly to our HTA file for launching.

4.       A small executable file to launch the HTA application (see note above). Since we want to keep our runtime requirements to a minimum, a wise choice for this little “bootstrap” EXE is Visual C++.  We can use Visual Studio 2008 to create a Win32 Project and add a call to ShellExecute, which allows us to launch another application:

ShellExecute(NULL,_T("open"),_T("AutoRunTestPage.hta"),_T(""),_T(""), 0 );

NOTE that the sample download includes the Visual C++ Project to save you some grief. But if you need to create your own VC++ launcher, remember these notes:

a.       You need to add includes to windows.h and shellapi.h

b.      In order to avoid dependencies on runtime DLLs which may not be present on a client’s system, you want to statically link. To do this, select Project Properties and select C/C++ and then Code Generation and make sure to select Runtime Library= Multithreaded (/MT)

THE SAMPLE DOWNLOAD

The download ZIP contains a sample implementation of a Silverlight HTA application with Autorun for CD/DVD. If you look in the DistributionFiles directory, you will see these files:

1.       AutoRunSilverlight.xap is our Silverlight Application

2.       AutoRunTestPage.hta is our HTML Application, containing the Silverlight App Reference

3.       Autorun.inf is our Autorun configuration file

4.       ShellExecuteWin.exe is our EXE launcher, created in C++ and using ShellExecute to launch the HTA

To complete the CD, you just need to burn these files onto the root folder of a disk. When a user inserts the disk, their experience will vary depending on their Autoplay settings in Control Panel.

Comments (8)

Blend and Silverlight with VS Dev Web Server
By Andy Beaulieu on 1/5/2009 8:56 PM

Recently I was working with a designer on a Silverlight project that accessed a WCF web service. We discovered that the project would work fine when launched from Visual Studio, but when launched from Expression Blend, it would fail on web service calls. As a coder, I generally run and debug from inside Visual Studio and only hop into Blend to do quick design, so I had never seen this issue before.

As it turns out, it's an issue with how Blend and Visual Studio interact with the Cassini Development Web Server. If you've done much Web Service development with Silverlight, you've probably learned that it's a good practice to set a static port value for the Development Web Service so that the port doesn't change between runs and cause errors.

To set a static port, you select Project/Properties in VS and then select the "Specific Port" option like below:

Unforunately (and here is where the problem lies), Blend does not honor this setting. So if you run your project from Blend (using F5 or the Project/Test Solution menu option), Blend will start a new instance of the Cassini Web Server on a different port, and web service calls will subsequently fail.

Fortunately, there is a pretty easy work-around for this problem. Since the WCF web services we call usually live in the same relative path as our Silverlight application, we can use the Url of the Silverlight application to compute the location of the WCF web service.

First we add a small method to get a relative resource (such as a WCF .svc file) based on the source location of our Silverlight app:

public static string GetUrlForResource(string resourcePage)
{
    string webUrl = System.Windows.Browser.HtmlPage.Document.DocumentUri.ToString();

    string containerPage = webUrl.Substring(webUrl.LastIndexOf("/") + 1);

    webUrl = webUrl.Replace(containerPage, resourcePage);

 

    return webUrl;

}

Then we can use this method to get the relative path of the WCF service (this will conveniently include the Port of the development web server), and create a manual binding to this Url:

string webServiceUrl = GetUrlForResource("MyService.svc");

System.ServiceModel.BasicHttpBinding binding = new System.ServiceModel.BasicHttpBinding();

webSvc = new MyService.MyServiceClient(binding, new System.ServiceModel.EndpointAddress(webServiceUrl));

 

This is actually a good practice for other reasons too, such as switching between environments like test/beta/production - which I alluded to in a previous blog post.

 

Comments (2)

Happy New Year!
By Andy Beaulieu on 1/1/2009 11:21 PM

Wow, what a great way to start off 2009 --- I'm honored to have received an MVP Award for the first time, for my work with Silverlight! If you're unfamiliar with the MVP program, you can learn more about it here.

I'm really excited about what Silverlight brings to web development, both present and future, and am looking forward to all the great things we'll see in 2009!

 

Comments (8)

MIX 10k Smart Coding Contest
By Andy Beaulieu on 12/22/2008 7:34 AM

The MIX 10k Contest asks, "What could you create for the Web if you only had 10 kilobytes of code?" ... and offers some great booty to the winners: the Grand Prize is a pass into MIX, 3 nights at the Venetian, and a $1500 Visa Gift Card!

Given the possibility of such fortune and glory, I couldn't pass up making an entry into the 10k. I created a little game reminiscent of Kaboom! but with a little twist: it uses the FlickR Public Feed to get recent photos with certain tags. The object is to catch all of the falling photos into your photo album. The neat thing about using the FlickR photos is that they do not increase the 10k size since they're provided from a web service. Also, the FlickR photos make the little game dynamic because they change constantly.

Shameless Plug: I NEED YOUR VOTE!
Go to the submission page and Rate it Up! The community prize is based solely on community votes.

For more info on the 10k contest:

Comments (0)

Physics Helper now supports Farseer 2.0!
By Andy Beaulieu on 12/21/2008 8:53 PM

The Physics Helper Library for Blend and Silverlight (more info here) now supports Farseer 2.0! Thanks to Ian Qvist (aka Genbox on the Farseer Project), I was able to resolve the tunneling issues with Farseer 2.0.

You can get the update (1.0.0.4) on the Physics Helper Codeplex site.

If you are using Farseer 2.0 outside of the Physics Helper controls and are seeing similar issues with tunneling (objects passing through each other and becoming "stuck"), then you might also want to try Ian Qvist's suggested fix:

In PhysicsSimulator.cs - change line 63/64 to the following:

internal int maxContactsToDetect = 10;
internal int maxContactsToResolve = 4;

Thanks Ian!

Comments (0)

Physics Helper Beta 3
By Andy Beaulieu on 12/15/2008 7:17 PM

Today a new version of the Physics Helper library was released to CodePlex. This version adds a Camera Controller class and a couple of new demos: Camera with Rag Doll and Camera with Truck

Overview

The Physics Helper for Blend and Silverlight contains several user controls which allow you to draw objects in Expression Blend 2, and have those objects translated directly into Physics objects using the Farseer Physics Engine. You can even add Joints to your creations to create wheels and connect limbs. This can be a great timesaver for creating games, as it is traditionally difficult to line up underlying physics geometries with your Blend artwork.

Intro Video

Watch this short video to see how easy it can be to design physics using Blend 2, Silverlight, and the Physics Helper controls:

LAUNCH VIDEO (please give the video a few moments to display)

Download

Download from Codeplex (includes source and demos below)

Enter Feedback/Discuss on Codeplex

Demos

These demos were created with minimal or no coding using the Physics Helper (click images to launch demos):

Egg on a Hill Car on a ramp
Simple Physics Game Rag Doll
Camera with Rag Doll Camera with Vehicle

What's New in Beta 3

1. A new Camera Controller has been added. Drop the Camera Controller on the same Canvas as your Physics Controller, and set the Body property to the object you want the Camera to follow. You can also optionally set ScrollSpeed and ZoomSpeed.

2. Two new demos have been added to show the Camera Controller in action.

3. Various other API changes and improvements

Known Issues

1. Elements that you want to have translated into Physics objects at run time must exist on the same Canvas as the Physics Controller. In the case of UserControls that are added dynamically, you need to have 1 instance of the UserControl on the Canvas at run time - other instances can be added through code.

2.  If you rotate or otherwise transform an object in Blend, the object will lose that rotation when running, and the Boundary determination will be incorrect.

3. This version does not work with Farseer Physics 2.0. I found that Farseer 2.0 has more tunneling issues (objects passing through each other and getting "stuck") when used with the Physics Helper, so I am sticking with Farseer 1.x for now. You can easily enough update the project to Farseer 2.0 if you need to (add a reference to the new Farseer assembly, and Resolve any namespace changes).

Comments (8)

Preview of Upcoming Physics Fun
By Andy Beaulieu on 11/18/2008 10:40 PM

One of the new controls I'm working on adding to the Physics Helper library for Silverlight, Blend and Farseer is a camera controller. You'll basically be able to just set a few properties on the camera control, such as the Physics Body to follow and the Zoom factor, and presto - the view will follow that physics body and smoothly zoom in and out.

The next iteration of the Physics Helper for Silverlight isn't quite ready, but I thought I'd share this fun little sample of the camera in use with a ragdoll! Note that you can use the mouse to manipulate the doll if he gets stuck.

 

Comments (2)

Using the Live Search API 2.0 with Silverlight
By Andy Beaulieu on 11/17/2008 7:18 PM

The Live Search API allows you to submit queries for Web Pages, Images, and other search types to the Live.com search service and then process results in whatever evil way you like :) When I'm training or presenting Silverlight, I like to use Live.com as a way to show Silverlight's web service integration and the power of RIA's in mashup scenarios.

The Live Search API was recently updated to version 2.0, and there are some changes to how you interact with the API. In this blog post, I'll give a quick and dirty step-by-step on how to interact with the new API.

1. Go to http://search.live.com/developers and create an API ID

2. Create a new SL solution and in the WEB project, right-click and select "Add Service Reference" and then enter this URL, where MY_APP_ID is the API ID you were given in step 1:

 http://api.search.live.net/search.wsdl?MY_APP_ID

 * When adding the service reference, be sure to enter LiveSearchService in the Namespace field.

3. In the Web Project, Create a new Silverlight-Enalbed WCF Web Service and name it LiveSearchWrapper.svc

4. In the Web Service, Add a new WebMethod to search for Web Pages, and a new Class to store and return results:

       [OperationContract]
        public List<SearchResult> DoSearch(string search)
        {
            LiveSearchService.LiveSearchPortTypeClient s = new LiveSearchPortTypeClient();
           
            SearchRequest request = new SearchRequest();

            // BE SURE TO ENTER _YOUR_ APP ID HERE!!!
            request.AppId = "MY_APP_ID";
            request.Query = search;
            request.Sources = new SourceType[] { SourceType.Web };

            request.Version = "2.0";
            request.Market = "en-us";
            request.Adult = AdultOption.Moderate;
            request.AdultSpecified = true;

            SearchResponse response = s.Search(request);


            // create a collection of results
            List<SearchResult> lstWebPages = new List<SearchResult>();

            foreach (WebResult foundItem in response.Web.Results)
            {
                // web page hit
                SearchResult result = new SearchResult();
                result.ResultUrl = foundItem.Url;
                result.Description = foundItem.Description;
                lstWebPages.Add(result);
            }

            // send 'em down to the client
            return lstWebPages;

        }

        public class SearchResult
        {
            public int HitNumber { get; set; }
            public string ResultUrl { get; set; }
            public string ImageUrl { get; set; }
            public string Description { get; set; }
            public double ImageHeight { get; set; }
            public double ImageWidth { get; set; }
        }

 

3. In the Silverlight Project, open Page.xaml and add some controls and layout INSIDE the <Grid> to search and display. Note that we are adding a search box, a search button, and a nicely formatted data template to the ListBox rows:

       <Grid.RowDefinitions>
            <RowDefinition Height="25" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal">
            <TextBox x:Name="txtSearch" Width="200" />
            <Button x:Name="btnSearch" Content="Search" />
           
        </StackPanel>
           
           
        <ListBox x:Name="lstResults" Grid.Row="1" Height="257" Width="388" RenderTransformOrigin="0.5,0.5" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" Margin="5,5,5,5" Width="250">
                        <HyperlinkButton NavigateUri="{Binding Path=ResultUrl}" TargetName="_blank" Content="{Binding Path=ResultUrl}" />
                        <TextBlock Text="{Binding Path=Description}" TextWrapping="Wrap" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

4. Add a Click Event handler to btnSearch like so:

       private void btnSearch_Click(object sender, RoutedEventArgs e)
        {
            DoSearch();
        }

5. Add code to call the web service DoSearch method asynchronously (note that LiveSearchNewApi should be replaced with your Project name):

  private void DoSearch()
        {
            LiveSearchWrapper.LiveSearchWrapperClient webSvc = new LiveSearchNewApi.LiveSearchWrapper.LiveSearchWrapperClient();
            webSvc.DoSearchCompleted += new EventHandler<LiveSearchNewApi.LiveSearchWrapper.DoSearchCompletedEventArgs>(webSvc_DoSearchCompleted);
            webSvc.DoSearchAsync(txtSearch.Text);
        }

        void webSvc_DoSearchCompleted(object sender, LiveSearchNewApi.LiveSearchWrapper.DoSearchCompletedEventArgs e)
        {
           
            lstResults.ItemsSource = e.Result;
        }

That's it! Run the solution and try entering some search terms and then click the search button. Note that in the web service search, we are specifying a SourceType of Web, but the Live Search service offers many other Source Types including Image and Video.

Comments (1)

Silverlight Futures: Building Business Focused Applications
By Andy Beaulieu on 10/30/2008 1:41 PM

Silverlight 2 lays a great foundation for building line of business applications, but there is still a good chunk of grunt work when it comes to validation and workflow... but what if you had all of the power of XAML and the .NET framework _and_ the ease of rapid development like the Client/Server tools of the 90's gave us?

Well, it looks like Microsoft is hard at work to make this happen! Check out this Sneak Preview from Jamie Cool, recorded at PDC 2008, where he shows off a future set of project templates for Silverlight business app development:

http://channel9.msdn.com/pdc2008/PC11/

You might want to fast-forward about 30 minutes into the talk, where Jamie starts talking about "Silverlight Futures." Here are some interesting points from the video:

  • Jamie uses a prototype Silverlight template to add a new "Silverlight Business Logic Class" to a web project, and then instantly use that class from the Silverlight project (without adding a web service reference).
  • He uses an "ObjectDataSource" class to bind results from a Business Logic class to a DataGrid...And add sorting and paging... with no code!
  • He shows a DataForm control and by setting a DataContext property, gets instant default validation type checking and feedback
  • By adding MetadataType attributes to a server-side class, the Silverlight client automatically picks up those validation changes on the client - so by writing the validation logic in one place, it carries out to both client and server.
  • He makes a single SubmitChanges() call to synchronize changes on the client to the server.
  • He uses something called a "Frame" control and StackPanel to create a navigation workflow --- including Browser History!
  • He adds a Login control to immediately generate a Login screen, and then uses an attribute on his business logic class to lock down access to data based on role.

 

Here is the session summary for Jamie's talk:

Silverlight Futures: Building Business Focused Applications
What if you could develop your solutions with the ease pioneered by Microsoft Office Access, deploy them like an Internet application, and take advantage of the power of Microsoft .NET? Learn about an exciting new technology that is all about making business applications for RIA (Rich Internet Applications) much easier to build. In this session, hear how we've made n-tier application development as simple as traditional 2-tier, provided application level solutions to developers, and how we're doing all of this with the same .NET platform and tools on both the client and server.

Comments (3)

The Silverlight Toolkit is Live
By Andy Beaulieu on 10/28/2008 10:29 AM
 
Just a little while ago at his PDC Keynote, ScottGu announced the Silverlight Toolkit, a collection of Silverlight controls available on Codeplex (live demo here). If you’ve used the ASP.NET AJAX Control Toolkit, then you’ve probably come to appreciate the utility of a community-driven set of controls, so it is great to see a project of similar scope crop up in the Silverlight universe. In this blog post, I’ll talk about how to get started with the Toolkit and playing with the TreeView control.
 
 

 

Adding Controls to the Toolbox

Even thought the Visual Studio designer is read-only for Silverlight, it can still be handy to drag/drop controls from the toolbox into the XAML editor. In order to include the new Silverlight Toolkit controls to your toolbox, just follow these steps:

1.       Right-click the VS toolbox and select “Add New Tab.” Name the tab “Silverlight Toolkit.”

2.       Right-click within the new tab and select “Choose Items.”

3.       In the “Choose Toolbox Items” dialog, go to the “Silverlight Components” tab.

4.       Navigate to the folder where you extracted the toolkit, and then to the Binaries subfolder. Then select the Microsoft.Windows.Controls.dll.  This assembly contains all new controls except the new Charting controls.

5.       Repeat the above step, selecting the Microsoft.Windows.Controls.DataVisualization.dll assembly. This assembly contains the new charting functionality.

TreeView Control

This control does what you might expect  - show a hierarchy of items in an expandable list. But what makes this TreeView control different than what you might be used to is the power of templating in Silverlight.

Let’s look at a very simple example. To add items to the TreeView at runtime, we can define TreeViewItem objects and give them “Header” objects for labels:

    TreeViewItem fruits = new TreeViewItem();
            fruits.Header = "Fruits";
            fruits.Items.Add("Banana");
            fruits.Items.Add("Orange");
            fruits.Items.Add("Apple");

            TreeViewItem veggies = new TreeViewItem();
            veggies.Header = "Veggies";
            veggies.Items.Add("Carrots");
            veggies.Items.Add("Celery");
            veggies.Items.Add("Lettuce");

            tvTest.Items.Add(fruits);
            tvTest.Items.Add(veggies);

 

Hierarchical Data Sources

We can also bind the TreeView to a hierarchical Data Source using the HierarchicalDataTemplate control, and the TreeView will automatically traverse the hierarchy and render each cascading node appropriately. Take, for example this class:

 public class FoodItem 
    {
        public FoodItem(string name, string url)
        {
            Name = name;
            ImageUrl = url;
        }

        public List<FoodItem> Items { get; set; }
        public string Name { get; set; }
        public string ImageUrl { get; set; }
  }

Note that the FoodItem class contains a list of more FoodItems. This allows us to define a hierarchy with FoodItems – for example, Fruits and Veggies:

List<FoodItem> categories = new List<FoodItem>();
FoodItem fruits = new FoodItem("Fruits", " Fruit_in_basket.jpg");
fruits.Items = new List<FoodItem>();
fruits.Items.Add(new FoodItem("Apple", "Red_Delicious.jpg"));
fruits.Items.Add(new FoodItem("Banana", " Banana.png"));
fruits.Items.Add(new FoodItem("Orange", "Orange.JPG"));
categories.Add(fruits); 

FoodItem veggies = new FoodItem("Veggies", "salad.jpg");
veggies.Items = new List<FoodItem>();
veggies.Items.Add(new FoodItem("Carrots", " Carrots.JPG"));
veggies.Items.Add(new FoodItem("Cucumbers", " Cucumbers.jpg"));
veggies.Items.Add(new FoodItem("Peppers", " peppers.jpg"));
categories.Add(veggies);

In order to consume the hierarchical data source, we set up a HierarchicalDataTemplate, with our preferred visual layout for each node in the TreeView. Note how we set the Binding of the HierarchicalDataTemplate to the member collection in the data source class that defines the hierarchy (in this case the generic List “Items”):

<controls:TreeView x:Name="tvFoodItems">
    <controls:TreeView.ItemTemplate>
        <controls:HierarchicalDataTemplate ItemsSource="{Binding Items}">
            <StackPanel Orientation="Horizontal">
                <Image Height="30" HorizontalAlignment="Left" Width="30" Source="{Binding ImageUrl}" />
                <TextBlock Text="{Binding Name}" Margin="5,0,0,0" HorizontalAlignment="Left" FontSize="18" />
            StackPanel>
        controls:HierarchicalDataTemplate>
      controls:TreeView.ItemTemplate>
controls:TreeView>

We can then bind the TreeView in code to our hierarchical list:

tvFoodItems.ItemsSource = categories;

… after which we have an expandable hierarchy like so:

So Much More

I expect there to be a flood of blog posts and resources cropping up over the next week or so on the Silverlight Toolkit – and I’m very excited about the future of the toolkit. According to ScottGu’s release blog post, he says “We will continually add new controls to the control pack over the next few months (we expect to ultimately have more than 100 controls total).   Wow! That’s a lot of controls, and given what’s in this initial release, I look forward to seeing what great things the team comes up with!

 

Comments (4)

Module Border Module Border
Module Border
  Subscribe
Module Border
RSS   Twitter
Module Border Module Border
Module Border
  Diversions
Module Border


PHYSAMAJIG
This Windows app was created using Physics Helper XAML, and the Farseer Physics Engine.
DOWNLOAD

MORE INFO



TALKING RAGDOLL
This Windows Phone app was created using Silverlight, the  Physics Helper Library,  and the Farseer Physics Engine. It gets interesting when you import your friends photos and have your way with them!

MORE INFO



BOSS LAUNCH
This physics game won first place in the Server Quest Contest. Created using Silverlight , the Physics Helper Library,  and the Farseer Physics Engine.
PLAY IT

MORE INFO



DESTROY ALL INVADERS
A scrolling shooter game where the objective is to destroy the invading UFO's flying over a neighborhood of your choosing. Imagery provided by Microsoft Virtual Earth. Created using Silverlight.
PLAY IT

INFO AND CODE



PHYSICS HELPER DEMOS
These demos were created for the Physics Helper Library, which makes it easy to create physics games and simulations using Expression Blend, Silverlight, and the Farseer Physics Engine.
PLAY IT

INFO AND CODE



HOOK SHOT
This little basketball game took first place in the TeamZoneSports Silverlight Contest. Created using Silverlight and the Farseer Physics engine.
PLAY IT

MORE INFO



SORT THE FOOBARS
A game where you need to sort the good foobars from the bad ones. Created using Silverlight and the Farseer Physics engine.
PLAY IT

MORE INFO



POLYGON PHYSICS DEMO
A demo showing polygon physics where the user draws physics objects with the mouse. Created using Silverlight and the Farseer Physics engine.
PLAY IT

MORE INFO



SILVERLIGHT ROCKS!
Destroy the asteroids before they destroy your ship! Created using Silverlight.
PLAY IT

INFO AND CODE



FISH GAME
A simple game of harpoon-the-fish. Written using the AJAX Sprite Toolkit.
PLAY IT

INFO AND CODE

Module Border Module Border
Module Border
  Search_Blog
Module Border
Module Border Module Border
Module Border
  Blog_Archive
Module Border
Module Border Module Border
Copyright (c) 2014 andy.beaulieu.com - Login