Anthony Baker

Adding Sample Data in Blend

2012-01-24T15:29:00.001-08:00

As many of us, I like to go back to basics from time to time, specially if I been a bit away from a certain technology. Although I have been doing a lot of posting about Windows 8, Surface 2.0 and Windows Phone, I haven’t talked much about Silverlight.

I started working with Silverlight from the very beginning, back when it was called WPF/E. The newest version, Silverlight 5 was released a couple of months ago, in December. I should have been paying more attention to it, but hey….time is not enough for so many cool things at the same time after all !

While I try to find more time to talk, review and share Silverlight 5 features, I wanted to do a post about how to add sample data into your Silverlight application using Expression Blend.

I want this to bit a bit more visual and less text, so here we go !

Open Blend and create a new Silverlight project…

On the right panel, go to the Data tab. Click on the arrow next to the data icon and select “New Sample Data”…

Enter a name for this sample data set…

Blend will create your sample data collection in the Data tab. Click on the data icon in the collection element to edit the sample data records…

Blend sample values window allow to select the sample data properties to display, along with their type and format giving you great flexibility for sample data generation out of the box…

Now here is a cool feature. Once you have your data generated, close the window. Now go to the collection element in the Data tab, click and hold the collection element, and drag it to the “Objects and Timeline” tab. Blend will create a ListBox element for you on the fly to display the sample data….

Run the project (F5) and you will see your Silverlight application running with your generated sample data.

This is by old means an old topic. I did a presentation about this back in 2010 for my colleagues. The most excited ones where actual designers ! Have you noticed that following the previous steps you created a Silverlight application without having to write a single line of code?

Of course, this is nothing compared to the power of the Silverlight platform and the .NET framework. This is sometimes mistaken by people who are not experienced developers. It is easy to put together shiny things quickly using tools like Blend. Is a completely different thing to create robust, scalable and responsive Silverlight applications, and for that you need the experience and knowledge of experienced .NET developers.

Anyways, check out what you can do with a few simple modifications on the sample data generation.

Open the sample data collection and change the second property to an image type and load the sample images from a local folder (ideally should be the project sample images folder)…

Here is the final result…with a few touches on the XAML so the ItemsPanelTemplate is an horizontally oriented StackPanel !

The Sample Data generation in Blend works for any kind of supported applications, including WPF and Windows Phone apps. You can generate sample data using random patterns based expressions as I have show you, but you can also generate sample data from XML files or a database. This is a really helpful tool for designers and developers to stylize and test the application without the lower data access layers that might be just under development at that point, and of course is also really useful.

Expression Blend is arguably the best user interface development tool out there, although it is exclusively for .NET and now WinRT application development, which recently seems to be gaining more traction and interest from the industry.

Cheers!

Loading an Image from a string Path

2012-01-22T14:07:00.001-08:00

Sunday quick WPF tip. Here’s how you load an image from a string path using the ImageSourceConverter which is part of the System.Windows.Media namespace:

Hope it helps. Cheers!

The using Statement

2012-01-21T09:53:00.000-08:00

I wanted to have a better understanding on when to use the "using" statement and why is was recommended and actually enforced in some cases. There's a lot of documentation and discussion on the subject, but wanted to share a quick brief to help you out and record it on my blog journal. Here it is:

The using statement provides a convenient syntax that ensures the correct use of IDisposable objects. This means that by making use of the "using" statement properly, you are making sure that objects are correctly disposed. Now wait a minute, C# manages the garbage collection for me, and should actually dispose the objects correctly without requiring any extra code from me, right?

Well, it turns out that we use unmanaged resources in our code. And that is why the "using" statement is important to make sure that those unmanaged resources are disposed correctly once they are not in scope any more. File and Font are examples of unmanaged resources.

Here is the rule and the explanation:

"When you use an IDisposable object, you should declare and instantiate it in a using statement.
The using statement calls the Dispose method on the object in the correct way, and (when you use it as shown earlier) it also causes the object itself to go out of scope as soon as Dispose is called. Within the using block, the object is read-only and cannot be modified or reassigned."

Here is a sample with the "using" statement:

Here is the proper equivalent without the "using" statement

I'll be posting more samples along the way, hopefully sharing more code and samples that are useful for our every day tasks.Cheers!

Namespace using Directives Best Practice: Inside or Outside?

2012-01-21T09:40:00.000-08:00

I wanted to write a few lines regarding this topic. For most of my years coding in C# I have always put my using directives outside the namespace declaration. I have seen thousands of samples from developer across the world and from Microsoft official documentation and Microsoft employees blogs and I'm pretty sure almost all of them tend to have their using directives outside the namespace. I would say that that makes it the de-facto industry standard.

However when I moved to the UK I found developers actually were including their using directives inside the namespace declaration. At the beginning it seemed totally wrong and I was against it. When discussing the practice with them the argument was that source analysis tools like Re-sharper and StyleCop actually encourage you to move the using directives inside the namespace. I though it was a valid reason although I don't personally share it.

Here is a basic sample of using the directory outside the namespace:

sample of using the directory outside the namespace:

Then I started to realize that these developers were actually breaking the single-class per file best practice. I know that some people will argue about it and I know that there are developers that tend to include several related classes in the same file. Furthermore, these developers will tend to use a lot of namespace aliases and fall into bad interdependency practices.

It turns out that although there are subtle differences between having using directives inside or outside the namespace, there is no prove whatsoever that there are advantages from using one or another approach, it will fall to personal taste. If you use namespace aliases heavily and tend to have several classes in the same file, then it will be probably better in most cases to have your using directives inside the namespace. However, I would argue that it is actually a good practice at all. Class file names represent the class itself, so by having more than one class in a file you are actually making your code and project structure harder to read and maintain. I would also say that by enforcing the one-file-per-class rule you are also enforcing the single responsibility principle at least in a conceptual sense, which is helpful when implementing complex solutions.

There are people claiming that having the the using directory inside the namespace enforces assembly lazy loading, however the claim is false. Placing the using directive inside or outside the namespace doesn't have any effect on the assembly loading process.

My conclusion is that there are no tangible benefits of having the using directive inside the namespace at all, and instead, it promotes confusing code that goes against the de-facto industry best practices. I'll stick to having my using directives outside the namespace and having one-class-per-file as I strongly believes it promotes cleaner, easier to maintain code, OO practices and better looking code structure.

Cheers!

Microsoft.WebApplication.targets not found

2012-01-21T07:58:00.000-08:00

Working on a recent project I noticed this annoying issue when I tried to open a large solution in Visual Studio composed of many different projects. Two of the projects were not loaded in the solution because of this, reporting the following on the output window:

The imported project "C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v9.0\WebApplications\Microsoft.WebApplication.targets" was not found. Confirm that the path in the declaration is correct, and that the file exists on disk.

The problem as you can see is that the extensions file "Microsoft.WebApplication.targets" was not found. I was using Visual Studio 2010, so the first hint is that the project was looking for the extension file in the Visual Studio 2008 folder (v9.0) instead of VS 2010 (v10.0).

The simple solution? just copy the "WebApplications" folder from v10.0 to v9.0. Close the solution and re-open it again and it should work fine.

If you don't have Visual Studio 2010 installed or you can't find the file, chances are that you are missing some web components from the installation that are required to build/deploy/publish web applications. Try to find the files on-line or better yet, install Visual Studio 2010 and copy the files to your v9.0 folder. If you actually have Visual Studio 2010, you should actually make those projects point to the VS2010 folder instead of the VS2008 one.

Now, one thing to notice is that you might be having this issue on a build server instead of your local machine. If the build server is trying to build web applications you will probably get this error since it is likely that you don't have Visual Studio installed there, and that should be the case. It is against best practices to have VS installed on your build server, it is a NO-NO!. If this is your case, just copy your local files to the server and make sure they are in the same location. Also you would probably want to make sure that .NET Framework 4.0 is installed in the server.

Now, what is the purpose of this file and why it is needed? It basically contains extension entries required by MSBuild for deployment tasks of web applications.

Hope it helps. Cheers!

My Digital Work

2012-01-19T14:56:00.000-08:00

I was just surfing on-line and watching digital agencies case studies when I started to stumble upon projects I have worked on the past. Not every project is out there, or I have been able to talk publicly about it, but for some of them, I have been able to pick videos and some pictures.

If you would like to take a look at published videos of projects I have been part of, take a look at my YouTube "My Digital Work" playlist

Here is a couple of short-cuts to the posts I have published on different digital projects I have worked on.

@R/GA
@Game Development StartUp
@Schematic

Cheers!

R/GA London Make Day Video

2012-01-19T09:58:00.000-08:00

I'm excited to share with you the R/GA Make Day Video which was finally released today to the public. If you recall my previous post on the subject, R/GA dedicated 48 hours of company time for people in the company to invest their time making things. The output was incredibly productive and creativeness on all areas where flying all around. I was lucky enough to make it to the final cut and I appear discussing the R/GA Locator prototype including the applications that we implemented including Windows 8, Windows Phone and Silverlight all powered by a MS SQL 2008 database and a small backend exposing a RESTful service build with WCF.

I truly believe companies should follow the trend and start doing these kind of events more often. Although at first people might seem reluctant, once they get into it they will get inspired and quite competitive !

Anyway, without further presentations, here is the R/GA London Make Day Official Video

About Microsoft Hardware Requirements for Windows 8

2012-01-19T02:41:00.000-08:00

Wanted to share a comprehensive summary of Microsoft published hardware certification requirements for Windows 8 based computers.
Check it out and make sure once you buy your new toy, it complies with everything listed there !

Adaptive Layout on Windows Phone

2012-01-18T15:58:00.001-08:00

Lately, I have been getting into responsive, adaptive and fluid layout design techniques and development.

Since Windows 8 supports native development using HTML/CSS/JS and IE has been performing quite well on HTML5 features support along with Chrome (my default browser by the way !), I have been getting more attracted to the idea to master the concepts behind the evolution of web applications and how we can attack the growing quantity of different devices, all with different screen sizes and resolutions, without forgetting ultra books, tablets, laptops, desktops, larger screens and out of home experiences.

The slowing down trend on plugin-based web development, especially with Flash (it’s future seems darker every day) and Silverlight (which has evolved into a whole platform outside the browser) also put more weight on the importance of knowing and mastering HTML5 responsive and adaptive layout design techniques.

Along my regular reading and research I found an amazing tutorial by Matt Doyle on Elated.com demystifying the whole thing and explaining in an impressive clear, concise and practical way, the concepts behind it and how to achieve a layout that can successfully and quite effortlessly adapt to a multiple set of screen sizes and resolutions.

I wanted to test the results on Windows Phone, not only on the emulator but also on an actual device. Here are some screenshots from the results.

Windows Phone Emulator

Windows Phone HTC Mozart

I encourage you to read the tutorial first. I’m sure it will be really helpful. Is clear that the author, Matt Doyle did a really good job, since the layout adapts perfectly to the Windows device without any need for modifications.

Get Responsive, get adaptive !

Kill SOPA - STOP CENSHORSHIP

2012-01-18T08:44:00.000-08:00

Sites around the world are protesting against the US SOPA and PIPA initiatives trying to censor the Internet...censorship is not cool at all, Internet if build by all and for all. Piracy exists and sometimes is awful to see how some people make money out of the creativity of others, but let's face it, without Internet freedom and some level of piracy the Internet won't be what it is right now...

Here's a list of sites protesting today:

http://www.google.com has blacked out their logo in protest

http://en.wikipedia.org/wiki/Main_Page entire site is blacked out

http://www.reddit.com/ blacked out

http://www.mozilla.org/ blacked out

http://www.wired.com/ blacked out

http://thedailywtf.com/ "whited" out (some lulz here)

http://boards.4chan.org/co/ all text on the page is blacked out

http://www.fark.com/ "whited" out (also funny)

http://wordpress.com/ images of blog themes are blacked out

http://techcrunch.com/ logo blacked out

http://boingboing.net/ blacked out

http://news.ycombinator.com/ blacked out logo

http://arstechnica.com/ changed to black theme

http://xkcd.com/ blacked-out strip

http://gnu.org/ blacked out

http://imgur.com/ blacked out

http://newyork.craigslist.org/ blacked out
http://theoatmeal.com/ animation educating people

Update:
You should check this article studying the different ways that the listed websites changed their sites to support the SOPA protest. It's a really cool overview of the techniques used and which ones are actually correct in terms of web usage and HTTP standard responses. Check it out

Update:
I found this article explaining a bit more in detail the different legislation acts and how it can go further and affect us, users and domain registrars. Make sure to check it out !

Visio Scroll Lock

2012-01-18T06:11:00.000-08:00

Have you ever found yourself trying to move your shapes in Microsoft Visio with the annoying result of the whole window scrolling instead of the shape? Have you look all around the place for an option to change this behaviour? Turning something on or off to see if it fixes it?

Well, here is the solution: look for the Scroll Lock key on your keyboard (generally next to your Print Screen key), turn it off and you are ready to go !

Hope it helps and saves you time !

Github in Numbers

2012-01-18T03:45:00.000-08:00

Sharing this interesting article about languages and project's life cycle on Github made by cortesi. Although Github is not very popular for developers on the .NET stack, I think the article is actually quite useful for every tech guy out there and also for recruiters and companies to have a better understanding of the Github crowd.

Cheers!

Tim O'Reilly on the SOPA case

2012-01-18T03:35:00.000-08:00

Just a quick post to share a statement made by Tim O'Reilly about Washington's response to the SOPA act. I found it really interesting because he acknowledges piracy, but actually states that piracy losses are outweighed by the benefits of free flow of information and knowledge sharing that ends up bringing more sales to the company. It also comments on the historic fact that United States publishing industry began by actually pirating British and European works !

Enjoy !

How to Convert an Image to Grey scale in WPF

2012-01-17T15:14:00.001-08:00

Converting images to grey scale is a nice trick to bring elements to user attention by “turning off” other elements. You could use a trick like this to “activate” or “deactivate” an element. Anyways, here is how you change an image to grey scale in WPF:

img.Source =
    new FormatConvertedBitmap(
             (BitmapSource)img.Source,
             PixelFormats.Gray16,
             BitmapPalettes.Gray16, 0
    );

Hope it helps !

How to Enable Local Keyboard for Windows Phone Emulator

2012-01-17T12:54:00.001-08:00

Is it possible to use the local physical keyboard of your development machine when using the Windows Phone emulator?

Yes it is possible and is activated by using a shortcut:

To enable the keyboard in the emulator press the PAGE UP key or press the PAUSE/BREAK key.

To disable the keyboard in the emulator press the PAGE DOWN key or press the PAUSE/BREAK key.

Furthermore you there are a lot of different key mappings between your development machine keyboard and the phone functions. You can check the whole list in the Windows Phone Emulator MSDN documentation.

Cheers!

Surface Tip: Binding a ScatterView ItemsSource

2012-01-16T15:45:00.001-08:00

Now that we have covered the basics of the ScatterView control and the different most common layout scenarios, lets discuss Binding. Binding is a powerful WPF feature that allows you to bind presentation elements to code behind properties which can be loaded in run time and changed at any time, effectively affecting the displayed elements. One of the most common scenarios is to bind the ItemsSource property of a ScatterView control to a code behind property so you can effectively load and modify the collection from code and reflect the changes in the interface automatically.

Lets assume you have the following XAML code:

<s:ScatterView x:Name="scatter" Background="Transparent" >
    <s:ScatterView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image x:Name="img" Source="{Binding}" />
            </Grid>
        </DataTemplate>
    </s:ScatterView.ItemTemplate>
</s:ScatterView>

As you can see, we are just defining the ScatterView items template but not the actual items. In this case, the image element inside the Items template has its source as a binded property. We could implement a collection property in the backend that we could load from a web service (as shown in this post I made for Windows 8) and then use as the items source for the ScatterView items collection. Another common scenario is to display a collection of images from a local folder, say your last vacation pictures. Following this last scenario, here is how you bind the ItemsSource from code. Here is how you do that from code:

scatter.ItemsSource = Directory.GetFiles(@"C:\Users\Public\Pictures", "*.jpg");

The previous code will load all files with extension “.jpg” from the specified directory. This will effectively made the app to display all the images stored in that folder.

Now you know how to bind a ScatterView items collection to an image collection from your local file system.

Enjoy!

Surface Tip: Navigating the Visual Tree

2012-01-16T14:39:00.001-08:00

There will be times where you will generate dynamic objects on your user interface. A simple example could be loading a collection from a web service and dynamically adding the items to your item controls. Later on you might need to navigate that dynamically generated visual tree to retrieve a specific object or item from it to perform any kind of modifications, which might include even deleting the item, which again will be a common scenario.

Here is how you do it. First you need to pass the DependencyObject that you will be iterating over, which could be for example a ScatterViewItem of a ScatterView control. Then, we will iterate over the children of the DependencyObject using the VisualTreeHelper. Then, what we want to do in this case is to return the associated ContentPresenter object matching the specific content control (the ContentPresenter basically is responsible for displaying the content of a ContentControl). If there is no ContentPresenter on the given children, we perform a bit of recursion to iterate over the child’s children

ContentPresenter FindContentPresenter(DependencyObject obj)
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
    {
        DependencyObject child = VisualTreeHelper.GetChild(obj, i);
        if (child != null && child is ContentPresenter)
        {
            return (ContentPresenter)child;
        }
        else
        {
            ContentPresenter childOfChild = FindContentPresenter(child);
            if (childOfChild != null)
                return childOfChild;
        }
    }
    return null;
}

Ok. Maybe a little bit confusing if we don’t have a purpose. In the previous code sample, what we want is to have a method that we can call to return the ContentPresenter object associated with a specific DependencyObject. A good example will be to retrieve the image ContentPresenter of an Image control that is included on a ScatterViewItem so we can modify the image source. Take the following XAML as an example:

<s:ScatterView>
    <s:ScatterViewItem>
        <Grid>
            <Image Source="Image.jpg" Width="400" Height="200"/>
            <TextBlock Text="This is some text" HorizontalAlignment="Center" />
            <s:SurfaceButton Click="OnItemClicked" />
        </Grid>
    </s:ScatterViewItem>
</s:ScatterView>

Obviously the previous sample is too basic and it would be a low easier just to give the image a name and reference it from the code behind. But assume that this will be the dynamic XAML generated once you run the application and the user executes an action. Then, you don’t have access to the image item by name reference, so you need to get the ScatterViewItems that in this case was clicked and then use our FindContentPresenter method to get the image content presenter child.

Hope that it makes sense and that can be useful in your Surface 2.0 development.

From Live Writer to Twitter

2012-01-16T14:02:00.001-08:00

Just on the trend of maximizing productivity, I’m using Windows Live Writer (my favourite blog writing tool) now connected to twitter to see how it goes. Keep your productivity rocking so you don’t drown into your many many daily duties. Cheers!

Consuming Web Services in Windows 8

2012-01-16T12:59:00.001-08:00

I’m currently working on an extended series for creating a small backend with database, backend modular architecture approach and REST services to serve the different front end applications that I have been putting together for the blog. The idea is to provide a common backend framework and services to feed the different samples I create and help you out there to have a more complete series of code samples to work with.

In the meanwhile, I’ll be posting small tips about how to do things on the Windows Ecosystem, which encompasses Windows 8 (Metro Style, .NET, C# and JS), Windows Phone, Silverlight, WPF, Surface 2.0 and Kinect.

For this post, I’ll share with you an approach to consume REST web services from a Metro Style Windows 8 application.

For this sample, you need to create a new Windows 8 Metro Style application. Once Visual Studio created the default project structure, go into your MainPage.xaml.cs file. Let’s assume you will be consuming a REST web service that will return an XML with a collection of items. You will want to display those items, but first you need to populate your data collection. Lets create the default collection field.

private ObservableCollection<Customer> customers = null;

Note that we are creating a private ObservableCollection of type Customer. You will need to define your customer class, which can be as simple as the following:

public class Employee
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
}

Ok, so you have your collection field to load your Customer collection from the web service. Now we need to initialize the collection on the page’s constructor by calling the asynchronous method that will in turn call the web service and return the collection of customers:

public MainPage()
{
InitializeComponent();
customers = await GetCustomersAsync(http://serviceurl/customers);
}

Notice the reserved keyword “await”. This is one of the goodness of Windows 8, which allows you to program asynchronous code in a linear approach, which makes it a lot easier to read and digest. Here, we are telling the thread to await the call resolution in an asynchronous way. The method we call, will hit the web service and parse the XML response to return our Customer collection. Notice how you can use LinqToXml to easily parse the response (be aware that no failure catching has been implemented, you should always check for null values to avoid code exceptions when parsing the XML).

The code to do so is the following:

public static async Task<ObservableCollection<Customer>> GetCustomersAsync(string serviceUrl)
{
    HttpClient webClient = new HttpClient();
    Uri serviceUri = new Uri(serviceUrl);

    HttpResponseMessage serviceResponse = await webClient.GetAsync(serviceUri);

    var streamReader = new StreamReader(serviceResponse.Content.ContentReadStream);

    var xmlReader = XmlReader.Create(new MemoryStream(System.Text.UnicodeEncoding.Unicode.GetBytes(streamReader.ReadToEnd())));

    var xmlResponse = XDocument.Load(xmlReader);

    var customers = from c in xmlResponse.Descendants("customer")
                            select new Customer
                            {
                                FirstName = (string)c.Element("firstname"),
                                LastName = (string)c.Element("lastname"),
                                Email = (string)c.Element("email"),
                            };

ObservableCollection<Customer> customerCollection = new ObservableCollection<Customer>(customers);

return customerCollection ;
}

And that’s basically it. You have been able to load a collection of customers asynchronously from a REST web service serving XML responses from your Windows 8 application. Once the collection is loaded you can bind your UI items control to it to populate and display the collection items.

Hope it can help you on your Windows 8 Metro training. Keep tuned for more updates !

Let me know if you have any troubles with it and I’ll be more than happy to try to help you out.

Cheers

Social Media Trends to Look For in 2012

2012-01-16T05:03:00.000-08:00

Just wanted to share this article about social media trends to look for in 2012 published by Tech Crunch. Social Media integration and strategy are getting bigger and bigger but they are also mutating from another mass advertisement channel into a platform by itself that companies need to integrate into their strategies at a deep level to become successful at it.

Enjoy !

From the Inside to the Outside

2012-01-16T04:56:00.000-08:00

"The internal matches the external and the external matches the internal..."

This is a quote from Jack Dorsey (chief executive and co-founder of Square and also co-founder of Twitter) when interviewed by the New York Times for Bits.

The phrase caught my attention because it seems to me that it is extremely relevant in the present digital era. Companies often try to sell an image and an identity on their products that most of the times doesn't actually match the company's internal identity. we all know it happens all around the world. They try to sell you an idea, an identity, a sensation that sometimes we know is fake...is just a lie. From music to food, from services to advertisement the world is full of this failed intentions of producing products that reflects company's positions.

This is why I believe that is really important for companies, specially for start-ups to focus on transparency and on delivering products and/or services that actually transmute into company's real internal culture. The Square example covered by The New York Times is inspiring, as some others like Facebook and Google, at least when they started.

It also comes to my mind past experiences where I worked for companies and start-ups that tried so hard to sell an idea that some times didn't reflect at all the internal situation, policies and culture. Transparency and clarity should come from the inside and translate and reflect to the external. I truly believe that companies succeeding on this approach will be able to establish a solid and trust worthy relationship with customers and help the company to stablish as a valid choice for many.

Cheers!

Thoughts About Responsive Design

2012-01-15T12:15:00.001-08:00

The concept of Responsive Design has been gaining traction over the last couple of years, mostly due to the growth of mobile and tablet devices (the iPhone and iPad success in particular), and the problem that has arisen in terms of layout design targeting multiple devices and platforms. It seems that the idea is attributed to one of the first pioneers, Ethan Marcotte around the first quarter of 2010. After that, guys like Harry Roberts and Paul Gordon have written about the subject, and of course many more smart people in the interactive and user experience fields.

At a high level it means that design layouts should react and/or adapt according to the device that the content is being viewed in. It is a wide concept that can take many forms. The best responsive designs are the ones that can dynamically react to the device display capabilities and changes and perform a series of “adaptations” like the following:

Adapting the layout to suit screen size
Resizing images to suit the screen resolution
Serving up lower-bandwidth images to mobile devices
Simplifying page elements for device specific use
Hiding non-essential elements on smaller screens
Providing better experiences according to device capabilities
Detecting and responding to location and orientation.

Most current websites are designed to work on a desktop browser assuming that the resolution standard for this times is around 1024 x 768. Basically, rounding up a 1000 pixels wide.

This are a few examples of standard industry resolutions:

Desktop—1024 and above
Legacy desktop—800×600
Tablet—768 on tablets
Mobile—<480 on mobile phones

A basic approach to attack this problem is to use fluid layouts, which dynamically adapt to the wide and/or height available resizing content columns to take more or less space from what it is available. However this is only a partial fix, since when screens are radically narrower (mobile) or wider (desktops, big screens, walls) they break.

This is a difficult problem for designers and also developers. There are some many different screen sizes and resolutions these times that it is hard to come up with a working solution. Smartphones, televisions and interactive out of home screens make it even more difficult.

One alternative is to have different web sites for different devices. This was a hot practice a few years ago when you could break apart just two categories: mobiles and desktop (basically everything else). Nowadays however, the categorization doesn’t work. Plus, having different sites for different devices is just too expensive to create and maintain for most companies.

The whole point about responsive layout design is to come up with a layout that can adapt and respond to any screen size and resolution effectively responding to any device displaying capabilities.

As you can see I have been mixing the term responsive with adaptive so far. There seems to be different positions about what is the right terminology and what each term implies. It seems to me that no matter how you put it, it is basically about a layout reacting and changing itself at different level depending on the display medium. You can go as far a trying to deliver a layout that constantly changes itself according to subtle and small changes or just targeting well known standard industry resolutions and screen sizes.

HTML and CSS best practices can help achieve a responsive design, although I think the concept goes beyond the web environment. Windows 8 is applying responsive design using the Metro Framework which allows applications to adapt to layout and display changes effectively enabling applications to mutate from narrower and simpler layouts to full blown features display and even massive out of home experiences.

Although my work has been mostly on interactive applications and not particularly on website development, I’m excited about applying this concepts to web and platform specific development techniques. I’ll keep an eye on this concepts and how do they translate to real application development practices both for Windows, the Web and Mobile.

Cheers!

Windows Phone 2011 Retrospective

2012-01-13T10:24:00.000-08:00

Just wanted to share this cool infographic from the Windows Phone blog presenting a visual retrospective of 2011 regarding Windows Phone.

Check it out !

Surface 2.0 User Interface Teaser

2012-01-12T16:00:00.001-08:00

Just a teaser of a Surface 2.0 user interface in the workshop !

Surface Tip: Adding Items to a ScatterView

2012-01-12T13:03:00.001-08:00

Continuing with the basic tips and tricks for Surface 2.0 and keeping our focus on the ScatterView control, I’ll show you how you add items to a ScatterView by code.

First you need to have your ScatterView control in your XAML:

<s:ScatterView x:Name="scatter" />

Then, on the code behind file you can add a simple code method to add an image as an item to the existing scatter control (make sure the image file you use is added on the root of the project or change the path to the correct one depending on your image folder structure):

private void Add()
{
    Image img = new Image();
    img.Source = new BitmapImage(new Uri("Sunset.jpg", UriKind.Relative));
    scatter.Items.Add(img);
}

The method above allows you to add the images. For a simple test and sample, you can just call the Add method in the constructor method of your simple app:

public SurfaceWindow1()
{
    InitializeComponent();
    AddWindowAvailabilityHandlers();
    Add();
}

If you run the app, it will display just one image.

Now, you can reuse previous tips to make something more interesting. You can add a style in the ScatterView control so the items you add have a nicer look and feel. Lets change the ScatterView to add the item style template:

<s:ScatterView x:Name="scatter">
    <s:ScatterView.ItemContainerStyle>
        <Style TargetType="{x:Type s:ScatterViewItem}">
            <Setter Property="Center" Value="512,384"/>
            <Setter Property="Width" Value="300"/>
            <Setter Property="Height" Value="170"/>
            <Setter Property="BorderBrush" Value="White"/>
            <Setter Property="BorderThickness" Value="3"/>
            <Setter Property="CanRotate" Value="True"/>
        </Style>
    </s:ScatterView.ItemContainerStyle>
</s:ScatterView>

Now instead of just adding one image in the constructor, we could actually add a button for the user to add the images dynamically. Lets do that using a DockPanel control with a UniformGrid container to provide a menu style bar with the add button:

The DockPanel in conjunction with the UniformGrid allows you to dock the items contained to one of the borders of the table. You can define which border to dock to and the number of columns to display. Then you just need to add the button.

The button has a click handler defined, so you also need to implement the event handler in the code behind:

private void Add(object sender, RoutedEventArgs e)
{
    Image img = new Image();
    img.Source = new BitmapImage(new Uri("Sunset.jpg", UriKind.Relative));
    scatter.Items.Add(img);
}

Remember to remove the first Add() method that we added before to the constructor. If you run the application you will be able to add images dynamically to the screen.

Cheers!