在 XAML 中设置凹陷效果答案

【问题标题】：Setting sunken effect in XAML在 XAML 中设置凹陷效果
【发布时间】：2017-12-19 08:59:36
【问题描述】：

我正在尝试在 XAML 中设置我的属性，以便在按下按钮时产生凹陷效果。我通过增加边框厚度来做到这一点。它给了我一个错误，说无法分配特定值。我在这里犯了什么错误？

注意：我尝试使用 DropShadowEffect 并且它可以工作，但边框效果不起作用。

这是我的 XAML：

<Style x:Key="DefaultLanguageButtonStyle" TargetType="{x:Type Button}" > <!--BasedOn="{StaticResource DefaultButton}" >-->
                <Setter Property="OverridesDefaultStyle" Value="True" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border x:Name="border" BorderThickness="0" BorderBrush="DarkGray" Background="{TemplateBinding Background}">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                                </Trigger>

                                <Trigger Property="IsPressed" Value="True">
                                    <Setter Property="Effect">
                                        <Setter.Value>
                                            <Border BorderThickness="5,5,0,0" >

                                            </Border>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="FontSize" Value="30" />
                <Setter Property="FontWeight" Value="Bold" />
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="HorizontalContentAlignment" Value="Center" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="Foreground" Value="{DynamicResource RedBrush}" />
                <Setter Property="Background" Value="{DynamicResource WhiteBrush}" />
                <Setter Property="BorderThickness" Value="{DynamicResource NoBorder}" />
                <Setter Property="Height" Value="100" />
            </Style>

【问题讨论】：

你的意思是设置边框的Effect属性吗？也许您的 setter 上缺少 TargetName 属性。
是的，我需要设置效果
This question looks very similar to your problem
它适用于阴影效果，但不适用于边框厚度
我的代码中有类似的情况，<Border x:Name="border".. 在ControlTemplate 中，然后在Triggers 我有一个Setter 使用TargetName 属性修改BorderThickness .它工作正常，我不明白为什么它不适合你。你能发布完整的错误吗？

标签： c# wpf xaml

【解决方案1】：

为什么不让你的触发器像这样：

<Trigger Property="IsPressed" Value="True">
    <Setter TargetName="border" Property="BorderThickness" Value="5,5,0,0"/>
    <Setter TargetName="border" Property="Effect" Value="..."/>
</Trigger>

编辑：

这是一个简短的示例，我在 ControlTemplate 到 Triggers 中更改了 Border 的 BorderThickness：

<Button>
    <Button.Template>
        <ControlTemplate TargetType="Button">

            <Border x:Name="Border" BorderBrush="HotPink" BorderThickness="0" Background="Aqua" Width="50" Height="50"/>

            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Border" Property="BorderThickness" Value="20"/>
                </Trigger>
            </ControlTemplate.Triggers>

        </ControlTemplate>
    </Button.Template>
</Button>

请原谅这些图片上的劣质比例。

【讨论】：

效果怎么样？
如果您尝试设置 Effect 并更改 BorderThickness，请将它们放在单独的设置器中。
你的代码甚至不允许我设置 BorderThickness
我认为这不起作用，因为我无法将 BorderThickness 分配给属性
你在吗？

【解决方案2】：

在资源中定义样式：

<Style TargetType="Button" x:Key="SunkenEffectStyle">
 <Style.Triggers>
   <EventTrigger RoutedEvent="Button.Click">
     <EventTrigger.Actions>
       <BeginStoryboard>
         <Storyboard>
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" BeginTime="00:00:00">
               <SplineThicknessKeyFrame KeyTime="00:00:01" Value="10,10,0,0" />
               <SplineThicknessKeyFrame KeyTime="00:00:03" Value="0,0,0,0" />
            </ThicknessAnimationUsingKeyFrames>
         </Storyboard>
       </BeginStoryboard>
   </EventTrigger.Actions>
  </EventTrigger>
 </Style.Triggers>
</Style>

用法：

<Button Content="Click Me" Style="{StaticResource SunkenEffectStyle}" 
        Height="50" Width="100"/>

这个答案也涵盖了你之前的问题here

我在这里使用了关键帧，因为您希望动画在开始时更快而在返回时更慢

【讨论】：