用於ContentPresenter內部元素的設置器

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都具有陰影效果。 但是我只想得到圖像。

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>