WPF按鈕鼠標懸停圖像

Question

我正在學習C＃和XAML來構建Windows應用程序。 我想創建一個以圖像為背景的按鈕。 但是當將鼠標懸停在按鈕上時，按鈕的背景應更改為另一個“突出顯示”的圖像。 我試圖將背景圖像添加到Resources.resx中。 我不得不使用xaml樣式創建一個自定義按鈕來擺脫wpf按鈕的默認高亮效果。

我從SO上找到的一些代碼創建了一個自定義按鈕。 代碼是（在新的資源字典中）：

    <!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
    <Style x:Key="StartMenuButtons" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="0" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">


                        <!-- UPDATE THE BUTTON BACKGROUND -->
                        <Setter Property="Background" Value="WHAT GOES HERE"  TargetName="border"/>


                    </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我放了什么，以便背景更改為另一個圖像，無論是在我的resources.resx或其他位置？ （不確定將圖像放在何處訪問它）。 我搜索了SO，但我找到的解決方案並不完全是我正在處理的問題。 如果這是一個重復的問題，我道歉。

摘要：

如何在XAML中更改鼠標上按鈕的背景圖像？ 我在哪里放置圖像以便可以在觸發器代碼中訪問它？

更新這是我作為觸發操作，但圖像不更新。 我確保將圖像構建操作設置為資源並將其放在名為Resources的文件夾中。

代碼是：

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background">
          <Setter.Value>
             <ImageBrush ImageSource="/Simon;component/Resources/btn_bg_hover.jpg" />
          </Setter.Value>
        </Setter>
     </Trigger>

文件結構是

Simon
    Simon
        Resources
            all the images
        Fonts
        bin
        obj
        Properties

解

以下是允許在按鈕上進行鼠標懸停圖像更改的完整代碼：

<!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
    <Style x:Key="StartMenuButtons" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="0" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border">
                            <Setter.Value>
                                <ImageBrush ImageSource="Resources/btn_bg_hover.jpg" />
                            </Setter.Value>
                        </Setter>

                    </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

對於實際圖像，我將它放在根目錄中的Resources文件夾中。 使用visual studio中的資源工具導入圖像后，我在“屬性”窗格中將圖像構建設置更新為“ 資源 ”。

感謝dbaseman的解決方案

Answer 1

我認為將圖像添加到項目中的/Images文件夾更容易。 然后這是您使用的語法：

<ControlTemplate TargetType="Button">
    <Border Name="border" BorderThickness="0" 
                Background="Transparent">
          <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background">
               <Setter.Value>
                   <ImageBrush ImageSource="/MyProjectName;component/Images/MyImage.jpg" />
               </Setter.Value>
            </Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

（假設您的圖像MyImage.jpg位於項目根目錄中的Images文件夾中。）

只需確保MyImage.jpg將其“Build Action”設置為“Resource”。

Answer 2

這是另一種方法。

您可以使用圖像MouseEnter和MouseLeave的兩個事件。 現在在您的代碼中執行此操作。

XAML

<Image x:Name="image1" HorizontalAlignment="Left" Height="142" Margin="64,51,0,0" VerticalAlignment="Top" Width="150" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave"   />

C＃

private void image1_MouseEnter(object sender, MouseEventArgs e)
{
    string packUri = @"pack://application:,,,/Resources/Polaroid.png";
    image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource;
}

private void image1_MouseLeave(object sender, MouseEventArgs e)
{
    string packUri = @"pack://application:,,,/Resources/PolaroidOver.png";
    image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource;
}