Question

我的WPF页面上有8个按钮（C＃应用程序）。对于这些按钮中的每一个，我希望将不同的图像放在它们上面，并将鼠标悬停在图像上。

此链接告诉我如何为所有按钮放置背景图像：wpf button background image

如何修改此按钮以使每个按钮都有自己独特的背景图像并将鼠标悬停在图像上？

Answer 1

如果需要不同的图像，您必须设置背景图像并悬停图像differently for each button。

此外，hover over image won't be visible因为默认鼠标悬停在按钮上会始终覆盖按钮的背景。为此，您必须override default template，这可以在默认的按钮样式中完成。

如下面的示例中提到的一个按钮，您需要复制其他按钮。（无需覆盖默认模板，因为它将自动应用于所有按钮。只需要为其他7个按钮提供内部样式。）

<StackPanel>
   <StackPanel.Resources>
      <Style TargetType="Button">
         <Setter Property="Template">
           <Setter.Value>
             <ControlTemplate TargetType="Button">
               <Border Background="{TemplateBinding Background}">
                  <ContentPresenter/>
               </Border>
             </ControlTemplate>
           </Setter.Value>
         </Setter>
       </Style>
    </StackPanel.Resources>
    <Button Width="100" Height="100">
      <Button.Style>
        <Style TargetType="Button"
               BasedOn="{StaticResource {x:Type Button}}">
           <Setter Property="Background">
             <Setter.Value>
               <ImageBrush ImageSource="Image1.png"/>
             </Setter.Value>
           </Setter>
           <Style.Triggers>
             <DataTrigger Binding="{Binding IsMouseOver,
                                         RelativeSource={RelativeSource Self}}"
                          Value="True">
                <Setter Property="Background">
                  <Setter.Value>
                    <ImageBrush ImageSource="Image2.png"/>
                  </Setter.Value>
                </Setter>
              </DataTrigger>
            </Style.Triggers>
         </Style>
      </Button.Style>
   </Button>
</StackPanel>

设置背景并将鼠标悬停在按钮上的图像上

1 个答案: