Bruno Sonnino

ReSharper–Productivity tool for Visual Studio

bsonnino — Fri, 17 Feb 2012 17:44:11 GMT

One of the indirect benefits of being a Microsoft MVP is that many tool or component producers give copies for MVPs for their personal use, so they can use, evaluate and, if they like it, recommend it.

I use many of these tools on a daily basis and like them very much. So nothing more fair than write a post about them and how they help my work.

There is no doubt that the tool I use the most is ReSharper (http://www.jetbrains.com/resharper/), an add-in for Visual Studio to enhance your productivity. When I use Visual Studio, it’s always there, helping me to write code.

Code analysis

When you open a project, ReSharper will analise your code and start to give you suggestions to enhance it. When you open a console project, you will see something like this on the editor:

On the right side, a new bar is added with help indicators for your code. The yellow square at the top shows that there are warnings to improve your code. If it’s red, there are compile errors and, if your code is ok, the square turns green. Below the square, there are some bars indicating the points where problems are found. If you hover the mouse over the bars, a tooltip will show the problem.

Fixing the error is very simple. You just have to click on the bar and the editor will be positioned on the place of the error. A red bulb will indicate the error and we can click on it to show the available actions. This list can be selected with Alt-Enter. If I could only remember one ReSharper shortcut, this would be the one. It will do many fixes for you, with Alt-Enter your code will improve a lot!

We select the desired action and ReSharper corrects the code (by eliminating the using clauses not needed). To fix next error, we can see that the args parameter in the Main function is in gray. That means that it’s not being used there. When we put the mouse over the args parameter, ReSharper shows a pyramid, indicating that there is a refactoring to be made.

It will remove the unused parameter. Besides this change, it will verify all places where the function is called and change its call. That’s great when we add a parameter and later we verify it is not needed and we want to remove it. If we do that, all places where the function is called will not compile. With this refactoring, our code won’t break anymore.

ReSharper is constantly analyzing our code and checking consistency on variables and methods names. You can tell how do you like to name the fields, properties and methods and it will check the consistency for you.

For example, I like to name my private fields using CamelCase, starting with a lowercase character (with no leading underscore). If I put a field using a different naming, ReSharper will tell me and ask to change it. Just press Alt-Enter and it will change the name and all references to this variable.

Code improvement

ReSharper also verifies the quality of your code. Yes, I know that your code (like mine) is wonderful, but can it be improved? Take a look on the figure below, where I have a WPF application where I’ve added the event handler of the Click event for a button in code, using button1.Click += <tab><tab>.

ReSharper shows two warnings and a reminder. The first warning is about MainWindow. It shows that the parent type (Window) has been already declared and is not necessary. We should remember that when we create a WPF window we are creating a partial class, declared in two places: on the XAML and on the code behind. The XAML already tells that MainWindow inherits from Window and we can remove this redundant declaration on the code behind. The second warning is due to the fact that we can eliminate the delegate creation when adding the handler. The reminder is to tell us that we have a “Not Implemented” exception, a clear indication that we must add code there. Pressing Alt-Enter twice, and our code will be changed to:

ReSharper analyses your code, checking for improvements and possible errors. When you enter this code

you can see on the bar on the right a warning and a possible improvement. The warning tells us that ToString is redundant and that we must specify a culture for the conversion. The fact that it’s redundant makes it a candidate for elimination. Alt-Enter and there it goes. The next improvement is in the for, that can be converted to a LINQ expression. Pressing Alt-Enter again we end up with this code:

Other common code improvements are if and return optimizations: when we put something like this

if (x == 3)
  y = 2;
else
  y = 5;

ReSharper optimizes to:

y = x == 3 ? 2 : 5;

Or this code:

if (x == 3)
  return 2;
else
  return 5;

Here, we have two optimizations: eliminate the else

if (x == 3)
  return 2;
return 5;

or use the ternary operator:

return x == 3 ? 2 : 5;

Refactoring

That’s not all that ReSharper can do for you. Its refactoring tools and code creation are fantastic. If we want to extract the code from the event handler to a new method, we can press Ctrl-Shift-R (Refactor this) and ReSharper will show all available refactorings.

We select the extract method refactoring and this screen is shown:

We can indicate the parameters, the function name and its return type. By clicking on Next, we get something like

Code creation

We can also insert code using templates. ReSharper allows to create templates with code for new files or code snippets.

We have three kinds of templates:

Live templates – code snippets templates, inserted like Visual Studio snippets. To insert them, we must add the snippet name and press <tab> to insert. One other way to insert these snippets is by using Ctrl-E-L. On the figure above, I’ve created the propnp snippet, that creates a property with a backing field and calls the PropertyChanged handler.

Surround templates, that surround the code with a template, like to surround the code with a try…catch. They can be invoked with Ctrl-E-U.

File templates – they create new files on our project, like new classes or interfaces. They are invoked with Ctrl-Alt-Ins.

We will create a new class in our project. We press Ctrl-Alt-Ins and create a new class, calling it NewClass. We then press Alt-Ins and insert the constructor for the class. On the constructor parameters, we insert a dependency:

Note that IDependency is in red, because we have not defined this interface. We press Alt-Enter and these options are shown:

ReSharper has noted that we’ve set the type name starting with ’I’ and suggests to create a new interface. We can create our interface from here. After creating the interface, we press Alt-Enter again in IDependency in the constructor and we can declare a field to store the dependency:

Our interface was created on the same file as the class file. We can go to its declaration and press Alt-Enter. ReSharper offers to move it to a different file. A new IDependency.cs file is created with the interface. Easy, no? It also eases the variables declaration. For example, when we enter code like

total = -1;

on the constructor, we see that total is in red. Pressing Alt-Enter we have these options:

We can create a total field on our code. As we can see, we have many ways to change and improve our code.

XAML help

But that is not alll that we get. We can use ReSharper also while editing XAML code. For example, if we create a Converter in code:

public class DebugConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}

When we want to use it in XAML, we must follow some steps: namespace, resource declaration, etc. ReSharper can help us for that.

We press Alt-Enter in DebugConverter and select Create resource in type element <Window>. ReSharepr creates the Resources section and creates the resource. We add the name DebugConverter with no namespace. A tooltip is shown indicating the needed namespace

We then press Alt-Enter and the namespace is added to the window declaration and the prefix added to the element. If we don’t like its name, we can rename it with Ctrl-R-R. Everything needed is ready, now. If we have a DataContext associated to the element and it doesn’t have a property named Valor, we can use ReSharper to create this property on the DataContext class, like a ViewModel.

Code navigation

ReSharper has many shortcuts for code navigation. For example, Ctrl-T navigates to a defined type. A screen like this open is opened

We enter part of the name and it shows all types that match with the search. On the same way, we can use Shift-Alt-T to go to a symbol or Ctrl-Shift-T to go to a file. The search is done in all solution’s files. The navigation between members of a class can be done with Alt-`. You can go to the previous or next member with Alt-Up or Alt-Down. If you want, you can even go to a decompiled .net code. ReSharper has a decompiler that decompiles the code and allows navigating to it.

Misc utilities

You have many othere goodies in ReSharper. You have a unit test runner, where you can run your unit tests. You may be thinking that Visual Studio already has a test runner, but the one VS has runs only MSTest tests. ReSharper runner works with MSTests, NUnit, QUnit or xUnit. One other interesting functionality is the Explore Stack Trace. You have an exception stack trace that comes from any source. You can copy the stack trace to the clipboard and, in Visual Studio, use Ctrl-E-T. The stack trace is shown with links to your code, so you can go to the place where the exception occurred.

Conclusion

This is just part of the functionality offered by ReSharper, there is much more to explore, but I leave that for you. This is a paid tool, but you can download a 30 days trial version in http://www.jetbrains.com/resharper/download/index.html.

I really think this is an indispensable tool for everyone who develops with Visual Studio, I just have a point against it: it is really addictive and once you get used to using ReSharper, it’s very difficult to develop without it.

Recursos para aprendizado de Windows Phone 7

bsonnino — Fri, 10 Feb 2012 09:10:00 GMT

Ontem (9/2/2012) apresentei uma palestra na Campus Party 2012 e, ao final da palestra, mostrei uma série de recursos para aprendizado desta plataforma. Estou repetindo aqui, para que vocês possam verificar a quantidade disponível e aprender a desenvolver para Winddows Phone.

Windows SDK and Tools - http://create.msdn.com – Ponto de partida do AppHub, onde você pode baixar gratuitamente todas as ferramentas para desenvolver para Windows Phone
Windows Phone 7 Developer Portal - http://bit.ly/tIPZK3 – Portal de desenvolvimento do Windows Phone, com inúmeros recursos. Vale a pena começar com o Getting Started, onde há links para artigos, blogs e vídeos
Windows Phone 7 Training Kit - http://bit.ly/uKo8Fg – Link para download do training kit, contendo programas, exercícios para iniciar o aprendizado na prática
Livro Windows Phone 7 Development – Charles Petzold - http://charlespetzold.com/phone/index.html – Livro de 1000 páginas para download gratuito sobre desenvolvimento de Windows Phone
Videos Windows Phone 7 JumpStart - http://bit.ly/wp7jumpstart – Curso em vídeo com quase 20 horas sobre desenvolvimento para Windows Phone
Portal de Windows Phone da Microsoft em português - http://bit.ly/yxE8Po

Todos estes recursos são gratuitos, vocês não tem desculpas para não começar a aprender já!

Animating transitions in WPF/Silverlight–Part IV–Behaviors

bsonnino — Thu, 09 Feb 2012 10:45:00 GMT

On the last post, I’ve shown how we can animate transitions using Blend and Visual States. An important part in that mechanism is the use of behaviors. With behaviors, we can execute very complex actions, just by dragging a behavior into a window component. That’s very powerful and brings other benefits:

It’s reutilizable. We can include the same behavior in many different situations.
Allow that designers can include functionality in the design with no code.

We have two kinds of behaviors:

Actions – they execute an action associated to an event. For example, you can create an Action that, associated to a Textbox, “clicks” for every keystroke, or another action that makes the element below the mouse pointer grow.
Full behaviors – in this case, there is a more complex behavior, not necessarily associated to a trigger. One example is the MouseDragElementBehavior, that allows a dragging an element using the mouse.

Blend has predefined behaviors of the two kinds, with the end of the name telling its type (like in CallMethodAction or FluidMoveBehavior).

You can add new behaviors by searching the Blend gallery, at http://gallery.expression.microsoft.com (last time I’ve checked, there were 114 behaviors available there).

Behaviors are associated to an object and can have additional properties, beyond the trigger that activates them. For example, the GoToStateAction has the target component, the state to be activated and the boolean property UseTransitions as additional properties.

You can set the action’s properties and can also specify conditions for activate it. For example, when on the project from the previous post, we can use a checkbox to allow the transition activation. For that, we must click on the “+” button in front of Condition List, click on the advanced properties button from the condition and create a data binding with the checkbox’s property IsChecked. This way, the animation will only be triggered if the checkbox is checked.

If the predefined actions don’t do what we want, we can create custom actions to it. On the previous post, we use standard actions, but we had to create the Visual States. And we have another inconvenience: if we want to do animations that go up or down, we must create new Visual States. That way, we will create our action to do what we want, with no need of any special configuration.

On Visual Studio, create a new WPF project. We will add our Action to the project. Visual Studio, by default, doesn’t have the template to create actions. We could do that using Blend: after opening the project in Blend and selecting the Project panel, you can click it with the right button and select Add New Item and add an Action to the project.

Another way to do it is to use the Visual Studio online templates. On Visual Studio’s Solution Explorer, click with the right mouse button in the project and select Add New Item. Then go to Online Templates and fill the search box with action. Select the C# Action Template for WPF template and give it the TransitionControlAction name.

The template adds a reference to System.Windows.Interactivity and creates a class similar to this code:

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

namespace WpfApplication4
{
    //
    // If you want your Action to target elements other than its parent, extend your class
    // from TargetedTriggerAction instead of from TriggerAction
    //
    public class TransitionControlAction : TriggerAction<DependencyObject>
    {
        public TransitionControlAction()
        {
            // Insert code required on object creation below this point.
        }

        protected override void Invoke(object o)
        {
            // Insert code that defines what the Action will do when triggered/invoked.
        }
    }
}

We have two action types: TriggerAction and TargetedTriggerAction. TriggerAction is an action that doesn’t act on another control. For example, if we want to create an action that starts Notepad when something happens, we would use a TriggerAction. TargetedTriggerAction makes reference to another element, called Target. This element is a property of the action and can be accessed in Blend.

We will create a TargetedTriggerAction. For that, we must change the class declaration to inherit from TargetedTriggerAction, like it’s shown in the comment in the beginning of the file. This action will execute the same code we’ve created on the first post to do the animation. We must also change the kind of object where it will be acting. We will use the FrameworkElement, because it has the properties ActualWidth and ActualHeight, which we will need.

public class TransitionControlAction : TargetedTriggerAction<FrameworkElement>

We will begin creating the enumeration for the animation kind and two DependencyProperties, the kind of animation we want and its duration. That way, these properties will be available in Blend.

public enum AnimationKind
{
    Right,
    Left,
    Up,
    Down
}

[Category("Common Properties")]
public AnimationKind AnimationKind
{
    get { return (AnimationKind)GetValue(AnimationKindProperty); }
    set { SetValue(AnimationKindProperty, value); }
}

public static readonly DependencyProperty AnimationKindProperty =
    DependencyProperty.Register("AnimationKind", typeof(AnimationKind), typeof(TransitionControlAction));


[Category("Common Properties")]
public TimeSpan Duration
{
    get { return (TimeSpan)GetValue(DurationProperty); }
    set { SetValue(DurationProperty, value); }
}

public static readonly DependencyProperty DurationProperty =
    DependencyProperty.Register("Duration", typeof(TimeSpan), typeof(TransitionControlAction), 
    new UIPropertyMetadata(TimeSpan.FromMilliseconds(500)));

We have added the Category attribute to the properties AnimationKind and Duration, so they can appear in the Common Properties group. When we compile the project and open it in Blend, we can see that our Action appears in the Assets panel.

When we drag a TransitionControlAction to a button, its properties appear in the property editor:

Our action still doesn’t do anything. To do something, we must override the action’s Invoke method, adding the code that should be executed. We will use the code that we’ve created on the first post, modifying it to use the Target control:

private void AnimateControl(FrameworkElement control, TimeSpan duration, AnimationKind kind)
{
    double xFinal = 0;
    double yFinal = 0;
    if (kind == AnimationKind.Left)
        xFinal = -control.ActualWidth;
    else if (kind == AnimationKind.Right)
        xFinal = control.ActualWidth;
    else if (kind == AnimationKind.Up)
        yFinal = -control.ActualHeight;
    else if (kind == AnimationKind.Down)
        yFinal = control.ActualHeight;
    var translate = new TranslateTransform(0, 0);
    control.RenderTransform = translate;
    if (kind == AnimationKind.Left || kind == AnimationKind.Right)
    {
        var da = new DoubleAnimation(0, xFinal, new Duration(duration));
        translate.BeginAnimation(TranslateTransform.XProperty, da);
    }
    else
    {
        var da = new DoubleAnimation(0, yFinal, new Duration(duration));
        translate.BeginAnimation(TranslateTransform.YProperty, da);
    }
}

Finally, we must only call the method AnimateControl from the Invoke method:

protected override void Invoke(object o)
{
    AnimateControl(Target, Duration, AnimationKind);
}

With that, our behavior is finished. We can add the project in Blend, drag the action to the button, set the Target object to the grid and execute the project. When we click the button, the grid makes an animated transition on the selected direction. We don’t need to do anything else, the action is ready to be executed.

Conclusion

It’s been a long journey till here. We saw four different ways to animate the transition, we started from code and ended using the same code. On the middle of the way, we saw many new concepts: move from fixed code to a more flexible, refactored code, use components for transitions, eliminate code behind using the MVVM pattern, use NuGet, implicit templates, using Visual States to create animations with no code and, finally, behaviors to create actions that can be used by designers, in a flexible way, with no code. I hope you have enjoyed it!

Animating transitions in WPF/Silverlight–Part III–Visual States

bsonnino — Wed, 08 Feb 2012 18:31:22 GMT

On the two last posts, I’ve showed how to animate a transition using code. The first post showed how to animate the transition using code behind, creating the animation using code. The second post showed how to use components to ease these transitions. Although the use of components is a good alternative to create the animations using code, it still has some disadvantages:

You must add a reference to the component assembly or include its code in the project
It can have bugs – there may be many users of the components, but they still may have bugs. If they are open source with code available, you can still debug it, but is not always easy to debug such a component.
It can be outdated. With new versions of WPF and Silverlight, an old component may not work in the new versions.

So, we will see a new option to animate the transitions, with no code. You may be asking : “How is that, no code?”. Yes, WPF 4 (or 3.5, using the WPF Toolkit) and Silverlight have a resource that don’t need C# or VB code to animate transitions: Visual States. With Visual States, you define the state of your control in many situations and change between them with no need of code. Everything is done in XAML.

For this project, we won’t use Visual Studio. The creation of Visual States is easier in Blend. Open Blend and create a new WPF project.

In this project, add a row in the main grid, at the bottom of the window with 40 pixels of height. On this row, add a button with the property Content set to Hide. On the top row of the grid, add another grid, with red background. On the project panel choose the States tab. It should be empty.

Click on the first button on the top toolbar in the tab to add a new group state. Change its name to GridStates. Click on the second button of the GridStates toolbar to add a new state and change its name to Visible. Add another state and change its name to Hidden.

You should note that the default transition time (shown in front of the Default Transition text) is 0s.

Change this time to 1. Also change the Easing Function to CubicInOut, clicking the second button.

Looking at the image above, you can see we are in recording mode, recording the Hidden state. When we select a state in the states panel, all changes that we make in the layout are recorded for this state. So, we can change the appearance of our controls just by switching states. The state Visible is our default state. On the Hidden state we will hide our grid. The transition is done when we change from one state to another.

Select the grid and change the property RenderTransform X to –625, the property Opacity to 0 and the property Visibility to Collapsed. That way, the grid will move to the left, while it’s made transparent. Our states are ready. We could change between states using code behind, with this code on the button click event:

private void button_Click(object sender, System.Windows.RoutedEventArgs e)
{
  VisualStateManager.GoToElementState(LayoutRoot, "Hidden", true);
}

But that way, we would be on the same situation of the previous post, with code behind. Besides that, I have said that we would not use code!

Blend has a very interesting resource to execute actions with no code: Behaviors. Behaviors are custom actions that act on the components, with no need of code to execute them (in fact, someone needs to write code to create a behavior, but once it’s created, you just need to drag it to a component to use it). Blend comes with many predefined behaviors. To use them you should go to the Assets panel and select the Behaviors option.

We will use the GoToStateAction behavior. We drag this behavior to a component, then set the event that will trigger it and what is the new state that must be set when the event is triggered. Select the GoToStateAction and drag it to the button. A GoToStateAction is added to the button on the object inspector.

On the property editor we will configure the action.

The trigger is already set: we want to activate the action when the button Click event is triggered. We must only set the state we want to select when the button is clicked. For that, we must set the StateName property to Hidden.

Our application is ready. When we execute it and click on the button, the transition occurs and moves the grid to outside. And all that with no lines of code!

We will make a small change to give more functionality to our application. Change the editor visualization to Split by clicking on the third button of view change.

With that, we can change the XAML code directly and change our button. We want it to be a ToggleButton. For that you must change the XAML component, changing its type from Button to ToggleButton:

<ToggleButton x:Name="button" Content="Hide" Grid.Row="1" HorizontalAlignment="Center" 
    VerticalAlignment="Center" Width="65" Height="25">
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="Click">
      <ei:GoToStateAction StateName="Hidden"/>
    </i:EventTrigger>
  </i:Interaction.Triggers>
</ToggleButton>

The ToggleButton may be checked or not. We will show the Hidden state when it’s checked and the Visible state when it’s unchecked.

We must change the event that activates the Hidden state. On the object inspector, select the GoToStateAction and change the property EventName to Checked. On the Assets tab, select another GoToStateAction and drag it to the button. Set the property EventName to Unchecked and the property StateName to Visible. Run the program.

Now we have an animation to hide the grid when the button is checked and another to show the grid when the button is unchecked. Easy, no?

Here we could see the amount of resources we have available to create states and make them active. Everything is done visually, with no need of code. We still haven’t finished our journey, we still have other ways to animate transitions, but that is a subject for another post. See you there!

Animating transitions in WPF/Silverlight–Part II–Using Components

bsonnino — Tue, 07 Feb 2012 11:37:30 GMT

In the last post we saw how to animate a transition using code. As I said, I don’t think that is the best solution, because we must use code behind, something not easy to maintain. We could refactor code, creating a new class for the animation and use it. That would bring a little more separation, but we would have to still use code behind.

In this second part, we will use a different approach: third party components. We can use several components, like Kevin Bag-O-Tricks (https://github.com/thinkpixellab/bot), FluidKit (http://fluidkit.com), Silverlight Toolkit (http://silverlight.codeplex.com – only for Silverlight), or Transitionals (http://transitionals.codeplex.com).

We will use here Transitionals, for WPF. If we want to do animations for Silverlight, we should choose another component. Its use is very simple: after downloading the component and adding a reference in the project to the Transitionals.dll assembly, we must add a TransitionElement component in the place where we want the animation, configure the animation and add a content to the component. When the content is changed, the transition is activated.

Let’s create our transition project. Create a new WPF project and add a reference to Transitionals.dll. Then, add a TransitionElement to the main grid:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>
    <transc:TransitionElement x:Name="TransitionBox">
        <transc:TransitionElement.Transition>
            <transt:TranslateTransition  StartPoint="1,0" EndPoint="0,0" Duration="0:0:1"/>
        </transc:TransitionElement.Transition>
    </transc:TransitionElement>
    <Button Width="65" Grid.Row="1" Content="Hide" Margin="5" Click="Button_Click" />
</Grid>

We must declare the namespaces for the TransitionElement and for the TranslateTransition in the main window:

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:transc="clr-namespace:Transitionals.Controls;assembly=Transitionals"
        xmlns:transt="clr-namespace:Transitionals.Transitions;assembly=Transitionals"
        Title="MainWindow" Height="350" Width="525">

The next step is to add content to the TransitionElement:

<transc:TransitionElement x:Name="TransitionBox">
    <transc:TransitionElement.Transition>
        <transt:TranslateTransition  StartPoint="1,0" EndPoint="0,0" Duration="0:0:1"/>
    </transc:TransitionElement.Transition>
    <Grid Background="Red" />
</transc:TransitionElement>

The button click event handler changes the content of the TransitionElement and activates the transition:

private void Button_Click(object sender, RoutedEventArgs e)
{
    TransitionBox.Content = new Grid() {Background = Brushes.Blue};
}

That way, the code is simpler, we just need to change the content of the element. Besides that, the Transitionals component has a lot of transition types, and we can set them in many ways. For example, the TranslateTransition has the properties StartPoint and EndPoint, saying where the transition starts and ends. To do it from left to right, StartPoint should be –1,0 and EndPoint, 0,0. From top to bottom, StartPoint should be 0,-1 and EndPoint, 0, 0. We can even do a diagonal transition using 1,1 and 0,0.

Eliminating Code Behind

One thing that can be improved here is the elimination of code behind, using the MVVM pattern. We will use the MVVM Light framework, that you can get at http://galasoft.ch or by installing it directly using NuGet, an add-in to Visual Studio to ease download and installation of libraries and tools in Visual Studio. If you still don’t have NuGet, go to http://nuget.org and download it.

Once you have installled NuGet, you can click with the right button in References in the Solution Explorer and select “Manage Nuget Packages”. Fill the search box with “mvvm” and install the MVVM Light package:

This installs MVVM Light, adds the required references and creates a folder named ViewModel, with two files, MainViewModel.cs and ViewModelLocator.cs. MainViewModel.cs is the ViewModel related to the main window and ViewModelLocator is a ViewModel locator.

In MainViewModel.cs you should add a property of type ViewModelBase, which will contain the ViewModel related to the View of the component content:

private ViewModelBase content;

public ViewModelBase Content
{
    get { return content; }
    set
    {
        conteudo = value;
        RaisePropertyChanged("Content");
    }
}

Next, we will create two ViewModels, related to our views. The two ViewModels are very similar and have only one property:

public class ViewModelA : ViewModelBase
{
    private string text;

    public string Text
    {
        get { return text; }
        set
        {
            text = value;
            RaisePropertyChanged("Text");
        }
    }
}

public class ViewModelB : ViewModelBase
{
    private string text;

    public string Text
    {
        get { return text; }
        set
        {
            text = value;
            RaisePropertyChanged("Text");
        }
    }
}

Then create in the Solution Explorer a folder named View and put there two UserControls, each one with a Grid and a TextBlock:

<UserControl x:Class="WpfApplication2.View.ViewA"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid Background="Red">
        <TextBlock Text="{Binding Text}" FontSize="36" />
    </Grid>
</UserControl>

To eliminate code behind, we must bind the property Content of the TransitionElement with the property Content of the ViewModel:

<transc:TransitionElement x:Name="TransitionBox" Content="{Binding Content}">
    <transc:TransitionElement.Transition>
        <transt:TranslateTransition  StartPoint="1,0" EndPoint="0,0" Duration="0:0:1"/>
    </transc:TransitionElement.Transition>
</transc:TransitionElement>

and eliminate the button click, replacing it with a Command:

<Button Width="65" Grid.Row="1" Content="Esconde" Margin="5" Command="{Binding HideCommand}" />

The HideCommand property is defined in MainViewModel:

private ICommand hideCommand;
public ICommand HideCommand
{
    get { return hideCommand ?? (hideCommand = new RelayCommand(ChangeContent)); }
}

private void ChangeContent()
{
    Content = content is ViewModelA ? 
        (ViewModelBase)new ViewModelB() {Text = "ViewModel B"} : 
        (ViewModelBase)new ViewModelA() {Text = " ViewModel A"};
}

Finally we must set the DataContext for the main View:

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:transc="clr-namespace:Transitionals.Controls;assembly=Transitionals"
        xmlns:transt="clr-namespace:Transitionals.Transitions;assembly=Transitionals" 
        Title="MainWindow" Height="350" Width="525"
        DataContext="{Binding Source={StaticResource Locator}, Path=Main}">

When we execute the program we have something similar to this:

The view isn’t shown, just the content’s class name. That is expected, as the property Content is of type ViewModelBase and its presentation is made by the method ToString(). We could have put the view as content, but this goes against the MVVM pattern: the ViewModel must not know about the View. A solution to show the View using the ViewModel as content is to use a resource available in WPF or in Silverlight 5: implicit Data Templates. In an implicit DataTemplate, we don’t set the Key property when declaring the Template, we only set its DataType. With that, WPF and Silverlight use this DataTemplate every time they must render some content of that type.

We declare the DataTemplates in the Windows’s resources section:

<Window.Resources>
    <DataTemplate DataType="{x:Type ViewModel:ViewModelA}" >
        <View:ViewA />
    </DataTemplate>
    <DataTemplate DataType="{x:Type ViewModel:ViewModelB}" >
        <View:ViewB />
    </DataTemplate>
</Window.Resources>

Now, when we execute the program, we have the transition between the two views, with no code behind.

Conclusion

When we use components to animate transitions, we have the possiblity to create very complex transitions in an easy way, we only have to change the content of the control.

We also saw how to remove code from the code behind, adding it to a ViewModel, making it easier to maintain and allowing better testability. As a bonus, we saw how to use implicit DataTemplates and how to relate a View to a ViewModel with no need of code. This resource is only available on WPF and Silverlight 5.

Although you can think it doesn’t worth the effort (we eliminated just one line of code, trading it with two ViewModels, two Views and a new MVVM component), my intent here was to show you other resources, like using MVVM instead of code behind and how to use new features, like the implicit DataTemplate. In a larger application, that requires more work, these changes are justified.

These are not the only ways to do control transitions. On the next articles, we will see other ways. See you then!

ReSharper–Ferramenta de produtividade para o Visual Studio

bsonnino — Sun, 05 Feb 2012 16:39:35 GMT

Um dos benefícios indiretos de ser um MVP é que muitos produtores de ferramentas ou componentes cedem cópias de seus produtos para os MVPs para uso pessoal, para que possam usar, avaliar e, eventualmente, recomendar.

Eu uso muitas dessas ferramentas no meu dia a dia, e gosto muito delas. Assim, nada mais justo que fazer um post sobre elas e como elas ajudam meu dia-a-dia.

Sem dúvida, a ferramenta que eu mais uso é o ReSharper (http://www.jetbrains.com/resharper/), um add-in para o Visual Studio para aumentar sua produtividade. Ao usar o Visual Studio, ela está sempre lá, ativa, me ajudando a escrever o código.

Análise de código

Ao abrir um projeto, o ReSharper analisa seu código e começa a dar sugestões para melhorá-lo. Abrindo um projeto console, já vemos o seguinte no editor:

Do lado direito, é adicionada uma barra com as indicações de ajuda para seu código. O quadrado amarelo mostra que há avisos para melhoria de código. Se houver erros de compilação, o quadrado fica vermelho e, se seu código estiver ok, o quadrado fica verde. Abaixo do quadrado, estão linhas com os pontos onde há problemas. Se você passar o mouse sobre estas barras, uma tooltip irá mostrar o problema.

Para corrigir o erro, é muito fácil. É só clicar na barra e o editor é posicionado no local do erro. Uma lâmpada vermelha indica o erro e podemos clicar nela para ver as ações disponíveis. Esta lista pode ser selecionada com Alt-Enter. Aliás, se eu tivesse a possibilidade de escolher um único atalho de teclado para lembrar, seria este. Com o ReSharper e o Alt-Enter o seu código irá melhorar bastante!

Selecionamos a ação desejada e o ReSharper corrige o código (no caso, eliminando as cláusulas using desnecessárias). Para o erro seguinte, podemos ver que o parâmetro args de Main está ém cinza. Isto quer dizer que ele não está sendo usado na função. Quando colocamos o mouse em args aparece uma pirâmide, mostrando que há um refactoring a ser feito.

Aqui ele irá remover o parâmetro não usado. Além desta mudança, ele irá verificar todos os lugares onde a função é chamada e mudar a chamada a ela. Isto é ótimo quando colocamos um parâmetro e verificamos que ele não é mais necessário e queremos retirá-lo. Se fizermos isso, o código irá quebrar em todos os lugares onde a funçao é chamada. Com este refactoring, as chamadas são alteradas automaticamente. Fazendo esta mudança, nosso código fica ok, como mostra a figura abaixo.

O ReSharper está constantemente analisando nosso código e verifica a consistência na nomenclatura de variáveis e métodos. Você pode dizer como gosta de nomear os campos, propriedades e métodos e ele irá verificar a consistência para você.

Por exemplo, eu gosto de nomear meus campos privados usando CamelCase, iniciados com minúscula (sem um sublinhado antes). Assim, se eu colocar um campo com nomenclatura diferente, o ReSharper irá me avisar e se prontificar para alterar. Nada que um Alt-Enter não resolva. E ele irá mudar todas as referências para essa variável.

Melhoria do código

Além da consistência de nomes, ele ainda verifica a qualidade do seu código. Sim, eu sei que seu código (como o meu) é impecável, mas será que dá para melhorar? Veja na figura abaixo, uma aplicação WPF onde implementei o manipulador do evento Click do botão em codigo, com button1.Click += <tab><tab>.

O ReSharper mostra dois avisos e um lembrete. O primeiro aviso é sobre MainWindow. Ele indica que o tipo pai (Window) já foi declarado em outro lugar desta classe parcial e é desnecessário. Devemos lembrar que quando criamos uma janela WPF estamos criando uma classe parcial, declarada em dois lugares: no XAML e no arquivo de code behind. O XAML já declara que MainWindow é derivado de Window e podemos tirar esta declaração redundante do code behind. O segundo aviso é devido ao fato que podemos eliminar a criação do delegate ao adicionar o manipulador. O lembrete é para indicar que temos uma exceção de “não implementado”, indicação clara que devemos colocar código ali. Dois Alt-Enter e nosso código fica assim:

O ReSharper analisa seu código, verificando possíveis erros e melhorias. Ao digitar este código

Vemos na barra lateral um aviso e uma possível melhoria. O aviso indica que ToString é redundante e que devemos especificar uma cultura para a conversão. O fato de ser redundante faz com que ele possa ser eliminado. Alt-Enter e lá se vai ele. A melhoria está no for, indicando que pode ser convertido para uma expressão LINQ. Ao teclar Alt-Enter mais uma vez ficamos com o código assim:

Outras melhorias de código muito comuns são otimização de if e de return: quando colocamos um código como

if (x == 3)
  y = 2;
else
  y = 5;

o ReSharper otimiza para:

y = x == 3 ? 2 : 5;

Ou então este código:

if (x == 3)
  return 2;
else
  return 5;

Aqui teríamos duas otimizações: eliminar o else

if (x == 3)
  return 2;
return 5;

ou então usar o operador ternário:

return x == 3 ? 2 : 5;

Refactoring

Mas isto não é tudo o que o ReSharper pode fazer por você. Seus recursos de refactoring e criação de código são fantásticos. Queremos extrair o código do manipulador de eventos para um novo método. Podemos teclar Ctrl-Shift-R (Refactor this) e o ReSharper irá mostrar os refactorings disponíveis.

Selecionamos o refactoring de extração de métodos e a seguinte tela é mostrada:

Podemos indicar os parâmetros, o nome da função e seu tipo de retorno. Ao clicar em Next, obtemos algo como

Criação de código

Podemos ainda inserir código a partir de templates. O ReSharper permite criar templates com código para novos arquivos ou snippets de texto.

Temos três tipos de templates:

Live templates – templates de snippets de código, inseridos como snippets normais do Visual Studio. Para acionar, teclamos o snippet e <tab> para inserir. Outra maneira de acionar estes templates é usando Ctrl-E-L. Na figura, criei o snippet propnp, que cria uma propriedade com backing field e chama o manipulador de PropertyChanged
Surround templates, que permitem envolver o código selecionado com um template, por exemplo, para envolver o código com try…catch. Eles são acionados com Ctrl-E-U.
File templates – que criam novos arquivos no nosso projeto, como classes, interfaces. Eles são acionados com Ctrl-Alt-Ins.

Vamos criar uma nova classe em nosso projeto. Teclamos Ctrl-Alt-Ins e criamos uma nova classe. Chamamos de NewClass. Teclamos Alt-Ins e inserimos o construtor para a classe. Nos parâmetros do construtor colocamos uma dependência:

Note que IDependency está em vermelho, pois não está definida. Teclamos Alt-Enter e as opções mostradas são as seguintes

Note que ele verificou que colocamos o nome do tipo iniciado com I, indicando uma interface e sugere a criação desta. Podemos então criar a interface a partir daqui. Após criar a interface, teclamos Alt-Enter novamente em IDependency e podemos declarar o campo para guardar a dependência:

A nossa interface foi criada no mesmo arquivo da classe. Podemos ir para sua declaração e teclar Alt-Enter. O ReSharper oferece para movê-la para um arquivo separado. É criado um arquivo IDependency.cs com a interface. Como vocês podem ver, é muito fácil criar e refatorar o código com o ReSharper. Ele facilita também a declaração de variáveis. Por exemplo, ao incluirmos o código

total = -1;

no construtor, vemos que total está em vermelho. Teclando Alt-Enter, temos as seguintes opções:

Podemos então criar um campo total no nosso código. Como vimos, temos diversas maneiras de mudar e melhorar nosso código.

Auxílio no XAML

Mas isso não é tudo. Podemos usar o ReSharper também no XAML, o que facilita bastante. Por exemplo, se criamos um Converter no código:

public class DebugConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}

Quando queremos usá-lo no XAML devemos seguir uma série de passos: namespace, declaração nos recursos, etc. Para isso, temos algumas facilidades.

Teclamos Alt-Enter em DebugConverter e selecionamos Create resource in type element <Window>. Ele cria a seção Resources e cria o recurso. Colocamos o nome DebugConverter. Não colocamos o namespace. Aparece uma tooltip indicando o namespace

Teclamos Alt-Enter e o namespace é declarado e colocado no elemento. Se não gostarmos do nome do namespace, podemos renomeá-lo com Ctrl-R-R. Pronto, a declaração do converter, o namespace, tudo está pronto, como necessário. Se tivermos um DataContext associado ao componente e ele não tiver uma propriedade chamada Valor, podemos usar o ReSharper para criar esta propriedade na classe do DataContext.

Navegação no código

O ReSharper possui atalhos para navegação no código, que facilitam muito. Por exemplo, Ctrl-T navega para um tipo. Abre-se uma tela como a seguinte

Digitamos parte do nome e ele mostra os símbolos definidos que casam com a pesquisa. Da mesma maneira, podemos usar Shift-Alt-T para ir para um símbolo ou Ctrl-Shift-T para ir a um arquivo. A pesquisa é feita em todos os arquivos da solução. A navegação entre os membros de uma classe pode ser feita com Alt-`. Você pode ir ao membro anterior ou posterior com Alt-Up ou Alt-Down. Se você quiser, pode até navegar em código .NET descompilado. O ReSharper tem um descompilador que descompila o código e permite navegar até ele.

Utilidades diversas

Mas isto não é tudo o que o ReSharper oferece. Você tem um unit test runner, onde pode rodar os seus testes unitários. Você pode estar pensando quo o Visual Studio já tem um test runner, mas o que o VS oferece é exclusivo para testes com MSTest. O runner do ReSharper funciona com outros frameworks de teste, como o NUnit, QUnit ou xUnit. Uma outra funcionalidade interessante é o Explore Stack Trace. Você tem o stack trace de uma exceção, obtido através de uma ferramenta de log qualquer. Basta copiar o stack trace para a área de transferência e, no Visual Studio, usar Ctrl-E-T. O stack trace é mostrado com links para o seu código, e você pode assim verificar onde ocorreu a exceção.

Conclusão

Esta é só parte da funcionalidade oferecida pelo ReSharper, há muito mais para explorar, mas isto eu deixo para vocês. A ferramenta é paga, mas você pode baixar uma versão de avaliação por 30 dias, em http://www.jetbrains.com/resharper/download/index.html.

Em conclusão, eu acho que esta é uma ferramenta indispensável para quem desenvolve com o Visual Studio, e só tenho um ponto contrário: ela é realmente viciante, e uma vez que você se acostuma a usar o Resharper, é muito difícil voltar a desenvolver sem ele

Behaviors em Blend

bsonnino — Sat, 28 Jan 2012 09:01:42 GMT

No post anterior mostramos os behaviors em Blend e apresentamos os dois tipos de behaviors: Actions e Behaviors.

Ali, mostramos como criar uma Action, que atua sobre um elemento Target, fazendo uma ação sobre ele. Neste post, iremos mostrar os Behaviors e como podemos criar um behavior para ser usado (e reutilizado) no Blend.

Um behavior atua sobre um elemento associado e executa uma determinada ação, que não precisa ser sobre outro elemento, pode ser inclusive sobre ele mesmo. Aqui iremos mostrar como criar um behavior para movimentar elementos de uma listbox arrastando e soltando-os na nova posição.

Antes de iniciar o desenvolvimento do behavior, devemos saber como fazer o Drag & Drop em WPF. Para que um componente possa suportar Drag & Drop, devemos configurar sua propriedade AllowDrop para True. Em seguida, devemos manipular dois eventos: DragOver, que é ativado quando algo está sendo arrastado sobre o elemento e Drop, quando algo é solto sobre o elemento.

No evento DragOver devemos dizer qual é o cursor que deve ser apresentado quando há algo sendo arrastado sobre o elemento. Usamos o segundo parâmetro do manipulador de eventos, do tipo DragEventArgs, configurando a propriedade Effects com um código semelhante a este:

void ListboxDragOver(object sender, DragEventArgs e)
{
  e.Effects = DragDropEffects.Move;
}

Este código faz que o cursor de movimentação seja mostrado. No evento Drop devemos concluir a ação.

Com esta pequena introdução, podemos criar nosso behavior. Desta vez, iremos iniciar nosso projeto no Blend. Crie um novo projeto WPF, do tipo WPF Application

Em seguida, vá para o menu Project e selecione Add New Item, escolhendo a opção Behavior. Dê o nome de DragListItemBehavior

O Blend cria um código semelhante ao seguinte:

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Interactivity;
//using Microsoft.Expression.Interactivity.Core;

namespace WpfApplication5
{
  public class DragListItemBehavior : Behavior<DependencyObject>
  {
    public DragListItemBehavior()
    {
      // Insert code required on object creation below this point.

      //
      // The line of code below sets up the relationship between the command and the function
      // to call. Uncomment the below line and add a reference to Microsoft.Expression.Interactions
      // if you choose to use the commented out version of MyFunction and MyCommand instead of
      // creating your own implementation.
      //
      // The documentation will provide you with an example of a simple command implementation
      // you can use instead of using ActionCommand and referencing the Interactions assembly.
      //
      //this.MyCommand = new ActionCommand(this.MyFunction);
    }

    protected override void OnAttached()
    {
      base.OnAttached();

      // Insert code that you would want run when the Behavior is attached to an object.
    }

    protected override void OnDetaching()
    {
      base.OnDetaching();

      // Insert code that you would want run when the Behavior is removed from an object.
    }

    /*
    public ICommand MyCommand
    {
      get;
      private set;
    }
     
    private void MyFunction()
    {
      // Insert code that defines what the behavior will do when invoked.
    }
    */
  }
}

Devemos sobrescrever dois métodos, OnAttached e OnDetaching. No método OnAttached iremos fazer o processo de inicialização do nosso behavior: conectar manipuladores, configurar propriedades, etc. No método OnDetaching fazemos a limpeza do processo.

Agora que já temos nosso projeto criado, podemos editar seu código no Visual Studio. No painel Projects, clique com o botão direito do mouse sobre a solução e selecione Edit in Visual Studio. O projeto é aberto no Visual Studio.

Abra o arquivo do behavior para editá-lo. Queremos que o behavior só atue sobre ListBoxes. Para isto iremos alterar seu tipo:

public class DragListItemBehavior : Behavior<ListBox>

Em seguida, devemos colocar, no método OnAttached, o código de inicialização, onde iremos configurar as propriedades e conectar os manipuladores:

protected override void OnAttached()
{
  base.OnAttached();

    AssociatedObject.AllowDrop = true;
    AssociatedObject.PreviewMouseLeftButtonDown += ListboxPreviewMouseLeftButtonDown;
    AssociatedObject.DragOver += ListboxDragOver;
    AssociatedObject.Drop += ListboxDrop;
}

Note que conectamos os eventos DragOver e Drop, mas também usamos o evento PreviewMouseLeftButtonDown. Isto é necessário por que iremos iniciar a ação de Drag & Drop quando o usuário clica num item da Listbox. O behavior tem uma propriedade AssociatedObject, que é o objeto associado ao behavior. Como definimos que esse é um Behavior<ListBox>, o AssociatedObject é uma Listbox.

No método OnDetaching iremos fazer a limpeza:

protected override void OnDetaching()
{
  base.OnDetaching();

    AssociatedObject.PreviewMouseLeftButtonDown -= ListboxPreviewMouseLeftButtonDown;
    AssociatedObject.DragOver -= ListboxDragOver;
    AssociatedObject.Drop -= ListboxDrop;
}

Podemos então criar o código para fazer o Drag & Drop nos manipuladores dos eventos. No evento PreviewMouseLeftButtonDown obtemos o item que foi clicado e iniciamos o processo de Drag & Drop:

private object dragItem;

private void ListboxPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    var parent = (ListBox)sender;
    dragItem = GetDataFromListBox(parent, e.GetPosition(parent));

    if (dragItem != null)
        DragDrop.DoDragDrop(parent, dragItem, DragDropEffects.Move);
}

O método GetDataFromListBox procura na árvore de elementos e retorna o item que foi clicado:

private object GetDataFromListBox(ListBox source, Point point)
{
    var element = source.InputHitTest(point) as UIElement;
    if (element == null) return null;
    object data = DependencyProperty.UnsetValue;
    while (data == DependencyProperty.UnsetValue)
    {
        data = source.ItemContainerGenerator.ItemFromContainer(element);
        if (data == DependencyProperty.UnsetValue)
            element = VisualTreeHelper.GetParent(element) as UIElement;
        if (element == source)
            return null;
    }
    return data != DependencyProperty.UnsetValue ? data : null;
}

No evento DragOver iremos configurar o cursor. Se o Drag & Drop é da própria Listbox, deixamos arrastar, senão configuramos o cursor para None:

private void ListboxDragOver(object sender, DragEventArgs e)
{
    e.Effects = e.Source == sender ? DragDropEffects.Move : DragDropEffects.None;
}

Finalmente, no evento Drop fazemos a movimentação do item arrastado:

private void ListboxDrop(object sender, DragEventArgs e)
{
    var parent = (ListBox)sender;
    var dropItem = GetDataFromListBox(parent, e.GetPosition(parent));
    var dragItemIndex = parent.Items.IndexOf(dragItem);
    var dropItemIndex = dropItem == null ? parent.Items.Count - 1 : parent.Items.IndexOf(dropItem);
    if (dragItemIndex != dropItemIndex)
    {
        parent.Items.RemoveAt(dragItemIndex);
        parent.Items.Insert(dropItemIndex, dragItem);
    }
}

Verificamos onde o item arrastado foi solto e, se for numa posição diferente da atual, movemos o item para uma nova posição. Nosso behavior está pronto. Compile o projeto e abra o Blend para recarregá-lo. Nosso behavior está lá e pode ser usado.

Coloque uma Listbox na janela e coloque alguns itens nela. Arraste um DragListItemBehavior para a Listbox. Execute o programa. Você pode ver que podemos arrastar os itens da Listbox para movê-los de lugar. Este behavior é reutilizável e pode ser usado em qualquer Listbox, mesmo por aqueles que não tem conhecimento de C#. Como você pode ver, um behavior pode modificar o comportamento de outros componentes, estendendo-os e trazendo novos comportamentos, sem que seja necessário criar um controle derivado.

Animando transições em WPF/Silverlight–Parte IV–Behaviors

bsonnino — Sat, 21 Jan 2012 15:39:56 GMT

No último post mostramos como animar transições usando o Blend e Visual States. Uma parte importante naquele mecanismo é o uso de behaviors. Com behaviors, podemos executar ações bastante complexas, apenas arrastando um behavior para um componente da janela. Isto, além de poderoso, traz outros benefícios:

É reutilizável. Podemos incluir o mesmo behavior em diversas situações
Permite que os designers possam incluir funcionalidade no design sem necessidade de código

Temos dois tipos de behaviors:

Actions – executam uma ação associado a um evento. Por exemplo, você pode criar uma Action que, associada a uma TextBox, emite um “click” a cada tecla pressionada, ou outra action que faz um controle crescer quando o mouse está sobre ele
Full behaviors – neste caso, há um comportamento mais complexo, não necessariamente associado a um único trigger. Um exemplo disso é o MouseDragElementBehavior, que permite movimentar um elemento, arrastando-o com o mouse

No Blend, encontramos os dois tipos de behaviors, com o final do nome indicando o tipo (ex. CallMethodAction ou FluidMoveBehavior).

Além dos pré-instalados, você pode encontrar outros behaviors, na galeria do Blend, em http://gallery.expression.microsoft.com (quando verifiquei, existiam 114 behaviors disponíveis lá).

Os behaviors estão associados a um objeto e podem ter propriedades adicionais, além do trigger que os ativa. Por exemplo, o GoToStateAction tem como propriedades adicionais o componente destino e o estado a ser ativado, além da propriedade booleana UseTransitions, para usar as transições para mudar de um estado a outro.

Além de configurar as propriedades da Action, você pode especificar condições para que ela possa ser ativada. Por exemplo, usando o projeto do post anterior, podemos usar uma checkbox para permitir a ativação da transição. Para isso, basta clicar no botão “+” de Condition List, clicar no botão de propriedades avançadas da condição, criar um Data Binding com a checkbox e fazer um binding com a propriedade IsChecked. Desta maneira, a animação só será ativada se a checkbox estiver checada.

Além das Actions padrão, podemos criar Actions personalizadas para fazer o que queremos. No post anterior, usamos as Actions padrão, mas precisamos criar os Visual States. Além disso, temos um outro inconveniente: se quisermos fazer as animações para cima ou para baixo, temos que criar novos Visual States. Assim, criaremos nossa Action para fazer o que queremos, sem a necessidade de configuração especial.

No Visual Studio, crie um novo projeto WPF. Vamos adicionar agora a nossa Action. O Visual Studio, por padrão, não tem o template para criar uma Action. Poderíamos fazer isso usando o Blend. Ao abrir o projeto no Blend e selecionar a aba Project, você pode dar um clique com o botão direito do mouse, selecionar Add New Item e adicionar uma Action ao projeto.

Outra maneira de fazer isso é usar os templates online do Visual Studio. No Solution Explorer do Visual Studio, clique com o botão direito do mouse no projeto e selecione Add New Item. Na tela, vá para Online Templates e tecle action na caixa de pesquisa. Selecione o template C# Action Template for WPF e dê o nome de TransitionControlAction.

O template adiciona uma referência a System.Windows.Interactivity e gera uma classe semelhante a este código:

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

namespace WpfApplication4
{
    //
    // If you want your Action to target elements other than its parent, extend your class
    // from TargetedTriggerAction instead of from TriggerAction
    //
    public class TransitionControlAction : TriggerAction<DependencyObject>
    {
        public TransitionControlAction()
        {
            // Insert code required on object creation below this point.
        }

        protected override void Invoke(object o)
        {
            // Insert code that defines what the Action will do when triggered/invoked.
        }
    }
}

Temos dois tipos de actions: TriggerAction e TargetedTriggerAction. TriggerAction é uma action que não se refere a outro controle. Por exemplo, se quisermos criar uma action que executa o Notepad quando acontece um evento, usaríamos uma TriggerAction. TargetedTriggerAction refere-se a um outro elemento, chamado de Target. Este elemento é uma propriedade da action e pode ser acessado no Blend.

Nós iremos criar uma TargetedTriggerAction. Portanto devemos mudar o código para derivar de TargetedTriggerAction, como mostra o comentário no início da classe. Esta action irá executar o mesmo código que criamos no primeiro post para fazer a animação. Devemos alterar também o tipo de objeto em que ela atua. Usaremos o FrameworkElement, pois este elemento tem as propriedades ActualWidth e ActualHeight.

public class TransitionControlAction : TargetedTriggerAction<FrameworkElement>

Inicialmente, iremos criar a enumeração para as posições e duas DependencyProperties com o tipo de animação desejada e a duração, de modo que ela possa ser selecionada no Blend.

public enum TipoAnimacao
{
    Direita,
    Esquerda,
    Cima,
    Baixo
}

[Category("Common Properties")]
public TipoAnimacao Tipo
{
    get { return (TipoAnimacao)GetValue(TipoProperty); }
    set { SetValue(TipoProperty, value); }
}

public static readonly DependencyProperty TipoProperty =
    DependencyProperty.Register("Tipo", typeof(TipoAnimacao), typeof(TransitionControlAction));


[Category("Common Properties")]
public TimeSpan Duracao
{
    get { return (TimeSpan)GetValue(DuracaoProperty); }
    set { SetValue(DuracaoProperty, value); }
}

public static readonly DependencyProperty DuracaoProperty =
    DependencyProperty.Register("Duracao", typeof(TimeSpan), typeof(TransitionControlAction), 
    new UIPropertyMetadata(TimeSpan.FromMilliseconds(500)));

Note que colocamos o atributo Category nas propriedades Tipo e Duração para que elas apareçam junto com o grupo Common Properties. Ao compilarmos o projeto e abri-lo no Blend, vemos que nossa action aparece na aba Assets.

Ao arrastarmos uma TransitionControlAction para um botão, as propriedades aparecem no editor de propriedades:

Mas nossa action ainda não faz nada. Para fazer algo, devemos sobrescrever o método Invoke da action, colocando ali o código que deve ser executado. Usaremos o código que escrevemos na primeira postagem, modificando um pouco para usar o controle Target:

private void AnimaControle(FrameworkElement controle, TimeSpan duração, TipoAnimacao tipo)
{
    double xFinal = 0;
    double yFinal = 0;
    if (tipo == TipoAnimacao.Esquerda)
        xFinal = -controle.ActualWidth;
    else if (tipo == TipoAnimacao.Direita)
        xFinal = controle.ActualWidth;
    else if (tipo == TipoAnimacao.Cima)
        yFinal = -controle.ActualHeight;
    else if (tipo == TipoAnimacao.Baixo)
        yFinal = controle.ActualHeight;
    // cria a transformação e atribui ao controle
    var translate = new TranslateTransform(0, 0);
    controle.RenderTransform = translate;
    // cria a animação e anima-a
    if (tipo == TipoAnimacao.Esquerda || tipo == TipoAnimacao.Direita)
    {
        var da = new DoubleAnimation(0, xFinal, new Duration(duração));
        translate.BeginAnimation(TranslateTransform.XProperty, da);
    }
    else
    {
        var da = new DoubleAnimation(0, yFinal, new Duration(duração));
        translate.BeginAnimation(TranslateTransform.YProperty, da);
    }
}

Finalmente, basta chamar o método AnimaControle a partir do método Invoke:

protected override void Invoke(object o)
{
    AnimaControle(Target, Duracao, Tipo);
}

Com isto, nosso behavior está completo. Podemos abrir o projeto no Blend, arrastar a action para o botão, configurar o objeto Target apontando para a grid e executar o projeto. Ao clicar o botão, a grid faz uma transição animada para a direção selecionada. Note que não precisamos fazer nada. Basta arrastar a action para o botão, configurar o elemento Target e as propriedades. A action está pronta para ser executada.

Conclusão

Foi um longo trajeto até aqui. Vimos quatro maneiras diferentes de animar a transição, começamos com código e terminamos usando o mesmo código. No meio do caminho vimos diversos conceitos: partir de um código fixo para um código mais refatorado e flexível, usar componentes para transição, eliminar o code behind usando MVVM, usando o Nuget, Templates Implícitos, usar Visual States para criar animações sem usar código e, finalmente, behaviors, para criar ações que podem ser usadas por designers, de maneira flexível e sem usar código. Espero que tenham gostado!

Animando transições em WPF/Silverlight–Parte III–Visual States

bsonnino — Tue, 17 Jan 2012 10:05:37 GMT

Nos dois últimos posts, mostrei como animar uma transição usando código. O primeiro post mostrou como animar a transição usando code behind, criando uma animação em código. O segundo post mostrou o uso de componentes para facilitar estas transições. Embora o uso de componentes seja uma boa alternativa a criar as animações em código, ainda tem algumas desvantagens:

É necessário incluir uma referência à dll do componente ou incluir o código do componente no projeto.
Está sujeito a bugs – embora muitas pessoas usem estes componentes nada impede que eles tenham bugs. O fato de serem open source e terem seu código disponível pode minimizar isto, mas nem sempre é fácil debugar este código.
Pode ficar defasado. Com novas versões do Silverlight e WPF, um componente que não é mantido há muito tempo pode não funcionar nas novas versões

Assim, vamos ver aqui uma nova opção para animar as transições, que não usam código. “Como assim, não usam código?”, você deve estar se perguntando. Sim, o WPF 4 (ou o 3.5, com o WPF Toolkit) e o Silverlight introduziram um novo recurso, que dispensa o uso de código em C# ou VB para animar as transições: os Visual States. Com Visual States, você define qual é o estado de seu controle em diversas situações e transiciona entre eles sem usar código. Tudo é feito com o XAML.

Para este projeto, não usaremos o VisualStudio. A criação de Visual States é muito mais fácil usando o Blend.

Abra o Blend e crie um novo projeto WPF.

Neste projeto, inclua uma linha na Grid principal, na parte de baixo da janela, com 40 pixels de altura e, na segunda linha, coloque um botão com a propriedade Content configurada para o texto Esconde. Na primeira linha da grid, coloque outra grid, com fundo vermelho.

No painel do projeto, escolha a aba States. Ela deve estar vazia.

Clique no primeiro botão da barra superior da aba para adicionar um novo grupo de estados. Mude o nome do grupo para EstadosGrid. Clique no segundo botão deste grupo para adicionar um novo estado. Mude seu nome para Aparente. Adicione um novo estado e mude o nome dele para Escondido.

Note que o tempo padrão de transição (mostrado na frente do texto Default Transition) é de 0s

Mude este tempo para 1. Mude também o Easing Function para CubicInOut, clicando no segundo botão

Olhando a figura acima, você pode notar que estamos em modo de gravação, “gravando” o estado Escondido. Quando selecionamos um estado, todas as alterações que fazemos no layout são atribuídos a este estado. Assim, podemos mudar a aparência de nossos controles apenas mudando de um estado para outro. O estado Aparente é o nosso estado padrão. No estado Escondido iremos esconder a grid. A transição é feita automaticamente quando mudarmos de um estado para outro.

Selecione a grid e mude a propriedade RenderTransform X para –625, a propriedade Opacity para 0 e a propriedade Visibility para Collapsed. Desta maneira, a grid irá para a esquerda, ao mesmo tempo que fica cada vez mais transparente. Nossos estados estão prontos. Poderíamos mudar de estado usando o code behind, colocando o seguinte código no event Click do botão:

private void button_Click(object sender, System.Windows.RoutedEventArgs e)
{
  VisualStateManager.GoToElementState(LayoutRoot, "Escondido", true);
}

Mas assim estaríamos na mesma situação do post anterior, onde temos code behind. Além disso, eu prometi que não iríamos colocar código. E promessa é dívida!

O Blend tem um recurso muito interessante para executar ações sem a necessidade de código: Behaviors. Behaviors são ações personalizadas, usadas diretamente nos componentes, sem que seja preciso escrever código para executá-las (na realidade, você precisa escrever código para escrever um behavior mas, uma vez criado, basta arrastá-lo para um componente para ser usado). O Blend venm com diversos behaviors pré definidos. Para usá-los, basta ir na janela do projeto, na aba Assets e selecionar a opção Behaviors.

Usaremos o behavior GoToStateAction. Atribuímos este behavior a um componente, dizemos qual é o evento que o ativa e qual é o novo estado que se deve ativar quando o evento foi acionado. Selecione o GoToStateAction e arraste-o para o botão. Note que um GoToStateAction é adicionado ao botão, no inspetor de objetos.

No editor de propriedades, iremos configurar a ação.

O Trigger já está configurado: queremos ativar a action quando o evento Click do botão foi acionado. Falta apenas configurar o estado que queremos selecionar quando o botão for clicado. Para isto, basta configurar a propriedade StateName para Escondido.

Nossa aplicação está pronta. Ao executá-la e clicar no botão, ocorre a transição animada, que movimenta a grid para fora. E tudo isso sem uma única linha de código!

Vamos fazer agora uma pequena mudança para dar um pouco mais de funcionalidade à nossa aplicação. Mude a visualização do editor para Split, clicando no terceiro botão de mudança de visualização.

Com isso, podemos alterar o código XAML diretamente e alterar o nosso botão. Queremos que ele não seja um botão normal, e sim um ToggleButton. Para isso, altere o componente no XAML, mudando o seu tipo de Button para ToggleButton:

<ToggleButton x:Name="button" Content="Esconde" Grid.Row="1" HorizontalAlignment="Center" 
    VerticalAlignment="Center" Width="65" Height="25">
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="Click">
      <ei:GoToStateAction StateName="Escondido"/>
    </i:EventTrigger>
  </i:Interaction.Triggers>
</ToggleButton>

O ToggleButton pode estar checado ou não. Faremos que quando ele está checado, mostre o estado Escondido e, quando não está checado, mostre o estado Aparente.

Para isso, devemos mudar o evento que ativa o estado Escondido. No inspetor de objetos, selecione o GoToStateAction e mude a propriedade EventName para Checked. Na paleta do projeto, selecione o GoToStateAction e arraste um segundo GoToStateAction para o botão. Configure a propriedade EventName para Unchecked e a propriedade StateName para Aparente. Execute o programa.

Agora temos uma animação para esconder a grid quando o botão é checado e outra para mostrar a grid, quando o botão não está checado. Fácil, não?

Aqui pudemos ver a quantidade de recursos que temos à disposição para criar estados e ativá-los, tudo feito visualmente, sem precisar escrever código. Ainda não terminamos nossa jornada, ainda temos maneiras de animar transições, mas isto é assunto para um outro post. Até lá!

Animando transições em WPF/Silverlight–Parte II–Usando Componentes

bsonnino — Sat, 14 Jan 2012 21:57:50 GMT

No post anterior vimos como animar uma transição usando código. Como falei, não acho aquela a melhor solução, pois obriga a usar code behind, o que não é de fácil manutenção. Poderíámos refatorar o código, criando uma classe para a animação e usá-la. Isto traria um pouco mais de separação, mas ainda teríamos de usar code behind.

Nesta segunda parte, usaremos um enfoque diferente: o uso de componentes prontos. Podemos usar diversos componentes, como o Kevin Bag-O-Tricks (https://github.com/thinkpixellab/bot), FluidKit (http://fluidkit.com), Silverlight Toolkit (http://silverlight.codeplex.com – só para Silverlight), o Transitionals (http://transitionals.codeplex.com).

Usaremos aqui o Transitionals, para WPF. Se quisermos fazer animações em Silverlight, devemos escolher outro dos componentes acima.

Seu uso é muito simples: após baixar o componente e adicionar uma referência ao projeto para a dll Transitionals.dll, devemos adicionar um componente TransitionElement no local onde queremos a animação, configurar a animação e colocar um conteúdo para o componente. Ao mudar o conteúdo, ocorre a transição selecionada.

Vamos então fazer o nosso projeto de animação. Crie um novo projeto WPF e adicione uma referência a Transitionals.dll. Em seguida, coloque um TransitionElement na grid principal:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>
    <transc:TransitionElement x:Name="TransitionBox">
        <transc:TransitionElement.Transition>
            <transt:TranslateTransition  StartPoint="1,0" EndPoint="0,0" Duration="0:0:1"/>
        </transc:TransitionElement.Transition>
       
    </transc:TransitionElement>
    <Button Width="65" Grid.Row="1" Content="Esconde" Margin="5" Click="Button_Click" />
</Grid>

Devemos definir os namespaces para o TransitionElement e para a TranslateTransition na definição da janela:

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:transc="clr-namespace:Transitionals.Controls;assembly=Transitionals"
        xmlns:transt="clr-namespace:Transitionals.Transitions;assembly=Transitionals"
        Title="MainWindow" Height="350" Width="525">

Em seguida, é só colocar um conteúdo no TransitionElement:

<transc:TransitionElement x:Name="TransitionBox">
    <transc:TransitionElement.Transition>
        <transt:TranslateTransition  StartPoint="1,0" EndPoint="0,0" Duration="0:0:1"/>
    </transc:TransitionElement.Transition>
    <Grid Background="Red" />
</transc:TransitionElement>

O código do botão muda o conteúdo do TrasitionElement e, com isso ativa a transição:

private void Button_Click(object sender, RoutedEventArgs e)
{
    TransitionBox.Content = new Grid() {Background = Brushes.Blue};
}

Desta maneira, o código fica muito mais fácil, só precisamos mudar o conteúdo do elemento. Além disso, o componente Transitionals tem muitos tipos de transições, e podemos configurá-las de diversas maneiras. Por exemplo, o TranslateTrasition tem as propriedades StartPoint e EndPoint, dizendo onde começa e onde termina a transição. Para fazer da esquerda para direita, StartPoint deve ser –1,0 e EndPoint, 0,0. De cima para baixo, StartPoint deve ser 0,-1 e EndPoint, 0,0. Podemos inclusive fazer uma transição diagonal usando os pontos 1,1 e 0,0.

Eliminando o Code Behind

Uma das coisas que podem ser melhoradas aqui é a eliminação do code behind, usando o padrão de projeto MVVM. Para isso, usaremos o framework MVVM Light, que pode ser obtido gratuitamente em http://galasoft.ch, ou ainda instalado diretamente no projeto usando o Nuget, uma extensão para o Visual Studio que facilita o download e instalação de bibliotecas e ferramentas no Visual Studio. Se você ainda não baixou o Nuget, vá imediatamente para http://nuget.org e baixe-o. Vale a pena!

Uma vez instalado o Nuget, clique com o botão direito em References, no Solution Explorer e selecione “Manage Nuget Packages”. Tecle “mvvm” na caixa de pesquisa e instale o pacote MVVM Light:

Isto instala o MVVM Light em nosso projeto, adiciona as referências necessárias e cria uma pasta ViewModel, com dois arquivos, MainViewModel.cs e ViewModelLocator.cs. MainViewModel.cs é o ViewModel referente à janela princiapl e ViewModelLocator é um localizador de ViewModel, referente à View.

Em MainViewModel.cs, colocamos uma propriedade, do tipo ViewModelBase, que conterá os ViewModel referente à View do conteúdo atual:

private ViewModelBase conteudo;

public ViewModelBase Conteudo
{
    get { return conteudo; }
    set
    {
        conteudo = value;
        RaisePropertyChanged("Conteudo");
    }
}

Criaremos em seguida dois ViewModels, que serão referentes à nossas Views. Os dois ViewModels são muito semelhantes e têm apenas uma propriedade:

public class ViewModelA : ViewModelBase
{
    private string texto;

    public string Texto
    {
        get { return texto; }
        set
        {
            texto = value;
            RaisePropertyChanged("Texto");
        }
    }
}

public class ViewModelB : ViewModelBase
{
    private string texto;

    public string Texto
    {
        get { return texto; }
        set
        {
            texto = value;
            RaisePropertyChanged("Texto");
        }
    }
}

Em seguida, crie no Solution Explorer um diretório chamado View e coloque lá dois UserControls, com apenas uma Grid com um TextBlock:

<UserControl x:Class="WpfApplication2.View.ViewA"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid Background="Red">
        <TextBlock Text="{Binding Texto}" FontSize="36" />
    </Grid>
</UserControl>

Para eliminar o code behind, precisamos fazer um data binding da propriedade Content do TransitionElement com a propriedade conteúdo do ViewModel:

<transc:TransitionElement x:Name="TransitionBox" Content="{Binding Conteudo}">
    <transc:TransitionElement.Transition>
        <transt:TranslateTransition  StartPoint="1,0" EndPoint="0,0" Duration="0:0:1"/>
    </transc:TransitionElement.Transition>
</transc:TransitionElement>

e eliminar o clique do botão, substituindo-o por um Command:

<Button Width="65" Grid.Row="1" Content="Esconde" Margin="5" Command="{Binding EscondeCommand}" />

O command é definido no MainViewModel:

private ICommand escondeCommand;
public ICommand EscondeCommand
{
    get { return escondeCommand ?? (escondeCommand = new RelayCommand(MudaConteudo)); }
}

private void MudaConteudo()
{
    Conteudo = conteudo is ViewModelA ? 
        (ViewModelBase)new ViewModelB() { Texto = "ViewModel B"} : 
        (ViewModelBase)new ViewModelA() {Texto = " ViewModel A"};
}

Finalmente, devemos definir o DataContext para a View principal:

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:transc="clr-namespace:Transitionals.Controls;assembly=Transitionals"
        xmlns:transt="clr-namespace:Transitionals.Transitions;assembly=Transitionals" 
        Title="MainWindow" Height="350" Width="525"
        DataContext="{Binding Source={StaticResource Locator}, Path=Main}">

Ao executar o programa, temos algo como mostrado na figura abaixo:

A view não é mostrada, apenas o nome da classe do conteúdo. Isso era de se esperar, pois a propriedade Conteúdo é do tipo ViewModelBase e sua representação é o método ToString(). Poderíamos ter colocado a View como sendo o conteúdo, mas isto vai contra o padrão MVVM: o ViewModel não deve conhecer a View. Uma solução para mostrar a View a partir do ViewModel é usar um recurso disponível no WPF ou no Silverlight 5: Data Templates implícitos. Em um Data Template implicito, não explicitamos a Key, apenas dizemos qual é o DataType e, com isso o WPF/Silverlight renderezam este DataTemplate toda vez que um conteúdo for do tipo referente a ele.

Definimos então os DataTemplates na seção Resources da janela:

<Window.Resources>
    <DataTemplate DataType="{x:Type ViewModel:ViewModelA}" >
        <View:ViewA />
    </DataTemplate>
    <DataTemplate DataType="{x:Type ViewModel:ViewModelB}" >
        <View:ViewB />
    </DataTemplate>
</Window.Resources>

Agora, ao executar, temos a transição entre as duas views, sem o uso de code behind.

Conclusões

Usando componentes de animação de transições, temos a possibilidade de fazer transições muito sofisticadas, de maneira muito simples bastando mudar o conteúdo do componente.

Em seguida, vimos como tirar o código do code behind, colocando-o em um ViewModel, o que facilita na manutenção e permite maior testabilidade do código. Como bonus, vimos como usar implicit templates para ligar uma view a um viewmodel sem usar código. Este recurso está disponível apenas no WPF e no Silverlight 5. Embora você possa achar que não vale a pena (eliminamos apenas uma linha de código e incluímos dois viemodels, duas views, um novo componente MVVM, entre outros), minha intenção aqui foi mostrar como usar outros recursos, como a introdução do MVVM ao invés do code behind e como usar novos recursos, como o DataTemplate implícito. Numa aplicação maior, que requer maiores cuidados, estas mudanças se justificam plenamente.

Mas estas não são as únicas maneiras de se fazer transições de controles. Nos próximos artigos, veremos quais são as outras maneiras. Até lá!

Animando transições em WPF e Silverlight–Parte I–Code Behind

bsonnino — Wed, 11 Jan 2012 09:15:00 GMT

Quando eu vi uma pergunta de um usuário nos forums do MSDN sobre animação de um user control para dar o efeito de saída ao clicar um botão, eu pensei que esta seria uma excelente oportunidade de criar uma série de posts aqui no blog, mostrando diversas maneiras de fazê-lo.

Apesar de colocar as alternativas aqui, algumas podem não ser tão boas: este post onde eu ponho animação no code behind, apesar de ser fácil de implementar, tem algumas desvantagens:

O código da animação é posto no code behind, uma técnica que eu não gosto. Eu nao acho que o padrão MVVM deva ter zero code behind, mas eu não gosto de por código lá, a menos que seja indispensável e estritamente relacionado com a view.
Não é design-friendly – se o designer quer mudar a animação, o código deve ser alterado.
Não é portável – se você quer criar a mesma animação em outros lugares, o código deve ser copiado ou refatorado para ser acessado de outros lugares.
Não é fácil de manipular – tudo é feito em código. Quaisquer mudanças, como a duração da animação deve ser alterado em código.

Temos o seguinte problema: temos um controle na janela e queremos escondê-lo quando o botão é clicado, usando uma animação, como vemos abaixo:

Para fazer isso, devemos criar uma animação para o controle, do tipo RenderTransform e animá-la. Podemos fazer tudo em código desta maneira: no clique do botão, criamos a transformação, adicionamos ao controle e animamos ela:

private void Button_Click(object sender, RoutedEventArgs e)
{ 
  // create the transformation and add it to the control
  var translate = new TranslateTransform(0, 0);     
  gridLogin.RenderTransform = translate;     
  // create the animation and start it    
  var da = new DoubleAnimation(0, -ActualWidth, new Duration(TimeSpan.FromMilliseconds(1000)));
  translate.BeginAnimation(TranslateTransform.XProperty, da);
}

Este código tem muitos inconvenientes:

Ele só pode ser aplicado ao nosso controle. Para adicioná-lo a outro controle, devemos copiar o código.
A duração da animação é 1 segundo – a duração é fixa.
Somente anima da direita para a esquerda.

Nesta primeira fase, refatoraremos o código para deixá-lo mais genérico:

public enum AnimationType
{
    Right,
    Left,
    Up,
    Down
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    AnimateControl(gridLogin, TimeSpan.FromMilliseconds(1000), AnimationType.Left);
}

private void AnimateControl(UIElement control, TimeSpan duration, AnimationType type)
{
    double xEnd = 0;
    double yEnd = 0;
    if (type == AnimationType.Left)
        xEnd = -ActualWidth;
    else if (tipo == AnimationType.Right)
        xEnd = ActualWidth;
    else if (tipo == AnimationType.Up)
        yEnd = -ActualHeight;
    else if (tipo == AnimationType.Down)
        yEnd = ActualHeight;
    // create the transformation and add it to the control
    var translate = new TranslateTransform(0, 0);
    control.RenderTransform = translate;
    // create the animation and start it
    if (tipo == AnimationType.Left || tipo == AnimationType.Right)
    {
        var da = new DoubleAnimation(0, xEnd, new Duration(duration));
        translate.BeginAnimation(TranslateTransform.XProperty, da);
    }
    else
    {
        var da = new DoubleAnimation(0, yEnd, new Duration(duration));
        translate.BeginAnimation(TranslateTransform.YProperty, da);
    }
}

Apesar do código ser maior, ele é mais genérico e permite ser reutilizado. Podemos usar qualquer controle, configurar a deuração e a direção da animação. Ainda não é o idela, mas é melhor que o código anterior, não reutilizável. Nos próximos posts veremos outras maneiras de fazer isso. Até lá!

Animating transitions in WPF/Silverlight–Part I–Code Behind

bsonnino — Wed, 11 Jan 2012 08:00:00 GMT

When I saw a question from an user in the MSDN forums about animating an user control to give the exit effect while clicking a button, I thought this would be an excelent opportunity to create a series of posts here in the blog, showing many ways to do it.

Although I will put the alternatives here, some can be not so good: this post, putting animation on the code behind, although easy to implement, has these disadvantages:

The animation code is put on the code behind, a technique I don’t like. I don’t think that the MVVM pattern should have zero code behind, but I don’t like to put code behind, unless is indispensable and strictly related to the view.
It’s not design friendly – if the designer wants to change the animation, the code should be changed.
It’s not portable – if you want to create the same animation on other places, the code must be copied or refactored to be accessed from other places.
It’s not easy to manipulate – everything is on the code. Any changes, like the duration of the animation must be changed in code.

We have the following problem: we have a control in the window and we want to hide it when the button is clicked with an animation, like we see below:

To do that, we should create a transformation for the control, of type RenderTransform and animate it. We can do everything in code this way: at the button click, we create the transform, add it to the control and animate it:

private void Button_Click(object sender, RoutedEventArgs e)
{ 
  // create the transformation and add it to the control
  var translate = new TranslateTransform(0, 0);     
  gridLogin.RenderTransform = translate;     
  // create the animation and start it    
  var da = new DoubleAnimation(0, -ActualWidth, new Duration(TimeSpan.FromMilliseconds(1000)));
  translate.BeginAnimation(TranslateTransform.XProperty, da);
}

This code has many shortcomings:

It can only be applied to our control. To add it to another control, we must copy the code.
The animation duration is 1 second – the duration is fixed.
It only animates from right to left.

In this first phase, we can refactor the code and leave it more generic:

public enum AnimationType
{
    Right,
    Left,
    Up,
    Down
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    AnimateControl(gridLogin, TimeSpan.FromMilliseconds(1000), AnimationType.Left);
}

private void AnimateControl(UIElement control, TimeSpan duration, AnimationType type)
{
    double xEnd = 0;
    double yEnd = 0;
    if (type == AnimationType.Left)
        xEnd = -ActualWidth;
    else if (tipo == AnimationType.Right)
        xEnd = ActualWidth;
    else if (tipo == AnimationType.Up)
        yEnd = -ActualHeight;
    else if (tipo == AnimationType.Down)
        yEnd = ActualHeight;
    // create the transformation and add it to the control
    var translate = new TranslateTransform(0, 0);
    control.RenderTransform = translate;
    // create the animation and start it
    if (tipo == AnimationType.Left || tipo == AnimationType.Right)
    {
        var da = new DoubleAnimation(0, xEnd, new Duration(duration));
        translate.BeginAnimation(TranslateTransform.XProperty, da);
    }
    else
    {
        var da = new DoubleAnimation(0, yEnd, new Duration(duration));
        translate.BeginAnimation(TranslateTransform.YProperty, da);
    }
}

Although the code is larger, it is more generic and allows to be reutilized. We can use any control, set the duration and the animation direction. It still isn’t ideal, but it’s better than last code, non reutilizable. On the next posts, we will see other ways to do it. See you then!

Silverlight 5 Beta Preview

bsonnino — Thu, 14 Apr 2011 18:34:00 GMT

O Silverlight 5 beta preview foi lançado no Mix 2011 (http://live.visitmix.com), com uma série de recursos novos:

XAML Debugging (você pode setar um breakpoint no XAML e examinar o binding)

Data Templates implícitos, onde você pode usar um mesmo data template para um determinado tipo, sem explicitar o seu uso

Suporte para duplo-clique (precisa falar mais?)

Gráficos 3D e 2D acelerados pela GPU

Efeitos de som de baixa latência e suporte a WAV

Suporte a múltiplos displays

Se você quer saber mais, veja os vídeos em http://www.silverlight.net/getstarted/silverlight-5-beta/

Se você quer começar a trabalhar com ele, baixe as seguintes ferramentas (coloboração do @fernandomartin - Caverna):

Visual Studio 2010 SP1 http://go.microsoft.com/fwlink/?LinkID=186892 ou Visual Web Developer Express 2010 SP1 http://www.microsoft.com/express/Web/
Silverlight 5 Tools for Visual Studio http://bit.ly/gjdloV
Expression Blend Preview for Silverlight 5 http://bit.ly/dW49Nk (opcional)
Silverlight 5 SDK CHM http://bit.ly/dPIzRv (opcional, se você quiser o arquivo de ajuda)

Agora, mãos à obra!

New WPF Videos (English)

bsonnino — Fri, 25 Mar 2011 20:21:00 GMT

My new WPF videos were just published in MSDN Brazil (in portuguese). Although they are geared towards the Windows Application Developer certification (70-511), it's worth taking a look at them, because they contain may useful tips. The videos are:

Asynchronous Processes - With the popularization of multicore processors, it's very important that our applications use this resource. This video will show how to desing the program in order to create processes that run in parallel, thus using the multiple processors in the machine

Using Drag & Drop in WPF - One of the resources for data interchange is Drag & Drop. This video will show how to develop an application that allows dragging and dropping

Globalization and Localization in .net - When your program ust run in many countries, you must design it in a way it can change its interface easily to adapt to the new country. This video will show how to design a localized application

Integration between WPF and Windows Forms - The introduction of WPF doesn't mean that Winforms is obsolete. This video shows how you can embed WPF controls in WinForms programs and vice-versa and how these two platforms interact between them

Security in .net applications - When you develop an application, you should know what the OS allows in terms of security, or the program will fail when it tries to execute an operation not allowed. This video shows the Windows security resources and how you must design your programs to work fine with security restrictions

Application Settings in .net - This video shows the application settings in .net and how to use them

Novos vídeos de WPF

bsonnino — Fri, 25 Mar 2011 20:20:27 GMT

Meus vídeos de WPF acabaram de ser publicados no MSDN Brasil. Embora eles sejam voltados para a certificação Windows Application Developer (70-511), vale a pena dar uma olhada neles, pois eles contém muitas dicas interessantes. São eles:

Processos assíncronos - Com a popularização de processadores multi-core, torna-se imperativo que nossos programas façam uso deste recurso, tanto para melhorar sua performance como para evitar o bloqueio da interface enquanto o programa executa um outro processamento. Este vídeo irá mostrar técnicas para executar o processamento em paralelo, mostrando como sincronizar o processamento com alterações na interface
Usando Drag & Drop em WPF - Um dos recursos do Windows que permitem o intercâmbio de informações é o "Arrastar e Soltar" (Drag & Drop). Você arrasta uma informação de um lugar para outro e, "magicamente", a informação aparece no destino. Este vídeo irá mostrar como implementar o Drag & Drop em uma mesma aplicação e entre o Explorer e uma aplicação
Globalização e Localização em .net - Quando você quer que sua aplicação seja executada em muitos países, você deve projetá-lo de maneira a permitir que a interface mude conforme o país onde está send executado: idioma, configurações regionais, etc. Este vídeo irá mostrar dicas de como projetar uma interface globalizada e como localizar sua aplicação, para que o idioma da interface mude conforme selecionado.
Integração entre WPF e Windows Forms - A introdução do WPF não significa a completa obsolescência dos programas WinForms. Você pode continuar a desenvolver os programas Winforms e incluir partes em WPF, bem como criar programas WPF que hospedam partes em WinForms. Este vídeo irá mostrar como fazer esta integração entre as duas plataformas e como elas podem interagir entre si.
Segurança em aplicações .net - Quando você desenvolve uma aplicação, deve ter em mente o que o sistema operacional permite e o que ele não permite, em relação à segurança, senão ele falhará quando executar uma operação não permitida. Este vídeo irá mostrar os recursos de segurança do Windows e como você deve projetar seus programas para que eles comportem-se como projetados em tempo de execução
Application Settings em .net - Quando você desenvolve uma aplicação, deve ter em mente o que o sistema operacional permite e o que ele não permite, em relação à segurança, senão ele falhará quando executar uma operação não permitida. Este vídeo irá mostrar os recursos de segurança do Windows e como você deve projetar seus programas para que eles comportem-se como projetados em tempo de execução

Pro Business Applications with Silverlight 4 (English)

bsonnino — Wed, 08 Dec 2010 12:56:59 GMT

I see that there is a lot of interest in developing business applications with Silverlight, although there are not many books about that subject. The book Pro Business Applications with Silverlight 4, from Chris Anderson, Apress Publishing, brings Silverlight learning under a different concept the business applications development.

Usually, the Silverlight books bring the platform concepts under a difficulty sequence, but with no concerns with the real world application development. This book concern is the creation of applications: in chapter 5, just after showing an introduction to Silverlight and to XAML and showing an introduction to the navigation framework, it shows RIA Services for data access with Entity Framework.

In the sequence, the author talks about list generation and data entry forms, following with application security, an unusual topic in books on this subject. The following chapters are on Data Binding, custom control creation and MVVM pattern, a subject almost mandatory in the WPF/Silverlight development.

The last chapters are about reporting and printing, Out of Browser applications and interaction with the operating system and application deployment. The book is well written and touches many subjects not touched by other books, although they are very important for the business application development.

The book is focused in using RIA Services, and it lets aside other technologies for data access, like WCF, REST or JSon and there is barely nothing about network access, needed when you want to upload a file to the server or download a file. In the printing chapter, the author showed very little about the printing technology in Silverlight 4, spending a lot of pages to show how you can display PDF files generated on the server. Although this is a viable way to show reports, I don’t think it’s the best one, because we need to resort to tricks like use an IFrame over the Silverlight control, with several problems: it doesn’t work Out of Browser (we need to use the WebBrowser in this case), you cannot show a ChildWindow while it’s visible (the IFrame stays on top of the Silverlight control and hides the ChildWindow) and needs Acrobat Reader installed in the user’s machine. It would be better that, in this chapter, the author had written a mini report generator to aid report generation using Silverlight technology.

On the other side, the book shows Silverlight under a different aspect, geared towards business applications, what, in my opinion is the real Silverlight vocation. The RIA Services explanation is very complete, and encompasses from the basics through validation, metadata and the use of a presentation layer, that eases the use with the MVVM pattern and the use of authentication.

In summary, the book is very good for those who want to develop a business application with Silverlight using RIA Services, it contains a lot of information and, as and added bonus, its text contains links to tools, controls or articles that will aid the Silverlight development.

Pro Business Applications with Silverlight 4

bsonnino — Wed, 08 Dec 2010 09:43:00 GMT

Vejo que há um grande interesse no desenvolvimento de aplicações comerciais com Silverlight, embora não haja muita bibliografia sobre o assunto. O livro Pro Business Applications with Silverlight 4, do Chris Anderson, editora Apress, traz o aprendizado de Silverlight sob um conceito diferente, o desenvolvimento de aplicações de negócios.

Normalmente os livros de Silverlight trazem os conceitos da plataforma em uma sequência lógica de dificuldade, mas sem uma preocupação com o desenvolvimento de aplicações para o mundo real. Já este livro preocupa-se com a criação de aplicações: logo no capítulo 5, após mostrar uma introdução ao Silverlight e ao XAML e mostrar o framework de navegação, ele mostra o WCF RIA Services para acesso a dados com o Entity Framework.

Em seguida, o autor fala de geração de listas e de formulários de entrada de dados, seguindo com o tópico de segurança da aplicação, tópico raramente visto nos livros do assunto. Os capítulos seguintes são sobre Data Binding e a criação de controles personalizados, seguido pelo pattern MVVM, um tema que agora é quase obrigatório no desenvolvimento WPF/Silverlight.

Os últimos capítulos são sobre impressão e relatórios, Out of Browser e interação com o sistema operacional e distribuição de aplicações. O livro é bem escrito e aborda diversos tópicos que normalmente não são tocados pelos livros tradicionais, embora sejam fundamentais para o desenvolvimento de aplicações de negócios.

O livro é muito centrado em RIA Services, deixando de lado outras tecnologias de acesso a dados, como serviços WCF, REST, Json, além de tocar pouco no acesso a rede, indispensável quando se quer fazer upload de arquivos ou baixar dados do servidor. No capítulo de impressão, o autor mostrou muito pouco a tecnologia de impressão do Silverlight 4, gastando muitas páginas para mostrar como podemos mostrar arquivos PDF gerados no servidor. Embora esta seja uma forma razoável de mostrar relatórios, não considero a melhor, pois devemos recorrer a truques como usar um IFrame sobre o controle Silverlight, com diversos problemas: não funciona OutOfBrowser (devemos usar o WebBrowser, neste caso), não permite mostrar uma ChildWindow quando ativo (ele fica sobre o controle Silverlight e esconde a ChildWindow) e necessita que o Acrobat Reader esteja instalado. Seria muito melhor que, neste capítulo, o autor tivesse escrito um mini gerador de relatórios para auxiliar a criação de relatórios com a tecnologia do Silverlight.

Por outro lado, o livro aborda o Silverlight com um enfoque diferente, voltado para aplicações de negócios, o que, a meu ver, é a verdadeira vocação do Silverlight. A explicação do RIA Services é bem completa, compreendendo desde o básico, até a validação, metadata e o uso de uma camada de apresentação, o que facilita o uso com o pattern MVVM, até o uso de autenticação.

Em resumo, o livro é muito bom para quem quer desenvolver uma aplicação de negócios com Silverlight usando o RIA Services, ele contém muita informação e, como bônus, seu texto contém links para ferramentas, controles ou artigos que irão auxiliar o desenvolvimento de programas com Silverlight.

Desenvolvendo com Multi Touch para Windows 7

bsonnino — Sat, 28 Nov 2009 07:37:00 GMT

Se você quer saber como desenvolver para multitouch em Windows 7, não pode perder o webcast que irei fazer no dia 3/12/2009, às 12:00.

Lá irei mostrar como desenvolver aplicações que usam o recurso do multitouch, usando .net Framework 3.5 e também mostrando como programar multitouch com o WPF4, que vem por aí. Ah, e se você não tem um hardware multitouch, não tem problema: eu irei mostrar como contornar isso, usando dois mouses.

A inscrição é gratuita e pode ser feita em https://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032433821&EventCategory=4&culture=pt-BR&CountryCode=BR

Até lá

Bruno

Você sabe o que é um Mashup?

bsonnino — Tue, 23 Jun 2009 12:47:00 GMT

Se você não sabe o que é um mashup, vale a pena saber: mashups são "misturas" de dados que permitem combinar dados de diversas fontes, criando uma visualização unica, resumida. Por exemplo, você pode pegar dados de clientes, com suas localizações e colocar "pins" no mapa, com indicações dos clientes. Ou você pode pegar dados estatísticos e plotar gráficos ou criar mapas que mostram a atividade no mundo.

Enfim, as oportunidades para criar um mashup são praticamente infinitas. A Microsoft criou um gerador de mashops, o PopFly creator, onde você pode criar seus blocos, que extraem os dados de diversas fontes e geram saídas diversas. Estes blocos são criados usando Javascript, isto é, não necessitam de nenhuma linguagem especial. Se você acha que pode ser complicado criar um bloco, não precisa se aventurar a tanto, no início: você pode usar os blocos criados por outras pessoas, que estão disponíveis e que, inclusive, podem ser alterados por você.

Para mostrar como é fácil criar um mashup, vamos fazer um. Para isso, vamos usar os blocos criados pelo meu filho Roberto e pelo Bruno Reis, que estão concorrendo na etapa mundial da ImagineCup 2009, na categoria Mashup, o KnoWorld. Os blocos criados por eles tem diversas funcionalidades. Por exemplo, o GapMinder extrai dados de diversos indicadores (você pode ter a lista completa em http://tinyurl.com/gap-ind) e disponibiliza-os em formato ano/valor ou país/valor, de maneira que você pode obter uma série temporal (quando quer ver a evolução de um indicador num país) ou espacial (quando quer ver a distribuição de um indicador no mundo, num determinado ano).

A partir daí, você pode plotar estes dados usando os blocos TimePlot (que mostra os dados, ligando-os a uma série de eventos), ou Google Charts (que plota um gráfico de barras, de linha, ou mesmo um mapa mundi colorido).

No meu caso, eu queria verificar a correlação entre o consumo de óleo no Brasil, com a emissão de CO2, para ver se há correspondência entre os dois indicadores. Fui até http://www.popfly.com/mashupcreator, dei meu login do passport e comecei a criar o mashup. Inicialmente, coloquei dois blocos GapMinder (basta teclar na caixa de pesquisa, que ele aparece). Configurei o primeiro GapMinder para a operação "getByCountry" e o indicador "Oil consumption". Selecionei o país Brasil. O segundo GapMinder foi configurado para o indicador "Total CO2 emissions (thousand tonnes)". Em seguida, coloquei dois blocos Filter. Estes blocos filtram os dados para as condições selecionadas. Como o GapMinder gera muitas informações, iremos filtrar os dados a partir de 1965, mostrando os dados de 5 em 5 anos. Em seguida, liguei a saída dos GapMinders aos Filters. Configurei os blocos Filter como

List: Source - GapMinder - Value: [entire TimeSeries object]
Condition: Custom - Value: x.year >= 1965 && x.year % 5 == 0

Finalmente, adicionei um bloco Google Charts e liguei a saída dos dois Filters à entrada do Google Charts. Configurei o Google Charts como

Operations: plotLineChart
X Values: Filter - Value: year
Y Values: Filter - Value: value
XValues2: Custom - Value: (deixar um espaço em branco para plotar o gráfico)
Y Values2: Filter(2) - Value: value
ShowImage: true

Pronto. Isto é tudo o que precisamos. O Mashup ficou como a figura abaixo

Aí é só executar o mashup e ver o resultado, como em:

Como vocês podem ver, o consumo de óleo corre em paralelo com a emissão de CO2. Se vocês quiserem ver o mashup, ele está em http://www.popfly.com/users/BSonnino/Oil%20consumption%20vs%20CO2%20Emission%20in%20Brazil

Como vocês podem ver, criar um mashup é muito fácil, já imaginaram as possibilidades?

Campeão ImagineCup Brasil 2009

bsonnino — Sat, 25 Apr 2009 13:09:00 GMT

Meus filhos Roberto e Eduardo, juntamente com o Bruno Reis foram campeões na etapa Brasil de Software Design da ImagineCup, com o projeto HealthTag, um projeto que permite o apoio a projetos de saúde para pacientes em locais remotos, usando uma série de recursos:

Microsoft Tag
Microsoft HealthVault
Microsoft Azure
WPF
Mobile
Multitouch

A próxima etapa é no Egito, onde eles tentarão conquistar o título mundial de SD, um título inédito para o Brasil. O press release oficial está em http://s2.com.br/scripts/release.asp?clienteId=361&releaseId=22559