Tuesday, November 24, 2009

Silverlight and Dual Screen Monitors...

So I'm working on this dual screen kiosk thing and want to use Silverlight as for some reason I can't use WPF / .net4 etc. long story and not the point. What do I do now?

Well along time ago in a galaxy mostly still down the street I used do alot of 'dhtml' or ajax kinds of things or whatever we are calling it now days and there was this little thing called an hta you could do to get around all that silly security stuff in the browser that keeps you from nuking the hard drive, and file system access etc.

So the trick I found is to have the hta host the Silverlight app and have it resize its self to take up all the monitors. with a third monitor hidden in the kiosk... poof, Silverlight dual screen full screen black magic.

for those interested in hta's:

http://msdn.microsoft.com/en-us/library/ms536495(VS.85).aspx

basically you want the following properties set on the hta tag in the html header:

caption=no
contextmenu=no
indderborder=no
border=none
windowstate=normal
scroll=no
showintaskbar=no

and then on load on the body tag execute the following:

window.moveTo(0,0);
window.resizeTo(x,y);

which could be a function of
window.screen.availWidth and or window.screen.availHeight

see black ecma magic saves the day.

Thursday, October 22, 2009

Developers on Better Design, User Experience and Why It Matters

The PDC BOF team is pleased to announce another Birds-of-a-Feather session.

Developers on Better Design, User Experience and Why It Matters

What is the return-on-investment of building better User Experiences (UX)?
How does User Interface (UI) design affect your business?

Come join the discussion on why User Experience matters and how it applies to the real world.

In the current world of web 2.0 and with talk of design being important, help us understand why it matters to you and what we get out of good User Interface design. Let’s talk about the technologies on the web and on the desktop that do and don’t support the development of well designed applications, and how we can apply better practices to our own projects. Equally important, let’s discuss how we can bridge the typical gap in cross discipline team dynamics.

Tell us about your secret sauce or just listen to what others have to say. From great enabling technologies like Silverlight or WPF to tried and true web development in ASP.NET using MVC, everyone has a story to tell about UI and design in the Microsoft world.

http://www.pdcbof.com/post/220173613/bof-session-developers-on-better-design-user

Saturday, October 17, 2009

Finally a Simple MVVM in Silverlight

So a week or so ago I ran across this article/post by Jeremiah Morrill (MVVM-for-Tarded-Folks-Like-Me-or-MVVM-and-What-it-Means-to-Me.aspx ) was agasp that some spent the time to make MVVM so understandable. What will I do now that everyone can understand MVVM? I pinged Jeremiah and he was open to making this a framework on codeplex seeing as there are only 35 versions of MVVM frameworks out there already albeit no matter how good they are they usually include bits that have todo with 5 or 7 other design patterns so lets take a look at building an MVVM app with just the Tard Framework for MVVM. To start with the Tard framework consistes of one class with three lines of real code:

public class TardViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;

public void InvokePropertyChanged(string propertyName)
{
var e = new PropertyChangedEventArgs(propertyName);
PropertyChangedEventHandler changed = PropertyChanged;
if (changed != null) changed(this, e);
}
}

I know I know its a work of art but this really is all you need. Now using this class is just as simple to create an MVVM application using the tard framework. First create a model class like so:

public class AModelClass
{
// super easy version
public string SomeTardedValue { get; set; }
}

ok so maybe also make it return some data magically. Next you need to create your complex view model class that inherits from TardViewModelBase like so (WARNING: this is the complicated part...)

public class AViewModelClass : TardViewModelBase
{
private AModelClass MyModel;

public AViewModelClass()
{
MyModel = new AModelClass();
}

public string SomeTardedValue
{
get { return MyModel.SomeTardedValue; }
set
{
if (MyModel.SomeTardedValue != value)
{
MyModel.SomeTardedValue = value;
InvokePropertyChanged("SomeTardedValue");
}
}
}
}

So now we have a model that returns some data and then we have our view model that we can bind do. Now to create a View (ie user control) with xaml akin to this:

>UserControl.DataContext<
>Tard:AViewModelClass /<
>/UserControl.DataContext<
>Grid x:Name="LayoutRoot" Background="White"<
>TextBox Text="{Binding SomeTardedValue, Mode=TwoWay}" /<
>/Grid>

If you really like you can get extra complicated and load view in shell or whatever in Xaml like so:

>Tard:AViewClass /<

so some other fancy thing... but that is all it takes to have some Model View View Model going on. Nice simple...

http://tard.codeplex.com/

stay tuned for maybe commanding for tards...

Friday, October 16, 2009

Silverlight Hack of the Week - Auto Zoom

Justin Angel did a tweet about this and I must admit its cool and I had never even thought out this before but you can set autozoom and on zoom event in silverlight for when the browser host supports zoom on a page.

AutoZoom
Auto zoom is the simplest. hook this up in the html and this the silverlight control will be able to be zoomed as the browser zooms.

<param name="enableautozoom" value="[bool (ie true or false for the tards that dont know what a bool is]"/>

http://msdn.microsoft.com/en-us/library/dd833074(VS.95).aspx

on zoom
so if you are using the first feature you can also then have an event handlers to do something special on zoom. the on zoom html param allows you to define an event handler on such.

<param name="onzoom" value="[functionname]"/>


http://msdn.microsoft.com/en-us/library/dd833068(VS.95).aspx

http://msdn.microsoft.com/en-us/library/system.windows.interop.content.zoomed(VS.95).aspx

all in all some simple hacks that are not so much hacks but just kind of obscure things in Silverlight.

Thursday, September 24, 2009

Building a Dial Control

A friend posed a question a few weeks back about implementing a dial control. I found a few but they seemed problematic so I decided it can't possibly be that hard. So the idea is a control with a custom event for dial position change that I can add templates etc to change the look and feel of the control to any kind of dial I want and bind an event handler to so that in can control say volumn. I posted how to implement a custom event last week so I'll focus specifically on the rest of the dial control. Lets start with the template in Generic.xaml.

<Style TargetType="DialTest:Dial">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DialTest:Dial">
<Grid x:Name="Knob" Background="Transparent" >
<ContentPresenter x:Name="Background" Content="{TemplateBinding KnobBackground}"/>
<ContentPresenter x:Name="DialKnob" Content="{TemplateBinding KnobFace}" RenderTransformOrigin="0.5,0.5" >
<ContentPresenter.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="DialAngle" Angle="0" />
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

So from this template we can see that the control will have a wrapper grid to force content to be resized as set and two content presenters one for the background and one for the dial and further a rotate transform on the dial so we can make it turn. As noted these content presenters imply that we have two dependency properties for the dial face and background but we will also have DP's for setting the start or minimum or max angle setting of the dial (0 to 360 degrees).

In our constructor then we set our template and then OnApplyTemplate() we wire things together like so:

Knob = ((Grid)GetTemplateChild("Knob"));
DialAngle = ((RotateTransform)GetTemplateChild("DialAngle"));

Knob.MouseLeftButtonUp += new MouseButtonEventHandler(Knob_MouseLeftButtonUp);
Knob.MouseLeave += new MouseEventHandler(Knob_MouseLeave);
Knob.MouseLeftButtonDown += new MouseButtonEventHandler(Knob_MouseLeftButtonDown);
Knob.MouseMove += new MouseEventHandler(Knob_MouseMove);

base.OnApplyTemplate();

if (Minimum > 0 && Minimum < 360)
{
SetPosition(Minimum);
}

this wires our internal events we use to make the wiring work. What we are doing todo is on mouse down we will calculate the angle of that related to the control and then turn the dial to that position. we then fire off the angle changed event or custom event. The hard part turned out to the just figuring out the math and it turns out that this not the best method 'mathmatically' speaking but this works well. Once get a point from the mouse down we do this to get the relative angle:

double TheDiameter = Knob.ActualWidth;
double CurrentHeight = Knob.ActualHeight;

double Radius = TheDiameter / 2;

double AngleOfRotation = AngleOfRotationQuadrant(TheDiameter, CurrentHeight, NewPoint);

//int DialQuadrant = 1;
if ((NewPoint.X > Radius) && (NewPoint.Y <= Radius))
{
//DialQuadrant = 2;
AngleOfRotation = 90.0 + (90.0 - AngleOfRotation);
}
else if ((NewPoint.X > Radius) && (NewPoint.Y > Radius))
{
//DialQuadrant = 4;
AngleOfRotation = 180.0 + AngleOfRotation;
}
else if ((NewPoint.X < Radius) && (NewPoint.Y > Radius))
{
//DialQuadrant = 3;
AngleOfRotation = 270.0 + (90.0 - AngleOfRotation);
}
return AngleOfRotation;

Basically we calculate 90 degress of position for he dial face quadrant that the event was in and then add the relative additional quadrants as needed to get the correct angle. getting the quadrant goes like this:

double DialRadius = CurrentWidth / 2;

Point CenterPoint = new Point(DialRadius, CurrentHeight / 2);
Point StartPoint = new Point(0, CurrentHeight / 2);

double TriangleTop = Math.Sqrt(ToThePowerOfTwo(NewPoint.X - CenterPoint.X) + ToThePowerOfTwo(CenterPoint.Y - NewPoint.Y));

double TriangleHeight = (NewPoint.Y > CenterPoint.Y) ? NewPoint.Y - CenterPoint.Y : CenterPoint.Y - NewPoint.Y;

return ((TriangleHeight * Math.Sin(90.0)) / TriangleTop) * 100;

now we can set the angle in 'SetPosition(); like this:
if (Minimum > 0 && Max > 0 && Minimum < 360 && Max <= 360 )
{
if (AngleOfRotation < Minimum)
{
AngleOfRotation = Minimum;
}
if (AngleOfRotation > Max)
{
AngleOfRotation = Max;
}
}

DialAngle.Angle = AngleOfRotation;

OnPositionChanged(new DialEventArgs(AngleOfRotation));

the last line being our custom event. and poof it works... So in xaml using the control might look like this:

<cc:Dial x:Name="NewKnobControl" Height="100" Width="100" PositionChangedEvent="NewKnobControl_PositionChangedEvent" Minimum="45.0" Max="135" >
<cc:Dial.KnobFace>
<Grid >
<Ellipse Fill="Aquamarine" />
<Rectangle x:Name="Indicator" Height="10" Width="49" Fill="Blue" Margin="1,45,50,45" />
</Grid>
</cc:Dial.KnobFace>
</cc:Dial>

nice and simple, needs some design love but you get the point. The dial control code will be up on HackingSilverlight.codeplex.com some time this week.

Monday, September 21, 2009

Blend/Catalyst Smack Down?

Designer and Developer Workflow

Is it a myth? Marketing lingo? Or could it be real with the help of powerful tools?

Listen in as Ryan Stewart from Adobe and Adam Kinney from Microsoft discuss the workflow concept from their respective point of views. Ryan will demonstrate how Flash Catalyst works within the Flash Platform development cycle. Adam will show how Expression Blend fits into the Silverlight development workflow.

Come join the fun with two of the best speakers in the world on Adobe/Blend at Interact

http://www.seattled2ig.org/?p=257

Thursday, September 17, 2009

The Gu a Silveright firestarter

if your paying attention and want to learn some Silverlight they are streaming the gu and more all star speakers free from the Silverlight firestarter at:

http://www.msdnevents.com/firestarter/online/index.html

Saturday, September 12, 2009

Don't Forget about Silverlight Week

So this coming week is really really exciting and I wanted to make sure no one forgot. The stars have aligned and 4 big events are all happening in Seattle:

Monday:
.NET Developer Association User Group Meeting - Featuring Jesse Liberty
http://www.dotnetda.com/Events/EventNewsletter.aspx?EventDate=9/14/2009

Tuesday
Silverlight Geek Dinner
http://adamkinney.com/Blog/silverlight-geek-dinner-sep-15th-seattleredmondbellevue

Wed
Interact Seattle - Featuring Tim Hueur
http://www.InteractSeattle.org/

Thur
Silverlight 3 Firestarter Event
http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032422412&Culture=en-US

Wednesday, September 9, 2009

64bit Surface Hack

Not strickly speaking Silverlight but in setting up my new laptop to run the Surface SDK in 64bits I had to get special mojo to get it working so I can run my Simon demo (plus some work related stuff) from Silverlight to WPF to Surface. I did a bit of googling er I mean 'binging' and found some of the posts lacking mostly the orca link. Anyway Ariel sent me the link to this post: that had all the magic juice to make it work. if your trying to get this running on your box in 64bits these steps working for me.

http://www.theruntime.com/blogs/brianpeek/archive/2009/03/10/install-the-surface-sdk-on-windows-7-andor-x64.aspx

Tuesday, September 8, 2009

Custom Control Development: Simple code guidelines

Jeff Wilcox did a great post on custom control conventions that is cool, if for nothing else that I feel vindicated with regard to the use of regions. Some time ago I got into a heated discussion on this topic and I feel as much as it is esoteric regions help break things down into logical understandable chunks. The rest of the article is great too as to best practices which seem to be still evolving around Silverlight

http://www.jeff.wilcox.name/2009/08/custom-controls-simple-code-guidelines/

Monday, September 7, 2009

Custom Events on Silverlight Controls

So this weekend my project of choice was to build a dial control. I'll post more on that later. But one cool thing I ended up doing was building a custom event on the dial control called OnPosition Changed. Typically when you use or build controls the events you use are more straight forward but this case, we have a dial so the 'mouseover' or click isn't really want you want. So what we want is when the dial moves to a position we want the 'position changed' event called.

To start with you need some custom event args as we want to pass the 'angle' of the dial to the event handler in the consuming application. So the custom event args looks like this:

public class DialEventArgs : EventArgs
{
private double angle;

public DialEventArgs(double _Angle)
{
this.angle = _Angle;
}

public double Angle
{
get
{
return angle;
}
}
}

In this case its a pretty straight forward class that drives from eventargs and we add a constructor that lets us set the angle property easily. Next we need in our control class to define the event like this:


public event PositionChangeHandler PositionChangedEvent;

protected virtual void OnPositionChanged(DialEventArgs e)
{
PositionChangedEvent(this, e);
}

With this in place a consuming xaml page if they use the control will be able to set an event handler for this event. But first we need to actually call the event when the angle of the dial changes: In the method that sets the angle we have this code:


OnPositionChanged(new DialEventArgs(AngleOfRotation));

Now when you have an event handler set in xaml you get the event called at the correct time. In xaml this might look like this:

<cc:Dial x:Name="NewKnobControl" Height="100" Width="100" PositionChangedEvent="NewKnobControl_PositionChangedEvent" Minimum="45.0" Max="135" >
<cc:Dial.KnobFace>
<Grid >
<Ellipse Fill="Aquamarine" />
<Rectangle x:Name="Indicator" Height="10" Width="49" Fill="Blue" Margin="1,45,50,45" />
</Grid>
</cc:Dial.KnobFace>
</cc:Dial>

Now in the client code you need an event handler and in this case in my demo app it looks like this:

private void NewKnobControl_PositionChangedEvent(Object sender, DialEventArgs e)
{
// applicable values
double Angle = e.Angle;
}

Wednesday, August 26, 2009

MSDN Webcast: geekSpeak: Composite Application Development (Level 200)

Just to follow up on the geek speak MSDN thing from last week on composite application developement and a bit on best almost practices. Here is the MSDN blog post:

http://blogs.msdn.com/geekspeak/archive/2009/08/18/next-geekspeak-august-19-composite-application-development-with-david-kelley.aspx

and links to some of the things that we talked about.

www.HackingSilverlight.net
http://compositewpf.codeplex.com/
http://simon.codeplex.com/
http://wpf.codeplex.com/
http://hackingsilverlight.codeplex.com/
http://crossfader.codeplex.com/
http://www.sparklingclient.com/prism-silverlight/
http://msdn.microsoft.com/en-us/magazine/dd943055.aspx
http://blog.galasoft.ch/archive/2009/06/16/mvvm-light-toolkit-silverlight-edition-posted.aspx

and for fun… (more a point that it should be about solving the problem and not the implementation of a design pattern for its own sake)


http://www.drwpf.com/blog/Home/tabid/36/EntryID/27/Default.aspx

Monday, August 3, 2009

MSDN Webcast: geekSpeak: Composite Application Development (Level 200)

Start Date: Wednesday, August 19, 2009 12:00 PM Pacific Time (US & Canada)
Duration: 60 minutes
Audience: developer

In this geekSpeak, Microsoft Most Valuable Professional (MVP) David Kelley discusses composite application development in Microsoft Silverlight and Windows Presentation Foundation (WPF). He covers the Silverlight Designer/Developer workflow, tooling, design patterns, anti-practices, and working with distributed teams. Your hosts for this geekSpeak are Glen Gordon and Mithun Dhar.

The geekSpeak webcast series brings you industry experts in a "talk-radio" format hosted by developer evangelists from Microsoft. These experts share their knowledge and experience about a particular developer technology and are ready to answer your questions in real time during the webcast. To ask a question in advance of the live webcast, or for post-show resources, be sure to visit the geekSpeak blog.

Guest Presenter: David Kelley, Senior Software Architect, IdentityMine

David Kelley is a Microsoft Most Valuable Professional (MVP) for Microsoft Silverlight, and he has been building Web-based, distributed applications for more than ten years. He is a Silverlight user experience architect at IdentityMine, and his passion is building user experiences that are elegant and easy to use. David's career highlights include a Silverlight demonstration with Bill Gates at TechEd 2008, and developing the "Entertainment Tonight" Web site for the Silverlight 1 launch and Emmy Awards. In his spare time, David is the executive officer of the Seattle Designer Developer Interaction Group.


Click Here to Register

Saturday, August 1, 2009

Designer Developer Communication and Interaction

I'm working on a joint research project with Interact (Seattles Designer Developer Interaction Group) to better understand the dynamics of designer and developer communication and Interaction. We will publish the information for everyone free but for now we need to collect the information. if you get a chance to fill out the survey please help us know :) The survey is in 2 parts and ideally we need both filled out.


Designer Developer Communication Survey Part 1


Designer Developer Communication Survey Part 2

Silverlight Firestarter - Seattle Sept 17th

Silverlight Firestarter in Seattle will be Sept 17th, with folks like Scottgu, Tim Heuer, Adam Kinney, Justin Angle, Kathy Carper, Karl Shifflett and more. Learn about all things Expression and Silverlightish and stay for pizza and fun. MVP's on hand for live streaming and Q and A

on facebook at
http://www.facebook.com/pages/Silverlight-Firestarter/112128391599

more to come shortly but stay tuned and keep your calenders clear.

Wednesday, July 22, 2009

INETA Silverlight 3 User Group Starter Kit

I got sucked into this cool off hours project with Ariel and David Silverlight todo this Silverlight 3 starter kit. Ariels design has been well received and I got the UI built out over the weekend and last night. From a design standpoint its simple and elegant and with the AnimatingCloud panel fun to play with. Screen shots can be found at: http://www.facebook.com/album.php?aid=102255&id=721326429&l=aba5d40170


The project is on codeplex but still in the process of wiring up the backend RIA Services, this is a fun engaging project that we hope to see on our home page for our user group shortly.

Monday, July 20, 2009

Silverlight 3 Out of Browser Quicky

One would think that being on the silverlight insiders list and being a silverlight mvp etc one would know when something changes but amoung all the meetings, and conferences and the like I missed a tiny change in the Silverlight OOB - from the initial beta and the release of Silverlight 3. That weekend that the release happened I went to go and upgrade all my projects to the latest bits and everything feel a part. I found when I removed all the out of browser stuff it all seemed fine. it didn't take long to realize the API's changed but took me a whole fraking (BSG lingo) week before I realized what happened to editing the application manifest. That being all the case let me recap how to build an OOB Silverlight 3 application.

Step 1, build a Silverlight application of some kind.

Step 2, right click on the properties of your Silverlight Project (the actual app project not a class library or something). Normally you should get the Silverlight tab of the properties pain.

Step 3, 'Click' the check box for 'Enable running application out of the browser.'

Optional step 4 would be to click the 'Out-of-Browser' Settings button and then to set icons and details as desired.

Optional Step 5 would be to customize the UI with an install button. In the case of Simon, in the page constructor that is using the Simon control we add some code like this to see if we should show the install button:


if (Application.Current.InstallState == InstallState.Installed)
{
installbutton.Visibility = Visibility.Collapsed;
}

then in the install Simon button event handler we use this line to trigger an install

Application.Current.Install();

from there you can pretty much do what ever you like. its easy simple and better then editing the raw manifest like we did with the beta, but to be honest I kind of like raw XML... Now those settings are not in the manifest but a seperate file called 'OutOfBrowserSettings.xml' which seems to contain everything that was in the manifest.

Thursday, July 16, 2009

Popfly is dead

Popfly is dead... going a way on August 24, 2009

With much sadness Popfly is going away. www.popfly.com/

Popfly was a IDE for hobbiest and non programmers for building online Silverlight mashups. Something like legos you could pick the popfly blocks you wanted and drag them on to a surface and then connect them and for the most part that was it. A cool technology but targeted towards a very narrow market and they couldn't get it to work with Silverlight 2 or newer so I'm guessing that this and more is the cause of pulling the plug. Moving forward I expect to see more mashup developement technologies in the future.

Monday, July 13, 2009

Silverlight 3 - Whats Next?

of course all the latest bits for Silverlight can be downloaded off of Silverlight.net but a few other sites have changed that might be important to check out. This site if your familiar with Silverlight you might know of:
 



http://www.microsoft.com/Silverlight/

rumor has it Dr. WPF might have helped? maybe? but in any case the guys from IdentityMine, Inc. built the silverlight part.
 


Another good resource is the new IM syncated blog site that aggregates the sites of the best and brightest at IM:.
 


http://www.identitymine.com/forward.
 


you'll find rock starts like Smitty, Laurent, Kurt, Jobi, Devin, me and more.

Tuesday, July 7, 2009

Silverlight? what about the hard ware geeks?

So Silverlight is cool, and working around here where everything is WPFish, or Surface-ish or Win 7-ish or Silverlight etc. or even stuff I can't talk about, I tend to forget about the geeky side of the hard ware we use. At IM there are lots of super cool, super smart poeple. Its a company of rock stars, that being the case however that turns out is true even of our IT guys. I finally got turned on to our IT guys blog... very geeky... :)

http://teknation.squarespace.com/

very geeky. One idea we had for the office is he likes this skelton case that looks like its out of a borg movie or something. we thought we could have one floor that has these cases and their uber cooling fans and other either steam punk or borgs sorts of things and then have all the cables drug up to the next floor so we don't hear the cooling fans...

Anyway if your in to hardware geekyness his blog is the bomb...

Saturday, July 4, 2009

Azure Simon

Davide Zordan posted a version of Silverlight Simon up in the cloud at http://azuretestapp.cloudapp.net

Davide had also added multi touch support to the WPF version. You can check out the code on the codeplex project http://Simon.codeplex.com/

Wednesday, July 1, 2009

Silverlight MVP

about a year ago I was at TechEd 08 taking to a friend (Peter) and he asked me if I was an MVP and I had no idea what that was. Granted I had heard it but never spent enough time to put 2 and 2 together. Well over the course of the next year and half or so I did find my self more involved in user groups such as the Seattle Designer Developer Interaction Group and Silverlight Insiders Group and of course I was already going to all the cool events such as MIX. I got a tweet from Suzanne at Microsoft Tuesday evening that I had been awarded Silverlight MVP.

For many years now I have been scoofing at things like MCP etc as I found that certifications like this tend to be something students do but the guys that are really good were the ones that can whip out the stack of experience and code. So for the most part I didn't care about that. I guess why I'm so proud of the MVP award is that it is not something you can just take a test. It is awarded based on contribution to the community and on the work you do professionally. As I understand it other MVPs or MS employees are the only ones that can nominate you and to be recognized like that for the hard work (albeit doing things like Silverlight Simon I have a hard time calling 'work') by others that are generally smarter then me is something I'm really proud of. Of all the silly certifications from school or other industry related stuff the only one that matters to me is Silverlight MVP.

In any case here is my MVP Profile:

https://mvp.support.microsoft.com/profile/David.Kelley

Tuesday, June 30, 2009

Simon a case study part 1 - designer developer work flow

So I while back a friend of mine and whom is another person that shows up to the local designer developer Interaction group and myself were talking about a simple demo app we could do that would show case a number of things, our goal was a good sample she could use on her resume and be a good sample application that could show case designer developer work flow and composite application development. Her idea was todo a simple Simon says game that we would have in Silverlight. As a team (such that two people being a designer and UX dev can be) we had our 'business requirement' but we needed to build on that with a comp or visual vision of what we wanted and a story (use case brief, scenario or other excuse for the same). Our user story went something like this:

John doe wants to play a game like Simon says. John sees link on a web page that says 'Simon says.' John clicks link and he doesn't have Silverlight installed so he gets a 'install me' link with a faded image of Simon. John can see from the faded image that Simon is what he is looking for and decided to install Silverlight. John then go to the Simon link and Simon comes up. John can click the new button to start a game and play a traditional game of Simon says buy following the sound and light patterns and clicking the appropriate game pads. John is able to use the high score button to see his high score. John has fun with and easy to use game and spends to much time playing the game.

with this as our user story, Ariel (the designer, names changed to protect the innocent or not) put together a wonderful bit of Xaml. Ariel being familiar with working with dev's took into account that things needed to be groups, and names reasonable or I would have a hard time working with the asset. For me the first thing I did was load the project and start to wire it up. One would think that Simon shouldn't be too complicated and at first it wasn't. A few events, and a game timer using a story board and we are good. Being the retentive dev that I am, I've had to learn to let go of that when it comes to Xaml as this tends to hamper or slow down the design to the point of just not being worth the time invested.

That all being the case we soon had a working game. Part of learning to work together and further learning to work on the same code at the same time that Silverlight and by extension WPF (actually that might be the other way around) is having the designer and dev work from source control. I know allot of dev's will have a cow about letting designer touch source control but its really not that hard. check out file, check in file... really even a designer can get the hang of it when their tool (Blend 3) supports it now. So we put this in source control (http://Simon.codeplex.com/). the one little detail we had to over come though was Silverlight 2 vs Silverlight 3 and we both were on opposite sides of the fence. This probably was our biggest issue we had to work out where we disagreed. And any time there is a designer and developer on the same project you tend to have at least one disagreement. We ended up eventually on Silverlight 3 as it supports more, the tools are better and it is being released next week. But generally deciding on any issue should be done based on the requirements and when the requirements don't provide enough bases then other reasons should come into play. The key then is to communicate. granted we hear that in everything from time immemorial but really how much do we have to tell people before the get it. 'TALK' things through and normally logic will dictate the best solution.

moving on...

Once in source and having the app running we would start building the application out. Ariel can muck with the design in more detail and focus on the finer points of the design to it was pixel perfect and I could play with game logic and function and we both could do it at the same time. Truly a zen moment for designer developer relations.

Friday, June 26, 2009

MediaElement for Sound effects

In doing Silverlight Simon and friends and then trying to port the uber tile from Silverlight to WPF I found that for doing quick short sounds there was a limit in Silverlight and WPF to the preformance and bahavior you can expect. WPF's 'MediaElement' is just horride but even in Silverlight if I try to use the same media element to play 2 short 2 second clips with in 1 second you will get issues. I must say though the Silverlight team has done a bang up job on the media element. It is orders of magnitude better then the one in WPF.

As part of pulling bits out of the crossfader codebase to post on codeplex I built a new 'MediaElement' class (see http://Crossfader.codeplex.com/) that solves this problem with sound in Silverlight and WPF and makes my life just that much easier for building composite apps.

So Karim suggested something called channel support to solve this and in this control I implemented it. Basically what happens is that the usercontrol called 'MediaElement' creates a collection of MediaElements that it then can have events and flags for for tracking state and each of these is a 'channel'. When you call SetSource the control looks for the first available channel to assigns the source. this actually creates like a quing mechinism that allows me to rapidly play sound effects without loosing one or having to wait for the control to have its mediaelement in a ready state and I don't need to have an army of media elements.

Also in WPF and Silverlight the usage can be then the same where I call SetSource and pass in a local uri path like this:


Target1.SetSource(http://localhost:52076/tone3.mp3);

or

Target1.SetSource("tone3.mp3");

in this case make sure the item is a local 'resource' in the xap with the control. In any case check out on the crossfader codeplex project or the HackingSilverlight library.

Tuesday, June 23, 2009

Silverlight Tour In Seattle

Just thought I would drop a note about the up coming Silverlight tour in Seattle. Erik Mork is speaking in Sept 2-4th.

https://agilitrain.com/Workshop/Info/Silverlight_Tour_Workshop

and more about Erik

http://www.sparklingclient.com/