jump to navigation

[PT-BR] Novos webcasts sobre WPF no MSDN Brasil 7/11/11

 

Opa pessoal,

Recentemente eu e meu pai gravamos uma série de webcasts básicos sobre WPF para o MSDN Brasil.

Os meus webcasts foram:

Aproveite e veja a série completa em http://msdn.microsoft.com/pt-br/netframework/dd897462.

Bom estudo!
Roberto

5 comments
Categories: .net, Artigos, Dicas, WPF  

Quick WPF/Silverlight tips to make great videos of your apps 8/2/11

 

Hello there!

Have you ever developed a great WPF or Silverlight app with lots of smooth animations, but when you tried to capture it in video (using software like Camtasia and Expression Encoder) the animations are jumpy and slow?  Have you tried to zoom in to some part of your app only to see that your beautiful UI gets pixelated?

Well this tip is for you! In this post I’ll give some tips from my experience recording the video for Skedle, our newest WPF app. Take a look at the Skedle video below:

YouTube Preview Image

You can see that the animations are smooth and the resolution is crisp, even when the video zooms in the application. Also, did you know that the opening “Skedle” animation was actually captured directly from the WPF app?

So let’s jump on to the tips!

1. Slow down animations and then speed up the video

No matter what PC you have and how optimized your app is, you’ll almost never be able to capture animations with the same smoothness and fluidity as the real app. To overcome that, the solution is to slow down all your animations by a factor of 10 or 20 (using the SpeedRatio property), and then speed up the video accordingly in those specific parts.

“But”, you might say, “does that mean I’ll have to change the SpeedRatio of each Storyboard?”. The answer: No for WPF, unfortunately yes for Silverlight! WPF allows you to override properties like SpeedRatio by using Dependency Object metadata overrides (unavailable on Silverlight as of v4 and WP7). Here’s an example  that slows down all the animations by a factor of 10 (you can use it on your App.xaml, for instance):

static App() {
    Timeline.SpeedRatioProperty.OverrideMetadata(typeof(Storyboard),
               new FrameworkPropertyMetadata { DefaultValue = 0.1 });
}

Of course, this tip won’t work if you specifically set the SpeedRatio of any of your animations.

One last point: don’t use this to cheat or lie about the fluidity of your app! If your app is slow and you make it look smooth, users will notice that the first time they try it, and it won’t look good for you.

2. Use Viewbox or RenderTransform to zoom in without losing quality

The next thing you’ll want to do is to record your screencast in a huge resolution in order to enable crisp zoom-in effects on your video. The easiest way to achieve that is to wrap your main layout panel on your window or page in a Viewbox (available on WPF and Silverlight 4)  and set its Width and Height to a fixed size, or simply use a ScaleTransform as your panel’s RenderTransform to scale everything up to a fixed factor.

For example, if your app looks good on a 800×600px window but you have a 1920×1200px monitor, you can record your video at double size (1600×1200px), which will allow for zoom effects in a hi-res (720p) video. In WPF or Silverlight, this could look like the following:

<Window>
    <!-- ... -->
    <Grid>
        <Grid.RenderTransform>
            <ScaleTransform ScaleX="2" ScaleY="2" />
        </Grid.RenderTransform>

        <!-- old content goes here, with fixed size -->
        <Grid Width="800" Height="600" x:Name="LayoutRoot">
            <!--more stuff-->
        </Grid>

    </Grid>
</Window>

This tip won’t work if you have images on your UI, but you would lose resolution on those anyway when zooming. At least you’re getting the best of the vector-based parts of your interface.

When recording videos for WP7 apps this tip doesn’t apply too well because you’re constrained by the size of the emulator. My recommendation is to record on the maximum size of the emulator (click the magnifier icon, select 100%), which will give you a 800×480px screen – usually more than enough for YouTube videos.

Bonus tip: If you use this to zoom in, try setting the Windows cursors to “Windows Aero (extra large)”, which will give you a mouse pointer that is proportional to your huge interface!

You can also use this tip to record title screens and other animations for your video (for example, the Skedle title animation was zoomed in by a factor of 5). In fact, by combining the two tips, you could create the video entirely in Expression Blend!

So that’s all for today. If you create a cool video using these tips, please post it as a comment!

See you next time!
Roberto

This post is also available on .

7 comments
Categories: .net, Dicas, Silverlight, WPF, Windows Phone  

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:

http://www.codeproject.com/KB/WPF/DeepZoom.aspx

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:

Thanks!
Roberto

3 comments
Categories: .net, Artigos, Open Source, WPF  

XAMLCast – Interview with Paul Betts about ReactiveXaml 29/10/10

 

Hey everyone!

[Para os ouvintes brasileiros/portugueses: a entrevista foi feita em inglês mas o vídeo também foi legendado em português! Aproveite!]

Following on our special series of interviews, Roberto interviewed Paul Betts, a Software Development Engineer in the Windows team and creator of ReactiveXaml. In a video special, he talked about Reactive programming and how to apply it to WPF and Silverlight through RxXaml. An awesome introduction to a new paradigm on WPF/SL development!

If you want to download the video, leave a comment in this post. If there’s enough demand, I’ll upload the video (1.6GB!) to a file share.

Here are the links we talked about in the interview:

Reactive Extensions for .net
http://msdn.microsoft.com/en-us/devlabs/ee794896.aspx

ReactiveXaml
http://github.com/xpaulbettsx/ReactiveXaml

ReactiveXaml Google Group
http://groups.google.com/group/reactivexaml

Paul’s Twitter
http://twitter.com/xpaulbettsx

Paul’s Blog
 http://blog.paulbetts.org

Also, don’t miss our previous interview with Arturo Toledo about design and Expression!

Subscribe to receive XAMLCast directly on your MP3 player, phone or RSS reader:

You can follow XAMLCast on Twitter: @xamlcast

Stay tuned for more!

Kelps, Roberto Sonnino and Rodrigo Kono

7 comments
Categories: .net, Dicas, Microsoft, Silverlight, WPF, XAMLCast  

XAMLCast – Episódio 20 – Visual Studio LightSwitch e 10 coisas que um dev WPF/SL deve saber por Pete Brown 9/9/10

 

Chegamos ao episódio número 20!

Este episódio comentamos especialmente o Top 10 que o Pete Brown publicou na semana passada. A gravação está bacana e esperamos que gostem!

 
icon for podpress  XAMLCast - Episodio 20 [38:27m]: Play Now | Play in Popup | Download

Links de referência deste podcast:

Cadastre e receba o podcast diretamente no seu Ipod, Zune, Mp3 player, etc:

O XAMLCast no Twitter: @xamlcast

Até o próximo!

Abraços,

Kelps, Roberto Sonnino e Rodrigo Kono

7 comments
Categories: .net, Dicas, Microsoft, Novidades, Silverlight, WPF, XAMLCast  

XAMLCast – Episódio 18 – Sterling DB, SilverMotion, Windows Phone 7 e mais 31/7/10

 

Fala pessoal!

Depois de duas semanas sem gravar por causa de dificuldade em sincronizar nossas agendas, acabamos decidindo gravar esse episódio sem o Kono para não deixar vocês, nossos ouvintes, mais uma semana sem o XAMLCast. Mas não se preocupem pois no próximo episódio estaremos todos de volta.

Nesta semana falamos de Sterling DB, SilverMotion, Windows Phone 7, Silverlight para Symbian e Xte Profiler. Ouça!

 
icon for podpress  XAMLCast - Episodio 18 [32:55m]: Play Now | Play in Popup | Download

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!

Até o próximo!

Abraços,

Kelps, Roberto Sonnino e Rodrigo Kono

5 comments
Categories: .net, Dicas, Silverlight, XAMLCast  

Surface Toolkit for Windows Touch Beta! 12/4/10

 

Hey there!

Surface Toolkit for Windows Touch Beta

Today, together with the VS2010 launch, Microsoft has finally released the Surface Toolkit for Windows Touch for download!

But what is it, you might ask? This toolkit enables WPF developers with Windows 7 touch PCs with the Surface controls (such as ScatterView and Library) and touch visualizations to create really awesome multitouch apps.

Stop reading this and go download it now:

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=801907a7-b2dd-4e63-9ff3-8a2e63932a74

If you don’t have a touch device, you can use MultiTouchVista to simulate multiple touches using multiple mice. A step-by-step tutorial can be found in this link: http://wenjiun.blogspot.com/2009/11/testing-windows-7-multi-touch-with.html

Also take a look at this video from Channel 9 which shows the toolkit:

http://channel9.msdn.com/posts/LarryLarsen/Surface-Toolkit-for-Windows-Touch/

Happy multitouching!

Roberto

1 comment
Categories: .net, Dicas, Microsoft, Novidades, Surface, This is Cool, 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  

New article: Multi-touch development with WPF – A multi-touch RSS reader 1/11/09

 

Hey there!

TouchReader screenshot

I’ve just released a new article on CodeProject: this time it’s about multi-touch development with WPF 3.5 and Multi-Touch Vista. In the article you’ll learn how to set up your PC for multi-touch development and you’ll be able to see the making of a MT RSS reader application. If you’re interested in new interfaces and better user experiences, this article is a “must see” =D

Here’s the link:

http://www.codeproject.com/KB/WPF/MultiTouchRSS.aspx

If you like this article, please sign in and vote for this article (on the right corner, “Rate this article”). And please comment!

Also, if you like this kind of article, I’d recommend my other article on CodeProject, about 3D, speech and ink with WPF at http://www.codeproject.com/KB/WPF/3D-bookwriter.aspx .

Enjoy!

Thanks!
Roberto

5 comments
Categories: .net, Artigos, Novidades, Surface, Tecnologia, WPF  

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

30 comments
Categories: .net, Dicas, Microsoft