Tim Heuer

Two great events are happening here in the Valley of the Sun (yes, it’s still 105°F outside here folks) are coming up soon that you should consider taking part in.

Startup Weekend Phoenix

Startup Weekend is a weekend long event (starting on Friday at about 6pm and ending on Sunday at 6pm) where local techies, entrepreneurs, project managers, or interested people of all types gather in teams to actually create companies that could be viable in today’s marketplace.  This isn’t just vapor, past Startup Weekends have actually gotten to the point of initial prototypes, branding, marketing strategies within this weekend.  The goal is to gather the local community brains, have fun, and innovate.  It sounds like a really, really great time.

The event is not a free event, but only costs $39.99 and the funds are going only to directly support the event…the intention is not to ‘make money’ off these registration fees, but cover the costs beyond the sponsors have provided.  This event is not organized by one individual, one organization and there are no hidden agendas by any sponsors.  Local entrepreneurs and community folks are arranging this and excited to try to ignite the innovation in the Phoenix area and come up with something great!

Register here.  Info here.  October 17-19, 2008.

PodcampAZ 2008

I went to this event last year and it was full of energy!  Organized by some great folks, namely Brent Spore, this is the place to be in November if you are involved locally in social media.  The speaker line up is looking fun and Chris Pirillo and iJustine will be in attendance. This event is free and if you are available that weekend you should definitely go to see what is happening in social media in our area.

The event is two days, held at the UAT campus in Tempe/Phoenix (I can never tell exactly where that is located, but it’s close enough to Ted’s BBQ that I call it Tempe).  Come out and join the fun.

Info here.  No registration required.  Only fun is required.  Last year shirts were available with a “This one time, at Podcamp” theme – I can only imagine something equally as sarcastic will be made this year.

It’s fun to see things like this happening in Phoenix.  Let’s get everyone to show up and support our technical communities!

The Expression Encoder team has announced the plans for SP1 of their product (announced, not released).  You can read all the details on their team blog for more information, but two things caught my attention that are probably of most interest: H.264 encoding and a Silverlight 2 template in the box.

The H.264/AAC encoding support is a result of customer feedback (as well as preparing for future Silverlight support).  While the profiles in this service pack will be limited and may not meet the needs of everyone immediately, it is a great step and will probably meet the needs of most.

The templates produced by Encoder 2 right now have been Silverlight 1.0 templates.  This has been a sore spot for some wanting to move to Silverlight 2 and remove themselves from all the javascript that the templates have.  There have been a lot of solutions popping up (shameless plug: SL2VideoPlayer on Codeplex), but people still want the template in the box (note: you can do this with your SL2 players today as well).  The team announced they will be providing SL2 templates based on a core control called MediaPlayer which supports a wide range of features.  As you could imagine the template will support basic and advanced playback capabilities and will be able to be styled as well as advanced property manipulation in Expression Blend.  This one feature caught my eye and makes me happy:

Byte-range seeking: When a user clicks forward on the timeline into a non-downloaded region, the player will cancel the current progressive download and start a new one from the point that has been seeked to.

Sweet.  I can’t wait.  The SP1 will happen by the end of the year and will be a free upgrade to existing Encoder 2 customers.

As you may know, most wheel support is detected at the browser level.  In Silverlight, this makes adding mouse wheel support an interop action with the HTML host.  While people have implemented it, it has mostly been for the use of DeepZoom applications.  In fact, the latest DeepZoom Composer tool actually adds this support now if you choose to have a Silverlight project as a part of the output of the collection.

But what about other controls, namely ScrollViewer?  Having content in ScrollViewer enables ScrollBar functionality but doesn’t automatically respond to mouse wheel actions.  Adam Cooper has solved this gap problem by adding a helper class to which you can attach to your ScrollViewer object.  Let’s say our XAML is this:

   1: <ScrollViewer x:Name="MyScroller" Width="300" Height="100" Background="AliceBlue">
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span>     <span style="color: #0000ff">&lt;</span><span style="color: #800000">TextBlock</span> <span style="color: #ff0000">TextWrapping</span><span style="color: #0000ff">="Wrap"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span>         Even if you use my workaround ...</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   4:</span>     <span style="color: #0000ff">&lt;/</span><span style="color: #800000">TextBlock</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   5:</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ScrollViewer</span><span style="color: #0000ff">&gt;</span></pre>

If we run the application our content is scrollable, but not with the wheel.  Add Adam’s control reference and these lines of code in our Page.xaml.cs class:

   1: using Cooper.Silverlight.Controls;
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span>  </pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span> <span style="color: #0000ff">public</span> Page()</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   4:</span> {</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   5:</span>     InitializeComponent();</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   6:</span>  </pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   7:</span>     ScrollViewerMouseWheelSupport.Initialize(<span style="color: #0000ff">this</span>);</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   8:</span>  </pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   9:</span>     MyScroller.AddMouseWheelSupport();</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  10:</span> }</pre>

and we have automatic wheel scroll support.  Great job Adam!  His post talks about various other methods of nesting and how it actually works.

It would be nice if you could just create MyCustomScrollViewer but unfortunately you cannot subclass ScrollViewer for some reason. 

Some might be also wondering how they could add this functionality to ListBox, since the default control template for ListBox contains a ScrollViewer.  Good question I thought as well and I went about trying.  There are some challenges to using the default ListBox.  First, the visual tree of the template is only loaded after the layout has been updated.  I’m not sure why it isn’t in Loaded, but in LayoutUpdated it is available.  So from this event you can use VisualTreeHelper.GetChild(ListBox, 0) to get the root node of the template.  From there you can use FindName(“ScrollViewer”) to get to the ScrollViewer in the default control template.

Here’s where it gets funky.

While you can add Adam’s extension method just fine with no exceptions, it doesn’t exactly work when rendered.  Here’s the code I used:

   1: void DefaultList_LayoutUpdated(object sender, EventArgs e)
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span> {</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span>     <span style="color: #008000">// root node</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   4:</span>     Grid rootGrid = VisualTreeHelper.GetChild(DefaultList, 0) <span style="color: #0000ff">as</span> Grid;</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   5:</span>     </pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   6:</span>     <span style="color: #008000">// find the ScrollViewer</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   7:</span>     ScrollViewer scroller = rootGrid.FindName(<span style="color: #006080">"ScrollViewer"</span>) <span style="color: #0000ff">as</span> ScrollViewer;</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   8:</span>     </pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   9:</span>     <span style="color: #008000">// add the mouse wheel support</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  10:</span>     scroller.AddMouseWheelSupport();</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  11:</span>  </pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  12:</span>     <span style="color: #008000">// stop looking</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  13:</span>     DefaultList.LayoutUpdated -= <span style="color: #0000ff">new</span> EventHandler(DefaultList_LayoutUpdated);</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  14:</span> }</pre>

And while no errors occur, I believe other events in the ItemTemplate are eating my events.  If anyone has any wise thoughts, post the comments here.  But either way, thanks Adam for this great utility for ScrollViewer!

A few weeks ago my wife and I traded “up” to a Canon EOS 40D digital SLR camera.  We also invested pretty heavily (for non-professional, borderline rookies) in lenses that we knew we’d use most often.  When the Canon Digital Rebel (EOS300D) first came out, I bought it…what can I say, I’m a geek!  I paid over USD $1K for the kit and it was/is a good camera.  Still, it was the first and probably not even considered ‘prosumer’ grade. 

Advance about 3 years (maybe 4?), for the same price (actually a little less), I’m in a 40D with amazing lenses, functionality and quality.  The quality/price ratio has been getting exponentially higher as this digital photography progresses.  And then I hear about the Canon 5D Mark II camera with video capture.  I’m not going to run out and buy this one (at USD $2700 for the body only it is a bit much, but maybe in a year :-)), but this story is amazing!  Vincent Laforet is a 33 year old photographer in New York.  His work is impressive.  Recently he convinced Canon for a little try-before-buy deal.  He asked to borrow the 5D Mark II for 72 hours.  He would use his own lenses and shoot some photos and video.  The resulting images/video would be royalty free to use (I think that was the deal).  Using nothing but his existing lenses and the new camera he produced an amazing video (with no re-touching) which he calls Reverie.

You must absolutely spend the time to let this video download and watch it.  The quality is amazing…and that’s with some compression so it didn’t chew up amazing bandwidth on the web.  Wow.  Simply wow.  More details on the story and a behind-the-scenes video at Vincent’s blog.

Silverlight MVP and friend, Joel Neubeck, has started a series in the Expression Newsletter.  The first article is available now and is part of a 6-part series in building a casual game in Silverlight:

    • Getting Started – Architecture / framework
    • Movement and collision detection
    • Design – Sprites, boards and dialogs
    • Animations and sound
    • Initialization and Deployment
    • Advanced concepts (Physics, Multiplayer, Optimization)

This first article talks about some of the framework that will be used, specifically an MVC model:

“In Silverlight development, MVC is an excellent way to support role specific tools such as Visual Studio for the developers and Expression Blend for designers and animators.  Using MVC in a game ensures a foundation that isolates a developer’s ability to control state (position, movement and collisions) while allowing designers full control over how game elements are rendered.”

This should be a good series to watch and add to your toolbox for developing casual games in Silverlight 2.