1

我想创建包含图像和文本的按钮并获得漂亮的阴影。特别是，我希望图像和标签具有浅灰色阴影，但是当将鼠标移到按钮上时，我想要一种蓝色阴影。移开会使它变回浅灰色。我需要一些帮助，因为我不知道如何实现它（我是 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>

我得到的是开始时图像和标签上的浅灰色阴影。将鼠标移到按钮上，灰色和浅蓝色混合在一起。当在图像上进一步移动时，它只会变成浅蓝色。标签也是如此。

当我将鼠标悬停在按钮而不是图像和标签本身时，如何将阴影切换为浅蓝色？任何人的想法或完全其他的方法？

4

1 回答 1

1

将 LightGray 应用Effect到ContentPresenter. 然后在IsMouseOverTrigger 上，将 的Effect属性设置ContentPresenter为 blue Effect。

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

注意：删除Effect子元素样式中的各种其他设置。将 应用于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>

于 2012-11-16T19:36:06.677 回答