jump to navigation

Quick tip: Convert images from any format to XAML 8/3/10

 

Hey there!

For today’s quick tip I’ll show how to convert images from any 2D vector format (and I really mean ANY) to XAML. It’s pretty simple!

Note: if your image is in a bitmap format (e.g. JPEG, PNG, GIF, PSD, etc), you should simply convert it to PNG or JPEG using any image editor and use it directly as a bitmap image in your app. This method is only necessary for vector file formats.

Note 2: There are specialized converters for many formats that might yield better results. I’d recommend searching the web to see if there isn’t a converter for your format before trying this method.

Requirements:

Steps:

  1. Open your image in your favorite image viewer. In this example, I’ll open an SVG from Wikipedia with Firefox.

    SVG image in Firefox
  2. Print the image to PDF with PDFCreator.

    Printing image with PDFCreator
  3. Rename the PDF file to AI using Windows Explorer. (e.g. “image.pdf” becomes “image.ai”)

    Image is in PDF formatRename to AI format
  4. Open the AI file with Expression Design. You might now want to delete some parts of the image that you don’t want to be exported.

    AI file open in Expression Design
  5. Save it to XAML as usual using File > Export… in Expression Design.

    Exporting to XAML with Expression Design

Yes, it’s THAT simple! Enjoy!

See you next time,
Roberto

This blog post is also available on

5 comments
Categories: Dicas, Expression, Silverlight, WPF  

Quick WPF/Silverlight tip: Generic Converter MarkupExtension 4/3/10

 

Hey there!

It’s been quite a while since the last English post – XAMLCast has been taking much of my blogging time :-)

Today’s tip is an expansion of a method originally developed by Dr. WPF in this post: http://www.drwpf.com/blog/Home/tabid/36/EntryID/48/Default.aspx .

Usually, when working with Converters in WPF/SL, we always follow the same steps:

  1. Create a class that derives from IValueConverter: 
    public MyConverter : IValueConverter {}
  2. Implement Convert (and sometimes ConvertBack) 
    public object Convert(object value, Type  targetType, object parameter,  System.Globalization.CultureInfo culture)
{
  // convert and return something
}
  3. Instantiate the converter as a resource and use it: 
    <ResourceDictionary ...>
    <local:MyConverter x:Key="TheConverter" />
</ResourceDictionary>
...
{Binding Converter={StaticResource TheConverter} ...}

Well, it works but it’s not a compact syntax. Following Dr. WPF’s idea, we can use a MarkupExtension to replace the StaticResource by a static instance of the Converter:

public class  MyConverter: MarkupExtension, IValueConverter
{
    private static MyConverter _converter;

    public object Convert(object  value, Type targetType, object  parameter, System.Globalization.CultureInfo culture)
    {
        // convert and return something
    }

    public object  ConvertBack(object value, Type  targetType, object parameter,  System.Globalization.CultureInfo culture)
    {
        // convert and return something (if needed)
    }

    public override object  ProvideValue(IServiceProvider serviceProvider)
    {
        if (_converter == null)
            _converter = new MyConverter();
        return _converter;
    }
}

Usage:

xmlns:conv="[Path to namespace that contains the converter]"
...
{Binding Converter={conv:MyConverter}}

Now that’s pretty!

The only problem is that with this method, you’d have to repeat the implementation of the ProvideValue for each converter you create, and we programmers hate repeating ourselves :-)

One solution I found is to create a generic abstract class that will contain that implementation, and derive each converter from that class. It’s cleaner and works the same:

using System;
using System.Windows.Data;
using System.Windows.Markup;

namespace VirtualDreams.Converters
{
    [MarkupExtensionReturnType(typeof(IValueConverter))]
    public abstract class ConverterMarkupExtension<T> : MarkupExtension where T : class, IValueConverter, new()
    {
        private static T _converter;

        public override object ProvideValue(IServiceProvider serviceProvider)
        {
            if (_converter == null)
            {
                _converter = new T();
            }
            return _converter;
        }
    }
}

Let’s apply it to MyConverter:

public class  MyConverter: ConverterMarkupExtension<MyConverter>, IValueConverter
{
    public object Convert(object  value, Type targetType, object  parameter, System.Globalization.CultureInfo culture)
    {
        // convert and return something
    }

    public object  ConvertBack(object value, Type  targetType, object parameter,  System.Globalization.CultureInfo culture)
    {
        // convert and return something (if needed)
    }
}

Usage:

xmlns:conv="[Path to namespace that contains the converter]"
...
{Binding Converter={conv:MyConverter}}

Simpler, less repetitive – that’s the way I like it!

Happy converting!

Roberto

This blog post is also available on

Comment this post
Categories: .net, Dicas, Silverlight, WPF  

XAMLCast – 2a Temporada – Episódio 7 – Silverlight Viewport, Visual Studio 2010 RC, MVVM 17/2/10

 

Caros ouvintes!

Continuando o papo técnico, este espisódio do XAMLCast traz o tema MVVM salpicado com novidades e boas dicas e referências para você estudar.

Ouça e tire suas conclusões:

 
icon for podpress  XAMLCast - 2a Temporada - Episódio 7 [32:08m]: Play Now | Play in Popup | Download

Seguem os links relacionados ao podcast:

Discutam, comentem e retwittem!

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!

Abraços,

Kelps, Roberto Sonnino e Rodrigo Kono

5 comments
Categories: Dicas, Microsoft, Novidades, Silverlight, WPF, XAMLCast, XNA  

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

 

Saudações!

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.

Ouça:

 
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!

Abraços,

Kelps, Roberto Sonnino e Rodrigo Kono

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

XAMLCast – 2a Temporada – Episódio 5 – Notícias, retrospectiva 2009, concursos e final da promoção 27/1/10

 

Palmas para o XAMLCast!

Após um impreviso técnico que causou um atraso de uma semana, o seu informativo semanal sobre XAML, Silverlight e WPF está no ar, com muitas notícias!
Ouça:

 
icon for podpress  XAMLCast - 2a Temporada - Episódio 5 [23:10m]: Play Now | Play in Popup | Download

Essa semana o XAMLCast traz as seguintes informações:

PROMOÇÃO!

Não esqueça que este episódio contém as palavras premiadas para você ganhar o Expression Studio novinho novinho!

Ouça, anote as palavras premiadas deste episódio e as palavras do episódio passado, siga o @xamlcast e fique atento no twitter!

Quando o @xamlcast perguntar as palavras premiadas informe todas as palavras na sequência correta!
O mais rápido irá levar!

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!

Abraços,

Kelps, Roberto Sonnino e Rodrigo Kono

1 comment
Categories: Dicas, Microsoft, Novidades, Silverlight, WPF, XAMLCast  

XAMLCast – 2a Temporada – Episódio 4 – Motion Detection , SilverX (conversão Flash/Silverlight), Silverlight HVP 13/1/10

 

Salve salve moçada!

Estamos muito agradecidos pelo ótimo feedback que estamos tendo.

Até tivemos um retweet internacional do Brian Henderson (http://twitter.com/brian_henderson/statuses/7454878672).

Continuem mandando sugestões de temas, comentários e dúvidas. O XAMLCast está gerando e refletindo um conteúdo muito bacana em listas de discussões, blogs e forums. É isso aí pessoal!

No episódio número 04 falamos de Motion Detection em Silverlight 4, SilverX (conversão de arquivos Flash/SWF para Silverlight), falamos do Silverlight Hyper Video Player (HVP) e fechamos com uma boa promoção onde você poderá ganhar um Expression Studio novinho e na caixa!

Ouça:

 
icon for podpress  XAMLCast - 2a Temporada - Episódio 4 [20:08m]: Play Now | Play in Popup | Download

Seguem os links relacionados:

PROMOÇÃO!

Ganhe um Expression Studio 2 completo e na caixa! Igual à foto abaixo!

Foto da caixa do Expression Studio 2

Sua grande chance de ter o melhor software para trabalhar com Silverlight e WPF.

Para participar é simples:

  1. Seguir o @xamlcast no twitter
  2. Saber as palavras da sorte que estão no audio do XAMLCast (só ouvir). Uma foi dita no episódio 04 e a(s) outra(s) será(ão) no episódio 05.
  3. No dia da publicação do episódio 05 do XAMLCast, iremos pedir via twitter através do user @xamlcast as palavras da sorte. Quem postar primeiro leva o prêmio!

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!

Abraços,

Kelps, Roberto Sonnino e Rodrigo Kono

8 comments
Categories: Dicas, Novidades, Silverlight, XAMLCast  

XAMLCast – 2a Temporada – Episódio 3 – Office 2010 Web Apps, MIX 10K e Silverlight SEO 6/1/10

 

Fala pessoal!

O ano passa mas o XAMLCast continua! Feliz 2010!

Neste episódio do XAMLCast falamos um pouco sobre o Microsoft Office 2010 Web Apps, concurso MIX 10K e Silverlight SEO.

Ouçam!

 
icon for podpress  XAMLCast - 2a Temporada - Episódio 3 [19:39m]: Play Now | Play in Popup | Download

Seguem abaixo as referências:

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 ansiosos pelo seu feedback!

Abraços,

Kelps, Roberto Sonnino e Rodrigo Kono

6 comments
Categories: Dicas, Silverlight, XAMLCast  

Speech Recognition Engine in Portuguese (Brazil and Portugal) 30/10/09

 

Hey there,

bandeiras

After my original posts about speech recognition, I’ve been getting lots of questions about speech in other languages, especially Portuguese. At last I’ve got an answer for you: I’ve recently discovered some samples from Microsoft Portugal’s Language Development Center (MLDC) that provide Portuguese speech recognition engines!

These are the steps to get them:

  1. Take a look at the official MS Portugal site about this: http://www.microsoft.com/portugal/mldc/betaprograms/winclientdesktop.mspx
  2. Go to http://connect.microsoft.com and sign in
  3. Use this invitation ID: MLDC-BKBY-DTBD
  4. After filling in the survey, go to the Downloads page for this program: https://connect.microsoft.com/Downloads/Downloads.aspx?SiteID=368
  5. Download the packs and documentation and good luck!

Note: The language packs are from 2007; they haven’t been tested with Windows 7.

Note 2:  The packs didn’t work in my English Windows 7. I guess you’ll need a Portuguese version of Windows Vista/7 to test them.

UPDATE 6/12:  The pack DOES work, but only for custom apps. I might do a tutorial on this soon…

If it works for you please leave a comment!

Thanks and see you soon!

Roberto

Engine de Reconhecimento de Voz em Português (Brasil e Portugal)

Fala pessoal,

bandeiras

Após meus posts originais sobre reconhecimento de voz, eu tenho recebido muitas perguntas sobre Speech em outras línguas, especialmente português. Finalmente tenho uma resposta para vocês: recentemente eu descobri alguns samples do Language Development Center da Microsoft Portugal (MLDC) com engines de Speech em português!

Para baixar os packs, siga esses passos:

  1. Dê uma olhada no site oficial do MS Portugal sobre este assunto: http://www.microsoft.com/portugal/mldc/betaprograms/winclientdesktop.mspx
  2. Vá para http://connect.microsoft.com e faça login
  3. Use esse ID de convite: MLDC-BKBY-DTBD
  4. Depois de preencher a pesquisa, vá para a página de downloads para este programa: https://connect.microsoft.com/Downloads/Downloads.aspx?SiteID=368
  5. Baixe os pacotes e a documentação e a boa sorte!

Nota: Os pacotes são de 2007; eles ainda não foram testados com o Windows 7.

Nota 2: Os packs não funcionaram no meu Windows 7 em inglês. Talvez você precise de uma versão em português do Windows Vista/7 para testá-los.

UPDATE 6/12:  O pack FUNCIONA, mas só.para programas desenvolvidos especialmente para ele. Talvez eu faça um tutorial sobre isso logo…

Se funcionar para você, por favor comente!

Obrigado e até a próxima!

Roberto

33 comments
Categories: .net, Dicas, Microsoft  

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!

http://www.popfly.com/Videos/?video=ThirtySecond

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

http://silverlight.net/learn/learnvideo.aspx?video=86527

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.

blocks

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:

config_gapminder

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.

connect_blocks

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:

config_timeplot

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…

graph

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.

timeplot_events

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:

data_block

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!

yellow_block

timeplot_yellow_block

final_mashup

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

2 comments
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_logo

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

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