jump to navigation

New article: Deep Zoom for WPF 24/11/10


I’ve just released my fourth article on CodeProject: Deep Zoom for WPF. I’m very excited about this one: this article explains how to recreate the MultiScaleImage (Deep Zoom) control from Silverlight, compatible with Deep Zoom Composer, Zoom.it, multi-touch and more!

Here’s it goes:


If you like this article, please sign in and vote for this article (on the right corner, “Rate this article”), and please leave your comments and suggestions.

All the source code is also being released in CodePlex under the MS-PL licence, to facilitate future improvements and distribution. Please contribute! The project page is located at http://deepzoom.codeplex.com/.

If you like this kind of article, I also recommend my other articles on CodeProject:


Categories: .net, Artigos, Open Source, WPF

New article: Windows Phone 7 Turnstile Control for Silverlight 12/10/10



I’ve just released my third article on CodeProject: recreating the Windows Phone 7 Turnstile Effect on Silverlight (for desktop and Phone). This article explains how to recreate the 3D effect we’ve seen so many times in the Windows Phone 7 videos (or for some lucky ones, on the devices themselves). Then, it shows how to refactor the effect into a reusable control that you can apply to any layout.

Here’s the link:


You can see some demos of the effect at http://bit.ly/wptiles and http://bit.ly/wptiles3c .

If you like this article, please sign in and vote for this article (on the right corner, “Rate this article”), and please leave your comments and suggestions.

All the source code is also being released in CodePlex under the MS-PL licence, to facilitate future improvements and distribution. The project page is at http://turnstile.codeplex.com/.

If you like this kind of article, I also recommend my other articles on CodeProject:


Categories: Artigos, Microsoft, Open Source, Silverlight, Windows Phone

XAMLCast – 2a Temporada – Episódio 6 – MEF, Seesmic Look, Moonlight 3 3/2/10



O XAMLCast dessa semana está mais técnico. Falamos de MEF (Managed Extensibility Framework) e também de algumas boas novidades.
Se você sabe, não sabe ou quer saber o que é MEF, ouça, tire suas conclusões, mande dúvidas e participe enviando suas sugestões e complementos para o @xamlcast no twitter.


icon for podpress  XAMLCast - 2a Temporada - Episódio 6 [25:36m]: Play Now | Play in Popup | Download

Como de tradição, seguem abaixo os links para completar o seu entendimento e ajudar nos seus estudos:

Para fechar, parabéns ao ganhador do Expression Studio!
O ganhador foi Marcelo Paiva (@marcelo_paiva). Ele foi o primeiro a retwittar as 3 palavras na sequência certa pedida pelo @xamlcast! (link: http://twitter.com/marcelo_paiva/status/8288165428).

Obrigado pela participação Marcelo, o Expression irá chegar em sua casa!

Boa sorte e espero que gostem do podcast da semana!

Para assinar:

O XAMLCast também está no Twitter!

- Twitter oficial: @xamlcast (e hashtag #xamlcast)

- Siga os XAMLCasters:

- Adicione o Twibbon do XAMLCast ao seu avatar!

Aguardamos seu feedback!


Kelps, Roberto Sonnino e Rodrigo Kono

Categories: Dicas, Novidades, Open Source, Silverlight, WPF, XAMLCast

KnoWorld and Popfly Tutorial 12/4/09


So now you’ve heard all about KnoWorld, and you want to try out some visualizations. But how?

First of all, it’s important to know that KnoWorld lives inside a website called Popfly. This site allows you to create mashups with data from many different sources (like Facebook, Live Search and Flickr), filter and mash these data, and show them in interesting visualizations like photo carousels, interactive lists, or maps.

So basically what you have to do is to create an account or sign in at Popfly using your Windows Live ID (the same you use for Messenger, Hotmail, Spaces…). After that you can already start mashing up!

If you’ve never used Popfly, check out this video tutorial to see how easy it is to create a basic mashup – it only takes 30 seconds!


A more detailed (22 min) introduction can be seen at


When you’re in Popfly, start by clicking Create and then Mashup near the top right corner to open the Mashup Creator.

In this tutorial we’re going to explain you Popfly and KnoWorld while we recreate the US CO2 Emissions vs Environmental Events mashup we presented in our previous post.

Starting your mashup

So to start your mashup with the KnoWorld blocks simply search for “knoworld” in the block list on the left. You’ll find all of our blocks, and they’ll be ready to be dragged to the main area.

The basic data block is called Gapminder. This block can get data from all of our available indicators (full list at http://tinyurl.com/gap-ind). You can select your data by country (that will get a historic timeline for that country) or by a specific year (which will get the data for all the countries in that year). Here we will use it to get the CO2 emissions historic data for the US.

The main visualization is the Timeplot block. This one allows you to plot indicators in a line graph and mark events in the graph, allowing you to understand the relationship between the events and the indicator. Here we will use this block as means to visualize the indicator along with the events.

Let’s try a simple example: in the mashup creator, drag the Gapminder block to the main white area – it will show up as a spinning cube. After, drag the Timeplot block to the main area as well.


The next step is to configure the blocks to get the data we want. In the Gapminder block, click the small wrench icon (wrench ) or double-click the block to configure it. You will see something like this:


In the Operations list in the top left corner, you can choose if you want to get the data by year or by country. Here we’ll select by country to get data from the United States. Next, type in the boxes the parameters we want. In this case, type “co2 emissions (tonnes per person)” in the Indicator box, and “united states” as country. Click OK to confirm.

The next step is to connect the two block to show the Gapminder data in the Timeplot visualization. To do that, click the Gapminder block – a blue arrow will appear – and then click the Timeplot block. The blocks are now connected and you can configure the Timeplot block to show the data the way you want.


Click the small wrench in the Timeplot block to select how the data will be displayed. We want the years from Gapminder to be used as dates in the graph, and the values should be shown accordingly. Use the boxes to connect the correct data to the correct places, like this:


Now you’re ready to test your Mashup! Click OK if you haven’t already and click the green “Run” button to see what happens. It may take some time to load…


Showing some events

Now all that’s left is to display the events. To add events to your mashup, go back to the “Edit” mode and double-click the Timeplot block. You can add events directly by typing their dates directly in the eventDates box, and by typing their titles in the eventTitles box, separated by commas.


To add a large quantity of events, it’s more convenient to grab them from another block (such as an RSS feed) or to use a data block (the “yellow block”). In this case we’ll build a data block to store our events.

To build a yellow block, save your mashup by clicking the “Save” button, give it a name and description, and click OK. Then go to the “Create” menu and select “Mashup Data” to create a data block. This block acts just like a table to hold your data – just type the column headers in the first line separated by a comma, and type the data in the big box accordingly. Be careful not to use apostrophes (), commas (,) or quotes () in the data, because these characters are treated differently from the rest of the text.

So, in your data block, type in (or copy-paste) the events and dates, like this:


If you want, you can download the events we’ve used in the sample from this file to paste them into your block.

Save your data block by clicking “Save” and use the “My Stuff” –> Projects menu to go back to the mashup. There, click in the “Actions” link under your mashup and select “Edit” to open the Mashup Creator.

Now drag your yellow block from the blocks list (it should be near the end) and connect it to the Timeplot block. In the Timeplot configuration, select the appropriate values and that’s it!




Now you have a full featured mashup that displays data and events together! You can share it through the “Share” button and copy the link, or even put it into your site or blog with the “Embed” code. If you used a data block, don’t forget to share it as well or users might not be able to see your mashup.

This was only a small introduction to what can be done with Popfly and KnoWorld.  For example, you could also use other blocks to filter or sort the data (for example, show only the data from a specific interval), show it in maps or display flags for the countries, and much more! In Popfly, every mashup can be “ripped”, so you can see how it was made and change it. Please rip our mashups for a sample of what can be done with KnoWorld, and see how it’s done!

We hope you liked it, and we definitely hope you’ll use our blocks and spread the word. If you have doubts, ideas, questions or suggestions, please drop a comment in this post and we’ll help you. Also, if you have an idea but don’t know how to do it in Popfly, drop a comment and we might be able to help you to make it come true!

Finally, for more detailed information, you can download our official presentation along with all the links, explanations and ideas by clicking this link.

Thank you!

Virtual Dreams – Mashup team

Categories: Dicas, Imagine Cup, KnoWorld, Microsoft, Open Source

KnoWorld – Know your world to transform it


UPDATE: Check the KnoWorld blog for more ideas, videos and updates!

Hi there!

Take a look at this graph:

us co2

This graph shows the CO2 emissions in the US over the 20th century. Now, an intriguing question: why did the emissions rate decrease sharply just when it was at its peak?

To answer this question, we present you KnoWorld – our Imagine Cup ‘09 project in the Mashup category.


KnoWorld is a system that allows you to easily access and analyze world data such as GDP (Gross Domestic Product) per capita or Infant Mortality Rates.  With our project, you can visualize all these data through graphs and maps and compare them with actual events to analyze their causes and consequences. Make innovative conclusions and transform your world!

The main idea is to be able to mark a graph of an indicator with related events and easily identify what’s their impact on the trend. So let’s try it out with our initial question…

us co2 vs events

(Click the image to see the actual mashup)

Here we compared the CO2 indicator with a list of environmental events from Wikipedia, and then we can see by 1973 the highest peak followed by a noticeable fall, as we noted before. Now we can click on the event on that year, which shows the Iraq oil embargo. There we have it! We were able to find a probable cause of an uncommon change in trends, by using KnoWorld.

This may seem like a rather simple case, but many other out-of-the-box relationships can be made using these visualizations. Besides, KnoWorld supports many other visualizations, like colored maps, displaying flags, bar and line charts, and so on.

What else can I do with KnoWorld?

To show some of the power of KnoWorld and other possibilities, we’ve created some other sample mashups to discover interesting facts about the world.

Ever wondered how wars have impacted the population of France?

And what’s the situation of primary education around the globe?

And who are the countries that import most arms?

Now you can take your conclusions. And these are only 4 from more than 200 indicators that you can access with KnoWorld! To see the full list of indicators, please refer to http://tinyurl.com/gap-ind.

There are thousands of people who could benefit of this project: imagine having a geography class with interactive maps showing indicators about the subject. Or a history class in which we study trends in our country and see how the historical events changed them. Or even an NGO or company could use KnoWorld to help plan their next social actions more efficiently.

That’s awesome! How can I create my own visualizations?

To learn more about KnoWorld and create your own mashups with all the indicators and an infinity of visualization possibilities, please head to our next post, where we’ll show you how through a step-by-step tutorial on KnoWorld and Popfly. If you already know Popfly, just rip one of the mashups to see how it was built.

Please help us!

If you liked one of our mashups, please click the heart icon in the upper right corner on the Popfly page to become a fan of our project.

If you’ve used or want to use our mashups, or if you have questions, ideas or suggestions, please leave a comment in this post (or in the actual mashup in Popfly). We’re eager to see how you’ll use our project to change your own communities.

And finally, please spread the word! We really hope our project can make a good impact in the lives of many people, and with your help this might become a reality!

Thank you!

Virtual Dreams – Mashup team

Categories: Dicas, Imagine Cup, KnoWorld, Mundo, Open Source

Projeto Open Source: Exercícios de Resistência dos Materiais 3D com WPF 30/3/08


Fala pessoal!

Nessa semana, eu e o Henrique Zambon apresentamos um projeto feito em WPF para visualizar em 3D alguns exercícios da matéria Resistência dos Materiais, com direito a câmeras, zoom, e efeitos. Logo depois, divulgamos todo o código num projeto no CodePlex!

Então se você quiser aprender um pouquinho sobre WPF 3D, dê uma estudada! Vale a pena!

O endereço é:  http://www.codeplex.com/resmat

Abraços e espero que participem do projeto!


Comment this post
Categories: Open Source, WPF

Microsoft libera código fonte do .net Framework 3.5! 8/10/07


Fala pessoal!

Hoje uma notícia que pode ser espantosa para muitos, e útil para todos! A Microsoft liberou o código-fonte (comentado) do .net Framework 3.5, para facilitar o trabalho de depuração. Além disso, tudo isso estará integrado no VS2008! Agora fica mais fácil trabalhar (e não precisa mais do Reflector =D). Sem contar com as milhões de curiosidades que encontraremos, por exemplo, no source do WPF…

Fonte: ScottGu via Ramon e Shinji



Comment this post
Categories: .net, Microsoft, Novidades, Open Source, WPF

Silverlight 1.0 Lançado! Anunciando: Moonlight oficial! 5/9/07


Fala galera,

Novidades chegando! O Silverlight 1.0 RTM foi lançado!!! Agora vocês podem começar a distribuir suas aplicações ricas para IE e Firefox, Windows e Mac!!!

Baixe agora:


E mais! Lembram do Projeto Moonlight, que o Kono anunciou? Pois é, ele agora é uma parceria oficial com a Microsoft, e em breve teremos Silverlight no Linux!!! Inicialmente, no Firefox, mas logo no Konqueror, Opera e Webkit. Acompanhe o blog do Miguel de Icaza para saber mais.

(Fiquei sabendo pelo blog do meu pai)



Comment this post
Categories: Microsoft, Open Source, Silverlight