XAML MouseOver Effekt beim Button

  • WPF

Es gibt 6 Antworten in diesem Thema. Der letzte Beitrag () ist von CensoredAlpaca.

    XAML MouseOver Effekt beim Button

    Gelöst!
    Lösung: github.com/CSharpDesignPro/But…er/Source/MainWindow.xaml

    Guten Tag!

    Ich lerne grade etwas XAML (sehr oberflächlich, bin noch nicht ganz dabei) und verstehe nicht, was an folgendem Code falsch sein soll:

    XML-Quellcode

    1. <Button x:Name="btnApp" HorizontalAlignment="Left" Margin="167,277,0,0" VerticalAlignment="Top" Width="75" Click="btnApp_Click" Height="20">
    2. <ControlTemplate TargetType="Button">
    3. <Border Name="border" BorderThickness="0"
    4. Background="Transparent">
    5. <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    6. </Border>
    7. <ControlTemplate.Triggers>
    8. <Trigger Property="IsMouseOver" Value="True">
    9. <Setter Property="Background">
    10. <Setter.Value>
    11. <ImageBrush ImageSource="/Resources/Over.png" />
    12. </Setter.Value>
    13. </Setter>
    14. </Trigger>
    15. </ControlTemplate.Triggers>
    16. </ControlTemplate>
    17. </Button>


    Er sollte jetzt eigentlich das Over.png Bilder beim drüber schweben für den Button nutzen, aber nichts passiert. Ich bin mir sicher, dass ich etwas falsch mache, aber der Editor zeigt keinen Fehler an und das Programm läuft wunderbar (ohne gewünschten Effekt). Muss ich das Template irgendwie noch dem Button zuschreiben?

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „CensoredAlpaca“ ()

    Versuch mal im Projektmappen-Explorer dein Bild anzuklicken und bei den Eigenschaften von deinem "Over.png" musst du beim Buildvorgang "Resource" auswählen.
    Bin selbst noch sehr frisch in WPF, aber ich stand vor dem selben Problem und konnte es so lösen.
    Ich lasse mich aber gerne auch noch belehren.
    Dumm ist der, der dumm ist. Nicht andersrum!
    Leider ist dies schon getan, soweit bin ich glücklicherweise auch schon. Ich bin zwar ein kompletter Anfänger, aber durch viel googlen war dies einer der ersten Lösungen die ich gefunden habe, aber dass war es nicht. Danke für den Versuch, ich hoffe jemand anderes findet eine Lösung.
    Hallo

    Stelle in den Eigenschaften der Bilddatei im Solutionexplorer die Buildeigenschaft auf "Inhalt" oder "Content" in der englischen Version und dann auf "Kopieren wenn neuer".

    Das sollte dann so klappen ohne das der XAML geändert werden müsste.

    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##

    @Nofear23m Das hat leider ebenfalls nicht geklappt. Das Programm startet (kein Fehler, kompiliert wunderbar), doch der Button hat keinen Hover Effekt. Das ist ja seltsam. Muss ich das ControlTemplate eventuell über den Button noch irgendwie verbinden?

    Sowas in der Art: (am Ende der Zeile)

    XML-Quellcode

    1. <Button x:Name="btnApp" HorizontalAlignment="Left" Margin="167,277,0,0" VerticalAlignment="Top" Width="75" Click="btnApp_Click" Height="20" UseTemplate="true">


    Ich bin wirklich frustriert. Ich habe die letzten Tage nicht viel nach einer Lösung gesucht, ich war eher mit anderem WPF Zeug beschäftigt, aber stutzig macht mich das dennoch. Ohne Design kann ich das Programm leider nicht zu Ende bringen. In C# WinForms habe ich damals einfach ein neues Control erstellt durch eine neue Klasse welche den Button geerbt hat und dort einfach im Code abgefragt, ob die Maus über dem Button schwebt. Ich bin wirklich ratlos.

    Edit: @Nofear23m Nochmal an dich etwas interessantes, vielleicht hilft es:
    Der Content des Buttons ist: "System.Windows.Controls.ControlTemplate" nachdem ich den Code angewendet habe. Das sehe ich jetzt erst, da er ständig sehr klein war um den Content lesen zu können.

    Edit2

    XML-Quellcode

    1. <Button x:Name="btnApp" HorizontalAlignment="Left" Margin="167,277,0,0" VerticalAlignment="Top" Width="75" Click="btnApp_Click" Height="20">
    2. <Button.Template>
    3. <ControlTemplate TargetType="Button">
    4. <Border Name="border" BorderThickness="0"
    5. Background="Transparent">
    6. <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    7. </Border>
    8. <ControlTemplate.Triggers>
    9. <Trigger Property="IsMouseOver" Value="True">
    10. <Setter Property="Background">
    11. <Setter.Value>
    12. <ImageBrush ImageSource="/Resources/Over.png" />
    13. </Setter.Value>
    14. </Setter>
    15. </Trigger>
    16. </ControlTemplate.Triggers>
    17. </ControlTemplate>
    18. </Button.Template>
    19. </Button>


    Ich habe nun dem Button das Template auch zugewiesen. Diesmal ist der Button nur weiß, ob hover oder nicht.

    Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von „CensoredAlpaca“ ()

    OK, ich dachte das dein Template funktioniert und es dir nur darum geht das die Bilder "korrekt" einbindest weshalb ich ehrlich gesagt deinen XAML des Buttons nicht genauer durchgesehen hatte.

    Aber es stimmt schon, so klappt das nicht.

    1. Soll der Button wirklich durchsichtig sein? Komisch.
    2. Du setzt einen Hintergrund für den Border, unabhängig für den Button, beim Hover willst du das sich der Hintergrund ändert, aber eben nicht für den Border sondern für den Button. Das bringt dir aber nicht viel.

    Du solltest den Border-Background per "TemplateBinding" auf den Hintergrund des Buttons Mappen. So kannst du für einen Button einen Hintergrund angeben und der Border bekommt diesen dann.

    Folgendes wurde getestet und funzt:

    XML-Quellcode

    1. <Button x:Name="btnApp" HorizontalAlignment="Left" Margin="167,277,0,0" VerticalAlignment="Top" Width="75" Height="20">
    2. <Button.Template>
    3. <ControlTemplate TargetType="Button">
    4. <Border Name="border" BorderThickness="0"
    5. Background="{TemplateBinding Background}">
    6. <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    7. </Border>
    8. <ControlTemplate.Triggers>
    9. <Trigger Property="IsMouseOver" Value="True">
    10. <Setter Property="Background">
    11. <Setter.Value>
    12. <ImageBrush ImageSource="Images/hover.png" />
    13. </Setter.Value>
    14. </Setter>
    15. </Trigger>
    16. </ControlTemplate.Triggers>
    17. </ControlTemplate>
    18. </Button.Template>
    19. </Button>


    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##