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?
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With