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

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 (0)

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 (0)

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)

Physics Helper Beta 1!
By Andy Beaulieu on 10/18/2008 1:12 AM


UPDATE 12/15/2008: There is a new version of the Physics Helper Controls! More info here...

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. This can be a great timesaver for creating games, as it is traditionally difficult to line up underlying physics bodies and 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

PhysicsHelper is now on CODEPLEX!

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!!!

What's New in Beta 1

1. The algorithm to determine UIElement boundaries is greatly improved (based on Johnathan Porter's boundary detection algorithm he introduced in Physics2D.NET)

2. You can now nest PhysicsJoint controls inside UserControls. This is very handy for creating game characters that need joints for arms, legs, etc. Just be sure to (a) use a Canvas layout inside your UserControl, and (b) give you UserControl a name when placing it into your main Canvas. See the RagDoll Demo for an example of this.

3. The PhysicsController now has a MousePickEnabled property which automatically allows manipulation of objects with the mouse. This is handy for testing/debugging your creations.

4. Various other API changes and improvements

Known Issues

1. Dynamically adding objects through code isn't as clean as I'd like (see the RagDoll demo code for an example of dynamic adding). The issue is that UI elements need to be drawn to the visible screen before their boundary can be determined. So the temporary hack is to have a timer to "wait" for the element to be displayed.

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. As always, there is room for refactoring and redesign, but you can surely do some fun things with Beta 1 :)

What's Coming

UPDATE 10/18/2008: Physics Helper is now available on Codeplex! You can submit feeback and enter discussions on the Codeplex forum. If you would like to contribute to this project and are familiar with Farseer, Blend, and Silverlight, please let me know!

Comments (3)

Ported Stuff to Silverlight RTW
By Andy Beaulieu on 10/15/2008 3:29 AM
I have most of my Silverlight games and demos ported to Silverlight 2 RTW. Here are links to the more popular games and demos...

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.
PLAY IT

INFO AND CODE


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

INFO AND CODE


SORT THE FOOBARS
A game where you need to sort the good foobars from the bad ones.
PLAY IT

MORE INFO


POLYGON PHYSICS DEMO
A demo showing polygon physics where the user draws physics objects with the mouse.
PLAY IT

MORE INFO


PHYSICS HELPER FOR BLEND
This work-in-progress allows designers to draw out objects in Expression Blend, and those objects are immediately translated into Physics objects using the Farseer Physics Engine.

MORE INFO

 


SILVERLIGHT ROCKS!
Destroy the asteroids before they destroy your ship!
PLAY IT

INFO AND CODE


DEEPZOOM FOR ECOMMERCE
A real world example of using DeepZoom for E-Commerce.
VIEW IT

MORE INFO


USING HITTEST METHOD IN SILVERLIGHT 2 FOR COLLISION DETECTION
A small sample showing how to use HitTest for accurate collision detection in Silverlight 2. This method is also used in the Silverlight Rocks! sample above. 
MORE INFO

Comments (9)

Silverlight 2 Official Release!
By Andy Beaulieu on 10/13/2008 10:26 AM

I'm half wondering if the marketing folks had an itchy trigger finger, but according to this Press Release, Silverlight 2 is officially released!

However, at this time the Silverlight home page, and Scott Guthrie's blog have no reference to the official release.

At any rate, I'm guessing that today is the day :) So if you have some Silverlight Beta 2 or RC0 code out there, go get it ready for RTW!

UPDATE 10/13/2008: Oops, I should always read the fine print. At the bottom of the press release, it says:

Silverlight 2 will be available for download on Tuesday, Oct. 14, at http://www.microsoft.com/silverlight. Customers already using a previous version of Silverlight will be automatically upgraded to Silverlight 2.

 

Comments (0)

Getting Started with Silverlight Game Development
By Andy Beaulieu on 10/4/2008 5:33 AM

I had a question in the previous blog post about how to get started with Silverlight Game Development. Here are a bunch of resources to get you started...

1.       My Blog (shameless plug) has some good resources:

a.       Simple 2D Game: Silverlight Rocks! Is an asteroids clone which demonstrates basic sprites in Silverlight, collision detection, etc. This game was initially written for Silverlight 1.1 Alpha, so beware that there is some “junk in the trunk.”

 

b.      Scrolling and Sprites: Destroy All Invaders is a scroller and source code download is provided. This too was originally a 1.1 Alpha game so some refactoring is in order.

 

c.       Physics:  The Polygon Physics Demo also provides source code and shows how you can use the Farseer Physics engine to provide great physics effects. Also, the Physics Helper, although in early stages, I believe will make Physics Games much easier to develop using Farseer.

 

d.      Media Elements: I tried to compile a list of some media resources for audio effects and artwork.

 

e.      Presentations: I’ve done some presentations for ReMIX, TechEd, and various code camps and user groups which are on this site. The samples and slides can be useful. Silverlight 2 Animation, Advanced Animation and Input, Silverlight for Casual Games.


 

2.       Farseer Physics Engine: What’s a great game without physics? Unless you’re a math genius and want to code your own, take a look at Farseer, created by Jeff Weber and ported to Silverlight by Bill Reiss. You can get lots of help on the discussion board.


 

3.       Silverlight Games 101: Bill Reiss has a great series of articles on beginning Silverlight Game Development.


 

4.       Silverlight Tips of the Day: Mike Snow centers most of his blog posts on Silverlight around game development. These are quick reads, but great information provided.


 

5.       Chris Cavanagh’s Blog has some Physics samples and other great Silverlight resources.


 

6.       Cameron Albert has a blog with some good game dev info, including info on Farseer Physics and scripting.


 

7.       Article Series: Developing a Casual Game with Silverlight 2: This new series of articles by Joel Neubeck looks to be very promising!


 

8.       Silverlight Cream: Dave Campbell keeps a fantastic, daily blog entry of what’s new in Silverlight. Even though this isn’t specific to game development, there is a ton of useful info bubbling up from this blog and it’s a must read!


 

9.       Silverlight Games: It’s good to see what other Silverlight game developers are coming up with. Mashooo is maintaining a long list of Silverlight Games. Also the Community Gallery on Silverlight.net has many games, lots with source provided.

10.    Laumania.Net: Another development blog, and the author has created some good getting started samples for Farseer Physics and Silverlight, the Farseer Simple Samples on Codeplex. 

Got any more? I know I've forgotten some, so let me know and I can add the links into the list.

Comments (4)

Hook Shot takes First!
By Andy Beaulieu on 9/30/2008 9:11 AM

 

Woohoo! Hook Shot took first place in the TeamZoneSports Silverlight Game Programming Contest!

I threw this game together fairly quickly using Visual Studio 2008, Silverlight Tools, Expression Blend, and the Farseer Physics Engine. Most of the media elements were drawn out by me in Blend, but I did use some public domain media from various sources, which you can read about here.

Check out all of the contest winners and entries

Play the Game

Read more about Hook Shot

Check out some other stuff I created with Silverlight

 

Comments (4)

Silverlight 2 RC0 Crash without Error
By Andy Beaulieu on 9/26/2008 7:15 PM

While porting a Silverlight 2 Beta 2 app to RC0, I suddenly found my newly converted app would just terminate shortly after load. No exception messages, no JIT debugging, just death. The end result is that a blank area is left where the Silverlight application is supposed to be rendered. After setting breakpoints all over the place, I found that the Application_Exit event was being hit, but the Application_UnhandledException event was never being fired.

If this happens to you, I would recommend checking your Style definitions. In my case, I had a ListBoxItem style defined in my App.xaml, with a Foreground property. This property was fine in SL B2, but causes the nasty crash in SL RC0:

       <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">

            <Setter Property="Foreground" Value="#FF000000" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="ListBoxItem">

                        <Grid x:Name="Root">

                            <ItemsPresenter  />

                            <ContentPresenter

                        Content="{TemplateBinding Content}"

                        Foreground="{TemplateBinding Foreground}" />

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

 

Comments (0)

Module Border Module Border
Module Border
  Blog_List
Module Border
Module Border Module Border
Module Border
  Subscribe
Module Border

RSS

Module Border Module Border
Module Border
  Diversions
Module Border

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 2.
PLAY IT

INFO AND CODE



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

INFO AND CODE



SORT THE FOOBARS
A game where you need to sort the good foobars from the bad ones. Created using Silverlight 2 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 2 and the Farseer Physics engine.
PLAY IT

MORE INFO



SILVERLIGHT ROCKS!
Destroy the asteroids before they destroy your ship! Created using Silverlight 2.
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
Archive
<November 2008>
SunMonTueWedThuFriSat
2627282930311
2345678
9101112131415
16171819202122
2324252627