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

LightGrayEffectをに適用しContentPresenterます。次に、IsMouseOverトリガーで、のEffectプロパティをContentPresenter青に設定しますEffect。

注：これを実現するには、のx:Name属性を設定してから、 usingを使用して名前でbyContentPresenterにアクセスします。ContentPresenterSetterTargetName

注：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 に答える