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

There's an App for THAT?!
By Andy Beaulieu on 11/30/2009 6:34 PM


Let it be known that the game previously known as "Froggy Math" is now known as "Wormy Math"

"Why" you ask?

It only figures that with all of the Flash, Silverlight, and Mobile games being created every day that there would be some overlap in ideas and titles. But this one is just bizarre:

Yesterday, I uploaded a little Silverlight educational game which I had called "Froggy Math." When I came up with the title just a few weeks ago, I had searched fairly extensively to make sure the name wasn't taken.

Today, I was searching around again for Froggy Math, and hit on this iPhone app released just a couple of weeks ago:

Not only are the names the same, but the ideas are similar (at least, as far as I can tell - I don't have an iPhone so I haven't actually played this game).

I have to say though, I think my game looks a little cooler :) and I'm guessing has better physics!

 

Comments (1)

Silverlight Game: Froggy Math
By Andy Beaulieu on 11/29/2009 9:46 PM


"Froggy Math" is a little educational Silverlight game that I've been picking at when I had a free hour here and there for the past several weeks. The goal was to create something for my kids to practice their math facts (which I learned are now called "combinations"), and at the same time pique their interest in programming. I think the result was pretty good --- at least the kids seem interested in playing for awhile!

In Froggy Math, the player feeds worms to a hungry frog - but the correct worm must be picked out of the pack. The player can choose to practice Multiplication, Division, Addition or Subtraction and a "Report Card" keeps track of their grade in each subject.

The game was pretty quick to knock off and here are some notes on the development:

  • Uses the Physics Helper Library (Behaviors) for Physics.
  • The Worms are manipulated using a "pick spring"
  • There is a lot of use of Perspective 3D transforms - see if you can find them all :)
  • Uses the Fluid Container Behavior for the water effect
  • Uses GPU Acceleration, which greatly reduced CPU usage with all of the physics and fluid container action.
  • Isolated Storage is used to store the player's "report card" statistics.

I would consider this a "beta" release so if anyone has any suggestions or bugs, please let me know!

 

Comments (6)

Sharing Blend Workspace Settings
By Andy Beaulieu on 11/19/2009 8:49 PM


Expression Blend 3 has two pre-defined Workspaces, available under the Window/Workspaces menu.

  1. the Design Workspace is tuned for layout and UI creation, and is the default view you see in Blend.
  2. the Animation Workspace is tuned for creating Storyboard Animations and gives you a larger view of the StoryBoard timeline.

We can also create and save our own custom Workspaces using the Window/Save as New Worspace menu option. And we can Rename and Delete Workspaces using the Window/Manage Workspaces menu option.

Workspaces save the following information:

  • visibility of panels
  • the size and orientation of panels
  • the panels that are within panel groups
  • whether a panel is floating or docked

Sharing Blend Workspace Settings

I was recently asked, how can we share Workspace settings across multiple users? For example, you may have set up the perfect Workspace for completing a task, and want to share this with other users in your team.

While Blend does not support this natively, we can hack around a bit to get a Workspace copied to another machine.

  1. Copy the Workspace settings files stored in this folder:

    %APPDATA%\Microsoft\Expression\Blend3\Workspaces

    Each Workspace has a "default" version (containing the original settings from the "Save" operation), and a "modified" version (containing any changes made after the Save).
  2. We also need to add settings to the user.config file located in this folder:

    %APPDATA%\Microsoft\Expression\Blend3\

    Open the user.config file in your favorite XML editor (well, notepad works). Look for the node containing UserWorkspaces, and add the name of the Workspace to this value. Note that we can add multiple Workspace names, with a pipe delimiter. 

    <ConfigurationObject Name="WorkspaceService">
        <PrimitiveObject Name="ActiveWorkspace">WorkspaceX</PrimitiveObject>
        <PrimitiveObject Name="UserWorkspaces">WorkspaceX|WorkspaceY</PrimitiveObject>
      </ConfigurationObject>

Comments (2)

Silverlight 4 Beta Summary
By Andy Beaulieu on 11/18/2009 5:29 PM

At the PDC Conference today, The Gu unveiled the first public release of Silverlight 4 (Beta). This release has some really great additions, but I am most excited about the advances in Business Application Development for Silverlight.

Why will Silverlight 4 be better for Business App Development?

  1. RIA Services
    WCF RIA Services (formerly .NET RIA Services) makes it quick and easy to create a Service layer that wraps your Data Access Layer - whether your DAL uses the Entity Framework, LINQ to SQL, or another technology. Note the name change from ".NET RIA Services" to "WCF RIA Services." As confusing as another name change is, this helps clarify that this new release is built on top of WCF - The communications channel from the Silverlight client to the RIA Domain Service is now a *.svc file - which means we can Add a Service reference to the service side, get WSDL, and customize WCF service settings.

  2. Cider Support
    VS2010 includes a XAML editor (Cider), supporting drag/drop forms design and data binding. In the past, developers needed to learn Blend to do basic GUI form design. Don't get me wrong, I love Blend : and we will still need to switch over to Blend to take advantage of Behaviors, States, Templating, animation, drawing, and other tasks. But many developers were turned off by the fact that Visual Studio had no WYSIWYG designer for XAML.

  3. Data Sources Window
    WCF RIA Services and VS2010 now support a rapid Drag/Drop design experience which allows you to quickly put together data-enabled Silverlight applications.

Getting Started with Silverlight 4 Beta

Here are some links to get you past the burn and into the groove...

Silverlight 4 Beta, RIA Services... and Beer!
I've updated my Beer database demo with a walkthrough for Silverlight 4, VS2010, and the latest RIA Services.

Silverlight 4 Beta: Implicit Styles
We've been waiting for this little feature for awhile! Finally we can set a global style for a control.

Silverlight 4 Beta - A Guide
This is a great overview of new stuff from Tim Heuer.

Silverlight 4 Tech Whitepaper
John Papa walks through lots of the new goodies in SL4.

Video Resources *UPDATED*

Silverlight 4 Beta Videos on silverlight.net
Tim H. has been busy indeed, and has published a slew of videos for Silverlight 4 including most of the new toys!

PDC09 Videos
At this point, they're just starting to trickle in, but keep checking here for drops of the session recordings from PDC09! Day 2 has all of the Silverlight goodies.

 

Comments (1)

Silverlight 4 Beta: Implicit Styles
By Andy Beaulieu on 11/18/2009 5:24 PM

The ability to create Implicit Styles has been a sorely missed feature in Silverlight… until Silverlight 4! The concept of an implicit style is very simple – you define how you want ALL instances of a control to look in one place (you can then override those styles if you need to).

Setting an implicit style in XAML

Let’s say we want all of our TextBox controls in our application to have White text on a Red background. We can step into our App.xaml and add the following XAML:

    <Application.Resources>
              <Style TargetType="TextBox">
                     <Setter Property="Background" Value="#FFFF0000"/>
                     <Setter Property="Foreground" Value="#FFFFFFFF"/>
              </Style>
    </Application.Resources>

The key here is that we did NOT specify an x:Key value on the TextBox – only a TargetType. After this change, if we add a couple of TextBox controls to a UserControl, we’ll see the style take effect:

<StackPanel Width="100">
       <TextBox Text="TextBox 1" />
       <TextBox Text="TextBox 2" />
</StackPanel>


Of course, we can override a property that is styled if we wish – for example maybe we want to change the foreground colors of the TextBoxes to a color other than White:

<StackPanel Width="100">
       <TextBox Text="TextBox 1" Foreground="Blue" />
       <TextBox Text="TextBox 2" Foreground="Green" />
</StackPanel>

Creating Implicit Styles in Blend

To create an Implicit Style in Blend, right-click an element and select Edit Template/Edit a Copy or Edit Template/Create Empty.

… then select the “Apply to all” radio button option in the Create Style Resource dialog:

Some Limitations

Currently, Silverlight 4 does not support BasedOn styling for Implicit Styles. This is possible in WPF and allows for the “tweaking” of a style at a local scope. For example, you may define an Implicit style for a TextBox at the application level, but then want to tweak just a couple of properties of the style in a local scope (maybe a UserControl or Container).

Comments (0)

Silverlight 4 Beta, RIA Services... and Beer!
By Andy Beaulieu on 11/18/2009 2:27 PM

Silverlight 4 Beta and Visual Studio 2010 add much in the line of Rapid Application Development. Besides adding support for the Cider XAML designer and properties window, we now have Data Sources Window support for RIA Services.

In this (quite long) blog post, I’ll walk through the creation a Line of Business-type application using Silverlight 4, RIA Services, and Visual Studio 2010.

Contents

The Ingredients. 1

Getting Started. 1

Adding a New Page. 2

Adding the Database and Image Assets. 3

Creating the Data Access Layer. 4

Creating the Domain Service Class. 6

Using the Data Sources Window for RAD Data Forms. 8

Adding a ComboBox to the Details View.. 10

Saving Changes. 15

Adding New Records. 16

Deleting Records. 17

Adding Validation. 17

Custom Validation + Shared Classes. 19

 

The Ingredients

Ensure you have all of the required ingredients:

Visual Studio 2010 Beta 2

Silverlight 4 Tools Beta for Visual Studio 2010

The Sample Code for this Walkthrough

Getting Started

Create a new Silverlight Business Application Template named BeerDB.

The Business Application Template creates a solution with .NET RIA Services enabled, and includes a Silverlight Navigation application with separate “Views” and a MainPage. Run the application by hitting F5 and note the project that was generated. At the top-right of the screen are “home” and “about” links. When you click these, you are brought to the appropriate View in the project. Close the browser window to stop debugging.

Adding a New Page

Let’s add in a new View to display our Beer Maintenance page. Right-click the Views subfolder in the BeerDB (Silverlight) project and select Add/New Item. Select Silverlight Page and name this page “BeerMaintenance.xaml”

Now we need to add a link from the Main Page to our new View. In Solution Explorer, find MainPage.xaml in the Silverlight project and open it. In the Document Outline window (View/Other Windows/Document Outline), find and select the Link1 and Divider1 elements.

Copy and Paste this XAML to add in a new HyperlinkButton and Rectangle Divider, and set the NavigateUri property to our new BeerMaintenance page.

    NavigateUri="/BeerMaintenance" TargetName="ContentFrame" Content="Beers"/>

Run the project. Note that the new “beers” link is available and you can navigate between all of the Views.

Adding the Database and Image Assets

We’ll use a simple file-based SQL server database, placed in our App_Data folder of the Web project. The database includes Uri’s to images of Beer Labels, which we’ll also bring into the project.

In the BeerDB.Web Project (Web Application),  right-click the App_Data folder and select Add/Existing Item. Browse to the “Database.mdf” file (from the download for this walkthrough).

In the BeerDB.Web Project (Web Application), right-click the ClientBin folder and select Add/New Folder. Name the new folder Images. Right-click the Images folder and select Add/Existing Item. Browse and select all of the beer label images (from the download for this walkthrough.

Your BeerDB.Web project should now look something like this:

Creating the Data Access Layer

We’ll use the Entity Framework for our Data Access Layer, but note that we have lots of options here (LINQ to SQL, POCO, etc).

In the BeerDB.Web Project (Web Application), right-click and select Add/New Item. Select ADO.NET Entity Data Model and name the model BeerModel.edmx

Select Generate from Database for the first Step

In the next step, note that our Database.mdf is automatically selected. Enter “BeerEntities” for the connectionstring settings.

In the next step, select the Beers and Brewers tables and name the Model Namespace “BeerModel”:

Click “Finish” to complete the Entity Data Model Wizard. Note our simple database schema. Close the BeerModel.edmx and then Build the Project.

Creating the Domain Service Class

Right-click the BeerDB.Web project and select Add/New Item. Select Domain Service Class and name the class BeerService.

NOTE: If the next dialog comes up empty, just close and Rebuild the Solution, then repeat the above step.

In this step, we want to be able to edit and add Validation metadata, so check Enable Editing for both tables and “Generate associated classes for Metadata.”

Using the Data Sources Window for RAD Data Forms

Build the application to ensure everything is sync’ed up (there is a good amount of code generation happening with RIA Services!)

Back in the Silverlight application, find the BeerMaintenance.xaml View and open it. Open the Data Sources Window (from the menu, select Data/Show Data Sources). Select the Beer Entity under the BeerContext:

 

 

 

 

 

 

 

 

 

 

 

 

… and drag the Beer entity to the design surface.

A DataGrid and DomainDataSource are added to the page XAML. Also, look at the codebehind file (BeerMaintenance.xaml.cs) and note that a LoadedData event handler has been added to check for and raise any errors.

Run the project and notice the Grid gets populated:

Next we’ll add a “Details” View. Click the Beer drop-down in the Data Sources Window and select “Details” view:

Drag the Beer entity from the Data Sources onto the design surface, just under the DataGrid. Note that a Details view is automatically generated for you:

NOTE: We could also the the DataForm control for this Details View. However, VS2010’s Cider Designer does not support editing of Templates – so we would instead need to use Expression Blend, or hand-edit the template in XAML.

Adding a ComboBox to the Details View

Let’s add a Dropdown (ComboBox) for the Brewers. In the Data Sources Window, select the Brewer Dropdown and the select Customize:

We want to show a ComboBox for the Brewers selection, so select ComboBox and click OK.

Back in the Data Sources window, drop down Brewer again and select ComboBox:

Delete the existing “Brewer Id” TextBox and replace it with a ComboBox by dragging the Brewer entity from the Data Sources window into the Grid Cell.

IMPORTANT NOTE: The following step is a temporary work-around for the Silverlight 4 Beta – there is an issue where the DomainDataSource cannot expose its Type information to the Design Surface. Hopefully a future release will fix this issue! But in the meantime we need to add a d:DataContext attribute as follows:

We need to inform the Design Surface/Properties Window that our main Grid container will be bound to a Beer at runtime. We can do this using a design-time DataContext attribute to our container Grid:

        d:DataContext="{d:DesignInstance Type=my:Beer}" DataContext="{Binding ElementName=beerDomainDataSource, Path=Data}" …

Now we can data bind our ComboBox. Select the new ComboBox and in the Properties Panel, select the Advanced Properties icon next to SelectedItem and then “Apply Data Binding”

We want to bind the SelectedValue of the ComboBox to the Brewer value for the Beer, so select the Brewer property by double-clicking on it:

Then, set the SelectedValuePath to BrewerId:

 

Next, we’d like to display the name of the Brewery in the ComboBox instead of the Id, so change the DisplayMemberPath property to BreweryName:

 

There is one other little thing to take care of for the ComboBox, and this is because of timing issues which I talked about in a previous blog post. In order to make sure that the ComboBox has its Items filled at the time its SelectedItem is bound, we need to make both the Main Beer DomainDataSource and the Brewers DomainDataSource point to the same Data Context.

To do this, add in a Resources section to the page and define a BeerContext…

    <navigation:Page.Resources>

        <my:BeerContext x:Key="beerDomainContext" />
    </navigation:Page.Resources>

Then, find the beerDomainDataSource (you can use the Document Outline to find it) and in the Properties Window, set its DomainContext to the beerDomainContext static resource (remember that you can double-click on the final element you want to bind to once you navigate to it).

Then find the brewerDomainDataSource and again set the DomainContext to the beerDomainContext. Now, both DomainDataSource objects are pointing to a single DataContext.


Run the project, and note that the ComboBox is populated with Brewers, and shows the correct Brewer for each selected row.

Saving Changes

So far we have a simple Master/Detail setup, but we haven’t actually submitted changed back through the Service layer and into the Database.

Add a Button to the UI named btnSave. Double-click this button to get to the event handler in the code-behind.

At the very top of the class file, add a using statement to import the BeerDB.Web namespace (this is the namespace for the RIA Services generated Context and Proxy classes):

using BeerDB.Web;

At the top of the class definition, add a variable to store the Domain Data Source instance for beers:

DomainDataSource _ddsBeers;

In the OnNavigatedTo event handler, get a reference to the beerDomainDataSource in code, and wire up the SubmittedChanges event handler:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    _ddsBeers = this.FindName("beerDomainDataSource") as DomainDataSource;
    _ddsBeers.SubmittedChanges += new EventHandler(_ddsBeers_SubmittedChanges);
}

Handle the SubmittedChanges event so that it shows any exceptions, and shows a Submit Complete message on success:

void _ddsBeers_SubmittedChanges(object sender, SubmittedChangesEventArgs e)
{
    if (e.HasError)
    {
        System.Windows.MessageBox.Show(e.Error.ToString(), "Submit Error", System.Windows.MessageBoxButton.OK);
        e.MarkErrorAsHandled();
    }
    else
        MessageBox.Show("Submit Complete.");
}

Finally, implement the btnSave.Clicked event so that it submits changes to the Beer Domain Data Source:

_ddsBeers.SubmitChanges();

Give the project a run and try Updating some records.

Adding New Records

Add a Reference to the assembly System.Windows.Data.dll. NOTE that in the Silverlight Beta, you may need to manually Browse to the folder C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client to add this assembly.

Add a new Button named btnAddNew and then add the following code in its Click event, which will add a new Record into the Grid. It does this by creating a new Beer object and adding it to the DomainDataSource’s DataView collection. DataView is meant for code-based programmatic access of Data, and you can learn more about that here - http://jeffhandley.com/archive/2009/11/16/domaindatasourceview-again.aspx

 

private void btnAddNew_Click(object sender, RoutedEventArgs e)
{
    // only allow a new row insert on an existing saved row
    if ((_ddsBeers.DataView.CurrentItem as Beer).BeerId > 0)
    {
        Beer newBeer = new Beer();
        _ddsBeers.DataView.Add(newBeer);
        // disable the Grid until user saves
        beerDataGrid.IsEnabled = false;
    }
    else
        MessageBox.Show("Save the current NEW Beer before adding a new one.");
}

Deleting Records

We can delete a record by calling Remove on the DataView Collection of the DomainDataSource class. Add a new button named btnDelete, and add implement it’s Click event handler as follows:

private void btnDelete_Click(object sender, RoutedEventArgs e)
{
    _ddsBeers.DataView.Remove(_ddsBeers.DataView.CurrentItem);
    _ddsBeers.SubmitChanges();
    beerDataGrid.IsEnabled = true;
}


Adding Validation

We get some basic data type validation automatically, with no custom coding required. For example, if you run the application and try to enter a character value in the Alcohol Content field, you’ll see a validation error is displayed, because this field is a decimal type.

If we want to add other validation, we can do so in the BeerService.metadata.cs file, inside the Web project of the solution. When we add validation to this metadata file, the validation is automatically copied into the client-side Silverlight project – giving us validation at both client and server side. This is important for performance and to prevent attacks that spoof the client side.

Open BeerService.metadata.cs and add Validation attributes to the BeerMetadata class to validate string lengths, required fields, and formatting:

    public int BeerId;

    [Required(ErrorMessage = "You must enter a Beer Name.")]
    [StringLength(100, ErrorMessage = "Beer Name must be less than 100 chars.")]
    public string BeerName;

    public Brewer Brewer;

    public Nullable BrewerId;

    [StringLength(100, ErrorMessage = "Color must be less than 100 chars.")]
    public string Color;

    [StringLength(200, ErrorMessage = "Image Url must be less than 200 chars.")]
    public string ImageUrl;

    public Nullable IntroductionDate;

    [StringLength(200, ErrorMessage = "More Info Url must be less than 200 chars.")]
    [RegularExpression(@"^http\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(/\S*)?$", ErrorMessage = "More Info Url must be a valid Url.")]
    public string MoreInfoUrl;

Let’s also add in a ValidationSummary control so that we can see all validation errors in our Details form. Right-click the Toolbox in Visual Studio and select Choose Items. Select the ValidationSummary control:

Next, drag a ValidationSummary control from the Toolbox inside the Grid containing the Details form. You should add a new RowDefinition to the Grid so that the ValidationSummary can show at the bottom of the other fields.

Run the application and test the validation of the various fields:



Custom Validation + Shared Classes

Besides the “canned” validation shown above, we can also define Custom Validation based on any kind of logic we prefer. Since the validation must execute on both the Server and the Silverlight Client, we place this Custom Validation in a Shared class. Shared Classes are automatically compiled into the Silverlight client when they are created on the Server side web project.

 

In this example, we’ll add a validation method that only allows certain colors. Note that, in a real world example, we would probably define this in a “lookup table” instead of code.

Add a new Class named CustomValidateColors.shared.cs to the BeerDB.Web project. Note that simply by adding the “.shared.cs” suffix, this will cause RIA Services to automatically copy and compile the class to the Silverlight application.

Add a new static method to the class which validates that the color of a beer is within a given list. Note the signature of the method.

public static ValidationResult IsValidBeerColor(object value,
    ValidationContext context)
{
    string[] colors = { "Light", "Amber", "Dark" };

    if (colors.Contains(value))
    {
        return ValidationResult.Success;
    }
    else
    {
        return new ValidationResult(context.DisplayName + " must be Light, Amber, or Dark.");
    }
}

You can now use this new validation method on a property in the metadata class. Open BeerService.metadata.cs and add in a CustomValidation attribute which uses the IsValidBeerColor method to validate the beer color.

[StringLength(100)]
[CustomValidation(typeof(CustomValidateColors), "IsValidBeerColor")]
public string Color;

Run the project and note the validation message for Color.

 




 

Comments (10)

TOP 10 LIST: Silverlight for Games
By Andy Beaulieu on 11/17/2009 8:21 AM

While most Microsoft developers are focused on PDC 2009 this week, my travels took a different direction – visiting our Neighbors to the North to present a session at the Montreal International Game Summit. This conference brings together some of the best game developers in the world, talking about everything from marketing to networked physics.

I presented a session on game development with Silverlight , and I was excited to see a great turnout for the talk. My session was titled “Top 10 Reasons Why Silverlight is Great for Games” and I thought I'd share my Top 10 list here on my blog. So here goes…

ANDY’S TOP 10 LIST
WHY SILVERLIGHT IS GREAT FOR GAMES

10. Vector Graphics

Ideally, a Silverlight game uses XAML elements which are Vector based – primitives such as Rectangle, Ellipse, and Path. These elements typically provide a much smaller download size than raster graphics, and can be scaled without loss of clarity or pixilation. We can also do some really cool Camera effects with Vector Graphics...

DEMO: Falling Rag Doll. This physics demo contains only Vector graphics. Click and hold on the RagDoll so that he stays stationary and note that the “camera” zooms in. Notice that all vector graphics keep their clarity when zoomed.

9. Audio Support

We can use the MediaElement to provide mixed sound. For example, imagine an Asteroids game where a laser sound is played every time the user presses the fire key. We can mix together each instance of the fire effect by using multiple MediaElements – Silverlight will buffer these for us.

Silverlight 3 also supports the MediaStreamSource class, which allows direct access to a media stream so you can create sound at runtime (for example, voice synthesis).

DEMO: Silverlight Rocks.  Try this asteroids game out and use Ctrl to fire your lasers. Notice the mixing of MediaElement audio for each fire of the laser. The source code is available here.

8. Video Support

Silverlight 3 supports MPEG-4 (H.264) video as well as WMV format. And, it can use adaptive streaming via Smooth Streaming and Live Smooth Streaming. These technologies will switch a client’s bitrate based on Network and CPU Conditions, in real time.

Expression Encoder can be used to encode video for use in Silverlight – and includes the ability to add metadata and generate Silverlight video players from templates. These player templates can be customized in Expression Blend.

DEMO: Big Buck Bunny

7. Expression Blend

Blend is the design tool of choice for creating XAML. It includes a full toolset for creating vector graphics, and when those tools don’t do the trick, you can import from PhotoShop, Illustrator, and Expression Design. You can also perform basic coding tasks in Blend (although Visual Studio is the tool of choice for coding and debugging Silverlight).

Blend also includes supports for States, Behaviors, StoryBoards, and Data Binding (some of these appear later on in the Top 10 List J)

6. StoryBoard Animations

Using StoryBoard animations, we can quickly create keyframe based animation in Expression Blend. Blend also includes a keyspline editor and easing functions which allow us to customize the physics of each keyframe.

StoryBoard animations won’t work in many game scenarios. For example, a typical 2D action game where the player controls a character would have limited use for StoryBoards – this is because it would be too expensive to continually create StoryBoard animations as the user changes directions, fires, etc. But in these cases, StoryBoards are still useful for expressive type animations that are not affected by the environment.

Consider this simple game - Sort the Foobars.  This physics game uses a classic game loop approach for most animation. But it also uses StoryBoards to animate the Foobars’ facial expressions when they collide with an object.

5. Perspective 3D

While Silverlight does not yet support true 3D, we can create some pretty cool effects using the Perspective Transform. This effect allows us to position 2D elements in 3D space.

DEMO: Perspective 3D Animation with StoryBoard

4. Bitmap API

Using the WriteableBitmap class, we can access and manipulate individual pixels to create custom effects, and also copy any XAML element into an array of pixels for manipulation.

Further Reading: Bill Reiss on Blitting and Blending

3. Pixel Shaders

Pixel Shaders allow real-time pixel manipulation of UI Elements. Blur and DropShadow effects are included out of the box, but we can create custom Pixel Shaders using High Level Shader Language. I like to use Walt Ritscher’s Shazaam Tool to code and edit HLSL, and the Pixel Shader Effects Library on Codeplex is a great collection of shaders to start with.

Further Reading: Pixel Shaders and Effects

2. GPU Acceleration

GPU Acceleration allows Silverlight applications to use the Video card to render elements to the screen, instead of the default software renderer. This feature uses DirectX under Windows and OpenGL on the Mac. In most situations you will see a huge performance increase – however in rare circumstances, such as low end Netbooks, GPU Acceleration can actually slow down performance. So it’s best to keep track of frame rate to check what experience you user may be having!

Further Reading: GPU Acceleration

1. Behaviors

Behaviors win the #1 spot in my Top 10 countdown! By adding Behaviors at design time, we can inject logic into elements at runtime. This allows a clean separation between code and design. And Blend has great support for Behaviors – they are available in the Asset Library, can be dragged onto an element on the Artboard, and can expose properties in Blend’s Property panel. With a properly coded set of Behaviors, Blend can serve as a complete level designer for a game.

Video: Physics Behaviors

Video: Creating Behaviors

Demo: Physics Helper Behaviors

Comments (1)

.NET RIA Services + Silverlight Behaviors Resources
By Andy Beaulieu on 11/9/2009 7:49 AM

Thanks to everyone who attended my sessions at the Tech Valley Code Camp on Saturday 11/7! As promised, here are links to further resources for the sessions:

.NET RIA Services

Behaviors in Silverlight 3

  • Creating Behaviors in Silverlight 3 - This is a screencast of the "developer half" of the session.
  • Physics Behaviors - Here you can download the Physics Helper Behaviors and create vehicles, rag dolls, and other evil creations.
  • Expression Team Behaviors - Here is where you can get the cool MouseGestureTrigger, as well as some other experimental behaviors created by the Blend team.
  • Peter Blois' Explode Behavior - Slip this one into your next Business Application, and trigger when an unhandled exception occurs :)
  • Writing a Design Time Experience - Unni provides a project template for Blend which gets you past the burn and into the groove with writing Behaviors with full Blend support.
Comments (0)

Silverlight Streaming is Going Away :(
By Andy Beaulieu on 10/19/2009 7:22 AM


I was disappointed to get word that the Silverlight Streaming Service is going away, as explained in this announcement. SLS provided an easy, scalable way of delivering Silverlight applications and media. The idea was that Microsoft would handle the delivery of your Silverlight apps using its server infrastructure so that the end-user would have the best experience.

I suppose this is why its very important to read any fine print. This is taken from the SLS front page:

The service offers web designers and developers a free (*) and convenient solution for hosting and streaming cross-platform, cross-browser media experiences and rich interactive applications that run on Windows™ and Mac.

(*) While the service is in beta, storage is free up to 10 GB and streaming is free up to 5 TB of aggregated bandwidth per user account per month. Videos should not exceed 10 minutes and have a maximum bit rate of 1.4 Mbps. As we move out of beta, unlimited streaming will also be available for free with advertising, or with payment of a nominal fee for use of the service without advertising.

I am currently using SLS to host a bunch of screen casts and demos, and need to figure out where to move this video content to. So far I've come up with these options:

- move them to my current web hosting provider and incur the bandwidth and storage costs. I think this is what I'll do because I should still be well in the limits of my current plan after this move.

- move them to a different free hosting service. I suppose YouTube is an option, and Dan Wahlin was nice enough to refer blip.tv to me as an option. This may require that I re-encode and segment some of the videos, however.

- move them to a pay hosting service - like screencast.com.

- move them into Windows Azure and incur any costs for bandwidth.

Does anyone else have other ideas? Are you currently using SLS and figuring out what to do? Let me know your ideas.

 

 

Comments (1)

Creating Behaviors in Silverlight 3
By Andy Beaulieu on 10/9/2009 11:26 AM


Thanks to everyone who attended my presentation on Behaviors in Silverlight 3 at the CNY .NET Developer Group!  Even if you missed the meeting, no worries - I'll be repeating the talk at Code Camp 12 in Waltham, Mass.

And I've included the highlights below! A screencast covering the main demo, project source, and slides:

[DEMO CODE]  [SLIDES]  [VIDEO]

The video below is divided into Chapters, so you can skip to the points you need:

  • Adding Properties
  • Propery Tooltips and Categories
  • Property Editors
  • Creating a TriggerAction
  • Supporting Asset Library Category
  • Adding an Icon
  • "Installing" Behaviors into Blend

My apologies for the bad audio buzz :( Those responsible have been sacked.

Comments (3)

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