Usando efeito Blur para destacar um diálogo

Pra quem ainda não sabe, meu ‘”negócio” é WPF. Acompanho os blog de outras pessoas envolvidas no assunto e nesta semana peguei um posto legal do Walt Ritscher. Neste post ele mostra como usar o efeito de blur para chamar a atenção do usuário, coisa simples, mas que apenas um designer teria pensado nisso, eu mesmo conheço o efeito mas nunca pensei em usar ele assim. Imagine a situação onde no seu sistema seja preciso exibir uma caixa informativa, algo como um MessageBox.ShowMessage. Normalmente temos a seguinte tela:

image

Aqui nesse sistema fiz uma consulta e quando essa consulta não retorna nada, exibo a mensagem. Vamos ver a mesma notificação usando o efeito Blur:

image

Perceberam a diferença entre as imagens? Nesta segunda o fundo ficou meio “embassado”, assim o diálogo de informação ganha destaque.

Eu fiz um ajuste na solução mostrada pelo Walt Ritscher, aqui no Post dele é mostrado como se fazer mas sem levar em conta o uso do MVVM. Então como eu uso MVVM fiz um ajuste e transformei a solução em um behaviour, assim você poderá usar de forma muito simples.

Listagem 1. Código do Behaviour

public class CustomEffects
{
    public static bool GetBlurToFocusAttention(DependencyObject obj)
    {
        return (bool)obj.GetValue(BlurToFocusAttentionProperty);
    }

    public static void SetBlurToFocusAttention(DependencyObject obj, bool value)
    {
        obj.SetValue(BlurToFocusAttentionProperty, value);
    }

    // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc…
    public static readonly DependencyProperty BlurToFocusAttentionProperty =
        DependencyProperty.RegisterAttached("BlurToFocusAttention", typeof(bool), typeof(CustomEffects),
                                            new FrameworkPropertyMetadata(false,
                                                                          new PropertyChangedCallback(
                                                                              OnBlurToFocusAttentionChanged)));

    private static void OnBlurToFocusAttentionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if ((d == null)||(!(d is Window)))
        {
            return;
        }

        var target = (Window)d;
        if ((bool)e.NewValue)
        {
            var blur = new BlurEffect();
            blur.Radius = 5;
            target.Effect = blur;
        }
        else
        {
            target.Effect = null;
        }
    }
}

Listagem 2. Usando o Behaviour

<Window x:Class="MeusPacientes.Sistema.Principal"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Persistencia="clr-namespace:MeusPacientes.Persistencia;assembly=MeusPacientes.Persistencia"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    xmlns:xcdg="clr-namespace:Xceed.Wpf.DataGrid;assembly=Xceed.Wpf.DataGrid"
    xmlns:julmar="clr-namespace:JulMar.Windows.Behaviors;assembly=JulMar.Wpf.Helpers"
    xmlns:Views="clr-namespace:Xceed.Wpf.DataGrid.Views;assembly=Xceed.Wpf.DataGrid"
   xmlns:bhv="clr-namespace:MeusPacientes.Sistema.Behaviours"
    xmlns:util="clr-namespace:MeusPacientes.Sistema.Util"
    Background="{StaticResource FundoJanela}"
   bhv:CustomEffects.BlurToFocusAttention="{Binding EstaExibindoDialogo}"  
    Icon="./Imagens/programa.ico"    
    Loaded="Window_Loaded"
    Title="Principal" WindowStyle="None" ResizeMode="NoResize">

<!—conteudo da sua janela –>

</Window>

Vejam as linhas em vermelho. Na primeira adiciono no XAML uma referência para meu namespace que armazenam meus behaviours, então na segunda aplico ele passando como valor uma propriedade bool do meu ViewModel. Assim, antes de exibir o MessageBox apenas seto EstaExibindoDialogo para True e automaticamente o blur é aplicado, quando o MessageBox se fecha, seto EstaExibindoDialogo para False  e tudo volta como era 🙂

Até mais

Esse post foi publicado em WPF. Bookmark o link permanente.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s