Create blur effect on button disabled

Question

I'm trying to make a button, which would be blured when disabled.

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 gets disabled, I want to set the blur radius to 3.

How do I do that?

Answer 1

You can set the Effect in the Trigger

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

So it would look like this

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