WPF Button Mouseover Bild

Question

Ich lerne C# und XAML Windows-Anwendungen zu erstellen. Ich wollte eine Schaltfläche erstellen, die ein Bild als Hintergrund hat. Wenn Sie jedoch den Mauszeiger über die Schaltfläche bewegen, sollte der Hintergrund der Schaltfläche zu einem anderen "hervorgehobenen" Bild wechseln. Ich habe versucht, die Hintergrundbilder in Resources.resx hinzuzufügen. Ich musste eine benutzerdefinierte Schaltfläche mit XAML-Stilen erstellen, um den Standard-Highlight-Effekt einer WPF-Schaltfläche loszuwerden.

Ich habe eine benutzerdefinierte Schaltfläche aus einem Code, den ich auf SO gefunden. Der Code ist (in einem neuen Ressource-Wörterbuch):

<!-- 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> 

Was ich so platziere, dass der Hintergrund auf ein anderes Bild, ob es in meinem resources.resx oder einen anderen Ort ist? (Ich bin mir nicht sicher, wohin ich das Bild setzen soll, um darauf zuzugreifen). Ich suchte SO, aber die Lösungen, die ich fand, waren nicht genau das, womit ich es zu tun habe. Wenn das eine doppelte Frage ist, entschuldige ich mich.

Zusammenfassung:

Wie kann ich das Hintergrundbild einer Taste über Trigger für eine Maus in XAML ändern? Wo setze ich das Bild so, dass es im Trigger-Code zugegriffen werden kann?

Update Dies ist, was ich als Trigger-Aktion gesetzt habe, aber das Bild wird nicht aktualisiert. Ich stellte sicher, dass die Image-Build-Aktion auf die Ressource gesetzt und in einen Ordner namens Resources gestellt wurde.

Der Code ist:

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

Die Strukturdatei

Simon 
    Simon 
     Resources 
      all the images 
     Fonts 
     bin 
     obj 
     Properties 

Lösung

Das ist folgende ist der vollständige Code für eine Mouseover Bildänderung auf der Taste ermöglichen:

<!-- 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> 

Für das eigentliche Bild, legte ich es in den Ordner Resources, die im Stammverzeichnis ist. Nach dem Importieren der Bilder dort mit dem Ressourcen-Tool in Visual Studio, aktualisierte ich das Bild Erstellungseinstellungen zu Ressource im Bereich Eigenschaften.

Danke für die Lösung dbaseman

Answer 1

Ich denke, dass es einfacher ist, das Bild in einen /Images Ordner im Projekt nur hinzufügen. Dann ist dies die Syntax, die Sie verwenden:

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

(. Ihr Bild Unter der Annahme, MyImage.jpg im Images Ordner im Stammverzeichnis des Projektes)

nur sicherstellen, dass MyImage.jpg seine „Build-Aktion“ hat auf "Ressource".

Answer 2

Hier ist eine andere Möglichkeit, dies zu tun.

Sie können die beiden Ereignisse des Bildes MouseEnter und MouseLeave verwenden. Jetzt in Ihrem Code dies tun.

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