WPF Button Mouseover圖像

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或其他位置？ （不知道在哪裏把圖像訪問它）。我搜索了，但我發現的解決方案並不完全是我正在處理的。如果這是一個重複的問題，我很抱歉。

摘要：

如何更改按鈕的背景圖像上的鼠標觸發的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中的資源工具導入圖像之後，我在Properties窗格中更新了圖像構建設置至資源。

感謝您的解決方案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有其「生成操作」設置爲「資源」。

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; 
}