c# - 在禁用按钮上创建模糊效果

Question

我正在尝试制作一个按钮，该按钮在禁用时会变得模糊。

到目前为止，这就是我所拥有的：

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

按钮被禁用后，我想将模糊半径设置为 3。

我怎么做？

Answer 1

您可以Effect在Trigger

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

所以它看起来像这样

<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

您可以使用 WPF Transitionz 动画库（Github、NuGet）来做到这一点

以下代码：

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

结果在此输出中，它允许在属性更改时模糊背景和前景的不透明动画：