Question

我有ControlTemplate这样：

<ControlTemplate TargetType="Button">
    <Grid Background="Transparent">
        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center"
                          VerticalAlignment="Center" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="20" Color="Black" ShadowDepth="0"
                                      Opacity="0.5" />
                </Setter.Value>
            </Setter>
            <Setter Property="FontWeight" Value="SemiBold"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="20" Color="Black" ShadowDepth="0" Opacity="1" />
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="Gray" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

当IsMouseOver属性更改为True时，我希望contentPresenter内的所有图像都具有DropShadowEffect，而不是按钮本身。
我尝试将setter属性更改为Image.Effect，但它无法正常工作我该怎么做？

当鼠标结束时，这就是我的按钮的样子：
这就是它看起来的样子：
正如您所看到的，Image和TextBlock都会产生阴影效果。但是我只想让Image得到它。

Answer 1

您可以采用Sinatr推荐的样式并将其放在按钮控件模板的ControlTemplate.Resources部分。这是一个适合我的例子。它还处理IsPressed事件，在此期间我假设你想要仅调整图像的阴影效果：

<ControlTemplate x:Key="BtnTemplate" TargetType="{x:Type Button}">
    <Grid Background="Transparent">
        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>

    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="FontWeight" Value="SemiBold"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="Gray" />
        </Trigger>
    </ControlTemplate.Triggers>

    <ControlTemplate.Resources>
        <Style TargetType="{x:Type Image}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button}}" Value="True">
                    <DataTrigger.Setters>
                        <Setter Property="Effect">
                            <Setter.Value>
                                <DropShadowEffect BlurRadius="20" Color="Black" ShadowDepth="0" Opacity="0.5"/>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger.Setters>
                </DataTrigger>

                <DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource AncestorType=Button}}" Value="True">
                    <DataTrigger.Setters>
                        <Setter Property="Effect">
                            <Setter.Value>
                                <DropShadowEffect BlurRadius="20" Color="Black" ShadowDepth="0" Opacity="1" />
                            </Setter.Value>
                        </Setter>
                    </DataTrigger.Setters>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ControlTemplate.Resources>
</ControlTemplate>

Answer 2

您不需要定义Button模板，而是创建Image样式

<Style x:Key="style"
       TargetType="Image">
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button}}"
                     Value="True">
            <DataTrigger.Setters>
                <Setter Property="Effect">
                    <Setter.Value>
                        <DropShadowEffect BlurRadius="20"
                                          Color="Black"
                                          ShadowDepth="0"
                                          Opacity="0.5" />
                    </Setter.Value>
                </Setter>
            </DataTrigger.Setters>
        </DataTrigger>
   </Style.Triggers>

并将其应用于按钮内显示的每个图像

<Button>
...
    <Image Style="{StaticResource style}" ... />
...
</Button>

ContentPresenter中元素的设置器

2 个答案: