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触发器上，将Effect的{{1}}属性设置为蓝色ContentPresenter。

注意：通过设置Effect的{{1}}属性，然后使用x:Name通过ContentPresenter按名称访问ContentPresenter来完成此操作。

注意：删除子元素样式中的各种其他Setter设置。将TargetName应用于Effect会导致子元素继承Effect。

ContentPresenter

WPF按钮（图像和标签）阴影

1 个答案: