Crear efecto de desenfoque en el botón deshabilitado

Question

Estoy tratando de hacer un botón, que se borronearía cuando se desactivó.

Hasta el momento, esto es lo que tienen:

<Style x:Key="BluredButton" TargetType="{x:Type Button}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" CornerRadius="10" BorderThickness="1"> 
        <Border.Effect> 
         <BlurEffect Radius="0"/> 
        </Border.Effect> 
        <Border.BorderBrush> 
         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
          <GradientStop Color="#FF7D8F93" Offset="0"/> 
          <GradientStop Color="#FF5797A7" Offset="0.997"/> 
         </LinearGradientBrush> 
        </Border.BorderBrush> 
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Border> 
       <ControlTemplate.Triggers> 
        <EventTrigger RoutedEvent="FrameworkElement.Loaded"/> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Foreground" Value="#ADADAD"/> 
         <!--How do I set BlurEffect.Radius here?--> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Después de que el botón se desactiva, quiero establecer el radio de desenfoque a 3.

¿Cómo se hace eso?

Answer 1

Puede configurar el Effect en el Trigger

<Setter TargetName="Chrome" Property="Effect"> 
    <Setter.Value> 
     <BlurEffect Radius="3"/> 
    </Setter.Value> 
</Setter> 

Por lo que se vería así

<ControlTemplate TargetType="{x:Type Button}"> 
    <Border x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" CornerRadius="10" BorderThickness="1"> 
     <Border.BorderBrush> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="#FF7D8F93" Offset="0"/> 
       <GradientStop Color="#FF5797A7" Offset="0.997"/> 
      </LinearGradientBrush> 
     </Border.BorderBrush> 
     <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
    </Border> 
    <ControlTemplate.Triggers> 
     <EventTrigger RoutedEvent="FrameworkElement.Loaded"/> 
     <Trigger Property="IsEnabled" Value="false"> 
      <Setter Property="Foreground" Value="#ADADAD"/> 
      <Setter TargetName="Chrome" Property="Effect"> 
       <Setter.Value> 
        <BlurEffect Radius="3"/> 
       </Setter.Value> 
      </Setter> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

Answer 2

Usted puede hacer esto con la biblioteca de animación de WPF Transitionz (Github, NuGet)

El siguiente código:

<Window x:Class="WpfApplication15.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:tz="http://schemas.abtsoftware.co.uk/transitionz" 
     xmlns:wpfApplication15="clr-namespace:WpfApplication15" 
     mc:Ignorable="d" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <BooleanToVisibilityConverter x:Key="b2vc"></BooleanToVisibilityConverter> 
     <wpfApplication15:BluParamsWhenTrueConverter x:Key="bpc" From="0" To="10" Duration="200"></wpfApplication15:BluParamsWhenTrueConverter> 
    </Window.Resources> 
    <Grid> 
     <CheckBox x:Name="CheckBox" Content="Is Visible?" IsChecked="False"></CheckBox> 
     <TextBlock Foreground="#AAA" Margin="10" TextWrapping="Wrap" Text="Lorem ipsum .. TODO insert a lot of text here " 
        tz:Transitionz.Blur="{Binding ElementName=CheckBox, Path=IsChecked, Converter={StaticResource bpc}}"/> 
     <TextBlock Text="Hello World!" FontSize="44" HorizontalAlignment="Center" VerticalAlignment="Center" 
      Visibility="Collapsed" 
      tz:Transitionz.Opacity="{tz:OpacityParams From=0, To=1, Duration=200, TransitionOn=Visibility}" 
      tz:Transitionz.Translate="{tz:TranslateParams From='10,0', To='0,0', Duration=200, TransitionOn=Visibility}" 
      tz:Transitionz.Visibility="{Binding ElementName=CheckBox, Path=IsChecked, Converter={StaticResource b2vc}}"/> 
    </Grid> 
</Window> 

using System; 
using System.Globalization; 
using System.Windows.Data; 
using SciChart.Wpf.UI.Transitionz; 

namespace WpfApplication15 
{ 
    public class BluParamsWhenTrueConverter : IValueConverter 
    { 
     public double Duration { get; set; } 
     public double From { get; set; } 
     public double To { get; set; } 

     public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
     { 
      return ((bool)value) ? 
       new BlurParams() { Duration = Duration, From = From, To = To, TransitionOn = TransitionOn.Once} : 
       new BlurParams() { Duration = 200, From = To, To = From, TransitionOn = TransitionOn.Once}; 
     } 

     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
     { 
      throw new NotImplementedException(); 
     } 
    } 
} 

Los resultados en esta salida, que permite la difuminación de fondo y la opacidad de animación de los conocimientos adquiridos sobre el cambio de propiedad: