Button blur effect disabled

Question

I am trying to make a button that will be disabled when disconnected.

So far, here's what I have:

<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> 

After the button is disabled, I want to set the blur radius to 3.

How to do it?

Answer 1

You can set Effect to Trigger

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

So it will look like

 <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

You can do this using the WPF Transitionz animation library ( Github , NuGet )

The following code:

 <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(); } } } 

The results of this conclusion, which allow blurring the background and the opacity of the foreground animation when the property changes: