Posts tagged ‘Silverlight’

November 11th, 2010

My guest chapter for Hacking Silverlight: Community Edition

Hacking Silverlight: Community Edition CoverI’ve been working hard to stay involved in the local user group community. My adventures put me in touch with a local Silverlight MVP, David J. Kelley. David has been working on a number of projects, one of which is a follow-up book to his first title Hacking Silverlight. This new edition is titled Hacking Silverlight: Community Edition. David asked me to write a chapter that highlights some of the great projects that are on Codeplex.com. My chapter is titled Codeplex Projects Everyone Should Know About and you can read it here.

In addition to the book there is a great Code Browser that you can install which will guide you through learning the XAML/C# techniques highlighted in the book. It was a great learning experience and I hope to be able to contribute more in the future.

April 29th, 2010

Flash and Apple from my perspective.

Steve Jobs recently wrote a letter addressing his Thoughts on Flash for iPhone/iPod/iPad. You can read it here: http://discorax.posterous.com/steve-jobs-thoughts-on-flash-9#

Following Jobs posting there were numerous responses, a great one coming from Adam Banks in a post titled Thoughts on Thoughts on Flash. After reading it, I actually had mixed feelings on an issue where I have been pretty black and white to this point. Color me intrigued. I still feel after having used HTML5 on some small projects that as a cost effective mass market consumer ready technology, HTML5 is a ways off (2-3 years). It’ll be interesting to see how this plays out from a consumer perspective. As a developer this just means I have another technology to learn (w00t for me) and another content delivery mechanism to develop for.

Personally I enjoy the challenge of learning new technology, but it definitely isn’t the most efficient way to do business. I learned this when I made a switch from Flash to Silverlight. A project that I could quickly and accurately budget out resource wise became a shot in the dark. I would grossly under or over estimate the time needed because I wasn’t familiar with the technology. That’s what companies, like PBJS, will have to do if they want to adopt HTML5 in favor of proprietary, but familiar, plugins (Flash/Silverlight).  That also means that developers will have to support that choice both with time invested in learning it, and optimizing it to create the best possible user experience.

Content is still king. If your content generates the traffic you can easily justify any expense to make the user experience better whether that is open standards (HTML5), mobile apps (iPhone), or web plugin. It’s when you are building your business that these multiple distribution technologies can hinder progress. Delivering your content via HTML5 right now you won’t have the same rich experience that it would inside a plugin. Also, I’d be surprised if your agency has HTML5 experts on staff. Plus, they can be hard to find in the freelance market. Today the question is; do you deliver your content using a more costly (resources & time) and a sub-standard user experience using the technology “of the future” or do you choose the “dead technology” that can provide a cost effective and engaging user experience?

Apple may be forward thinking, but not everyone has pockets as deep as Apple. I’ll continue to look into techniques using HTML5/CSS3/JavaScript but it’s likely that I’ll continue to get paid to create plugin based experiences, at least for another year. As for those clients that want to do it the Apple way, I’ll get paid double for developing using two different workflows. Looks like I’ll be busy.

September 14th, 2009

Getting and using the pixels of your Visual in WPF

Have you ever wanted to get the Bitmap Data (pixels) of a Visual (Canvas, Grid, etc) in WPF or Silverlight from memory and without having to add it to the root visual. After doing a lot of trial and error here is a quick piece of code and a sample project that can help you accomplish exactly that.

There are plenty of cool ways to extend this project including some cool transition and other code based animations. Just let your imagination go wild!

First, create a new WPF Application in Visual Studio or [download a sample project]. In your Window1.xaml give the Grid an x:Name value. You’ll use this to add your elements later on.

<br  /><grid x:Name="VisualRoot"></grid><br />

Now lets add a new Page to our project. We’re going to alter the Page to extend a Canvas rather than a Page for no other reason then when I’m creating animations I prefer to work with a Canvas. We are going to put some visuals onto our canvas. In the sample it’s a blue square with a red circle next to it and a little bit of text below it. It could be any UIElement including another Canvas/Grid, Images, Text anything.

In our Window1.xaml code behind we’re going to create an instance of our Canvas1 and call the methods to have WPF Measure, Arrange, and UpdateLayout in memory. We need to call these methods in order for WPF to figure out where all the pixels are positioned in our visual to return accurate Bitmap Data. These methods are called automatically when you add a Visual to WPF using the Visual.Children.Add() method.

The CreateBitmapSourceFromVisual function was taken from a project on CodePlex, unfortunately I can’t recall the link. I’ll add it here if I run across it again. That function takes a Visual and returns a BitmapSource object with the pixel data. It automatically updates the dots per inch (DPI) to 96, which is required for WPF to render properly).

Here is the code behind from our root Window.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace BitmapFromVisualSample
{
    /// 
    /// Interaction logic for Window1.xaml
    /// 
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            Canvas1 myVisualElement = new Canvas1();
            myVisualElement.Measure(new System.Windows.Size(0, 0));
            myVisualElement.Arrange(new Rect(new System.Windows.Size(0, 0)));
            myVisualElement.UpdateLayout();
            // Note the myVisualElement is never added

            // Use myVisualElement to get our Bitmap Source Data.
            BitmapSource myVisualElementBitmapData = CreateBitmapSourceFromVisual(300, 500, myVisualElement, false);
            // Create an Image for your Bitmap Source
            Image myImage = new Image();
            // use our Bitmap Data 
            myImage.Source = myVisualElementBitmapData;

            // Add our Image to the Grid
            VisualRoot.Children.Add(myImage);
        }
        public BitmapSource CreateBitmapSourceFromVisual(Double width, Double height, Visual visualToRender, Boolean undoTransformation)
        {
            if (visualToRender == null)
            {
                return null;
            }
            RenderTargetBitmap bmp = new RenderTargetBitmap(
                                            (Int32)Math.Ceiling(width),
                                            (Int32)Math.Ceiling(height),
                                            96,
                                            96,
                                            PixelFormats.Pbgra32);
            if (undoTransformation)
            {
                DrawingVisual dv = new DrawingVisual();
                using (DrawingContext dc = dv.RenderOpen())
                {
                    VisualBrush vb = new VisualBrush(visualToRender);
                    System.Windows.Point myPoint = new System.Windows.Point();
                    dc.DrawRectangle(vb, null, new Rect(myPoint, new System.Windows.Size(width, height)));
                }
                bmp.Render(dv);
            }
            else
            {
                bmp.Render(visualToRender);
            }
            return bmp;
           
        }
    }
}

You can run the sample project and you will see the visual we created in Canvas1. We used the BitmapSource object of the Canvas1 as the Source of our Image. Note: we never added Canvas1 to the root visual, we simply created it in the code behind and retrieved the pixel data from that visual to use as on our Image. I leave it to you to play with this technology to create cool WPF/Silverlight animations.

[Download Source Code] as Visual Studio Project.