WPF按鈕（圖像和標籤）陰影

Question

我想創建一個包含圖像和文本的按鈕，並獲得很好的陰影效果。特別是，我希望圖像和標籤具有淺灰色陰影，但是當將鼠標移動到按鈕上時，我想要一種藍色陰影。走開後將它重新設爲淺灰色。我需要一些幫助，因爲我無法弄清楚如何實現它（我是WPF的新手）。

的按鈕看起來像......

<Button> 
    <Button.Content> 
     <StackPanel Orientation="Vertical"> 
     <Image Source="Images/preferences-system.png" /> 
     <Label HorizontalAlignment="Center">Settings</Label> 
     </StackPanel> 
    </Button.Content> 
</Button> 

畫布去...

<Canvas DockPanel.Dock="Left" Background="#FF349EBC"> 
    <Canvas.Resources> 

     <DropShadowEffect x:Key="dropMouseOverShadow" Color="#FFD9EDF3" Opacity="80" Direction="270" /> 
     <DropShadowEffect x:Key="dropLightShadow" Color="LightGrey" Opacity="10" Direction="270" BlurRadius="20" /> 

     <Style TargetType="{x:Type Button}"> 
     <Style.Setters> 
      <Setter Property="BorderThickness" Value="0" /> 
      <Setter Property="Foreground" Value="{x:Null}" /> 
      <Setter Property="BorderBrush" Value="{x:Null}" /> 
      <Setter Property="Background" Value="{x:Null}" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Button}"> 
        <Border Background="{TemplateBinding Background}" CornerRadius="2"> 
         <ContentPresenter /> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter Property="Effect" Value="{StaticResource dropMouseOverShadow}" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style.Setters> 
     </Style> 

     <Style TargetType="{x:Type Image}"> 
     <Style.Setters> 
      <Setter Property="Effect" Value="{StaticResource dropLightShadow}" /> 
     </Style.Setters> 
     <Style.Triggers> 
      <Trigger Property="IsMouseOver" Value="True"> 
       <Setter Property="Effect" Value="{x:Null}" /> 
      </Trigger> 
     </Style.Triggers>     
    </Style> 

    <Style TargetType="{x:Type Label}"> 
     <Style.Setters> 
      <Setter Property="FontSize" Value="18" /> 
      <Setter Property="FontWeight" Value="Normal" /> 
      <Setter Property="FontFamily" Value="Gill Sans MT" /> 
      <Setter Property="Effect" Value="{StaticResource dropLightShadow}" /> 
     </Style.Setters> 
     <Style.Triggers> 
      <Trigger Property="IsMouseOver" Value="True"> 
       <Setter Property="Effect" Value="{x:Null}" /> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

</Canvas.Resources> 

我得到的是圖像和標籤上開始一個淺灰色的陰影。將鼠標移動到按鈕上方時，灰色和淺藍色會混合在一起。當在圖像上進一步移動時，它只能獲得淺藍色。標籤也是一樣。

當我將鼠標放在按鈕上而不是圖像和標籤本身時，如何才能將切換切換爲淡藍色？任何人的想法或完全的其他方法？

Answer 1

將LightGray Effect應用於ContentPresenter。然後在IsMouseOver觸發器上，將ContentPresenter的Effect屬性設置爲藍色Effect。

注：通過設置ContentPresenter的x:Name屬性，然後使用TargetName經由Setter按名稱訪問ContentPresenter實現此目的。

注意：刪除子元素樣式中的各種其他Effect設置。將應用於ContentPresenter會導致子元素繼承Effect。

<Canvas DockPanel.Dock="Left" Background="#FF349EBC"> 
    <Canvas.Resources> 

    <DropShadowEffect x:Key="dropMouseOverShadow" Color="#FFD9EDF3" Opacity="80" Direction="270" /> 
    <DropShadowEffect x:Key="dropLightShadow" Color="LightGrey" Opacity="10" Direction="270" BlurRadius="20" /> 

    <Style TargetType="{x:Type Button}"> 
    <Style.Setters> 
     <Setter Property="BorderThickness" Value="0" /> 
     <Setter Property="Foreground" Value="{x:Null}" /> 
     <Setter Property="BorderBrush" Value="{x:Null}" /> 
     <Setter Property="Background" Value="{x:Null}" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
       <Border Background="{TemplateBinding Background}" CornerRadius="2"> 
        <ContentPresenter x:Name="cp" Effect="{StaticResource dropLightShadow}"/> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter TargetName="cp" Property="Effect" Value="{StaticResource dropMouseOverShadow}" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style.Setters> 
    </Style> 

<Style TargetType="{x:Type Label}"> 
    <Style.Setters> 
     <Setter Property="FontSize" Value="18" /> 
     <Setter Property="FontWeight" Value="Normal" /> 
     <Setter Property="FontFamily" Value="Gill Sans MT" /> 
    </Style.Setters> 
</Style>