#WPF在mouseOver按钮上更改图像

时间:2018-09-15 16:07:06

标签: c# wpf styles

我正在尝试更改堆栈面板中按钮内的图像。 当按钮检测到鼠标时,我希望图像改变。有可能吗?

谢谢

我的按钮:

   <Button Background="Transparent" Height="17" Width="17" BorderBrush="Transparent" HorizontalAlignment="Right" Margin="0 0 6 0" Click="Button_Click" ToolTip="Copier les informations dans le Clipboard" Grid.Column="4" Style="{StaticResource hover2}">
                <StackPanel Height="17" Width="17">
                    <Image Source="Resources/copyPaste.png" Height="17" Width="17" />
                </StackPanel>
            </Button>      

我的风格适用:

<Style x:Key="hover2" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>       
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="0"                         
                        BorderBrush="Transparent"                          
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

1 个答案:

答案 0 :(得分:0)

确定可以:

<Grid.Resources>
          <Style x:Key="hover2" TargetType="Button">
              <Setter Property="OverridesDefaultStyle" Value="True"/>
              <Setter Property="Template">
                  <Setter.Value>
                      <ControlTemplate TargetType="Button">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
                                <ContentPresenter.Content>
                                    <Border Name="border" 
                                          BorderThickness="0"                         
                                          BorderBrush="Transparent"                          
                                          Background="{TemplateBinding Background}">
                                        <Image x:Name="ButtonImage1" Source="Resources/copyPaste.png" Height="17" Width="17" />
                                    </Border>
                                </ContentPresenter.Content>
                            </ContentPresenter>
                            <ControlTemplate.Triggers>
                              <Trigger Property="IsMouseOver" Value="True">
                                  <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                                    <Setter TargetName="ButtonImage1" Property="Source" Value="Resources/hoverImage.png" />
                                </Trigger>
                          </ControlTemplate.Triggers>
                      </ControlTemplate>
                  </Setter.Value>
              </Setter>
          </Style>
        </Grid.Resources>

看到我将您的控件放置在内容演示器中,然后将其命名为图像,然后在控件模板触发器中,您可以通过其名称访问该图像,然后分配其来源。

Button

 <Button
           x:Name="Button1"
           Background="Transparent"
           Height="17"
           Width="17"
           BorderBrush="Transparent"
           HorizontalAlignment="Right" Margin="0 0 6 0" ToolTip="Copier les informations dans le Clipboard" Grid.Column="4" Style="{StaticResource hover2}"/>