Hover / Click Effekt

  • WPF

Es gibt 7 Antworten in diesem Thema. Der letzte Beitrag () ist von Noones1987.

    Hover / Click Effekt

    Guten Abend zusammen,

    kann mir kurz und bündig Jemand erklären, wie ich ein MouseOver Effekt einbaue? Sprich wenn ich mit der Maus auf dem Button bin, dann wechselt das Bild des Buttons zum anderen Bild. wenn ich nun dann mit der Maus drauf drücke, dann soll der MouseClick effekt eintreten, welches wieder ein anderes Bild ist, und Release löst das ganze natürlich aus.

    Hi

    das was du möchtest bewerkstelligst du in dem MouseHover-Event des jewiligen Usercontrols.
    Danach einfach das Image oder BackgroundImage verändern und im MouseLeave-Event das selbe in Grün. :)

    also z.B.:
    Spoiler anzeigen

    C#-Quellcode

    1. private void button_MouseHover(object sender, EventArgs e)
    2. {
    3. button.Image =
    4. }



    \\Edit: Sry grade erst gesehen das du das in WPF brauchst ^^, in wpf ist das in MouseEnter und MouseLeave unterteilt.
    schau dir mal das hier an: c-sharpcorner.com/blogs/mouse-…mouse-leave-event-in-wpf1
    Lg Mausekeks
    Brain is Loading: 35%
    Hallo @Noones1987 und willkommen im Forum

    Dein vorhaben lässt sich mit Triggern am besten lösen.

    Beispiel:

    XML-Quellcode

    1. <Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="150" Padding="5">
    2. <Button.Style>
    3. <Style TargetType="Button">
    4. <Setter Property="Content" Value="Normal Button"/>
    5. <Style.Triggers>
    6. <Trigger Property="IsMouseOver" Value="True">
    7. <Setter Property="Content" Value="Hover Button"/>
    8. </Trigger>
    9. <Trigger Property="IsPressed" Value="True">
    10. <Setter Property="Content" Value="Pressed Button"/>
    11. </Trigger>
    12. </Style.Triggers>
    13. </Style>
    14. </Button.Style>
    15. </Button>


    Für weitere Informationen guckst du mal in mein Tut im Kapitel Styles, Templates und Trigger.

    Wenn du noch Fragen hast, kannst du dich gerne nochmal melden.

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

    Das musst du jetzt aber genauer erläutern. Den Satz verstehe ich nicht wirklich.

    Sag mir doch was du hast und was du genau machen willst. ICH weis nicht ob du noch wo anders Styles definiert hast. Und in meinem Tutorial bespreche ich übrigens auch wie man von vorhandenen Styles erben kann.
    Das zeigt mir das du mein Tutorial NICHT durchgesehen hast. :thumbdown:

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

    Ich denke doch das ich mir ieniges angesehen habe.

    HTML-Quellcode

    1. <Window x:Class="UW_Launcher.Login"
    2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6. mc:Ignorable="d"
    7. Title="UW - Login" Height="318" Width="678" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" Foreground="{x:Null}" WindowStyle="None" Visibility="Visible" AllowsTransparency="True" Background="{x:Null}">
    8. <Grid MouseDown="Grid_MouseDown">
    9. <Grid.Background>
    10. <ImageBrush ImageSource="LoginUI/Background/window.png"/>
    11. </Grid.Background>
    12. <Button x:Name="login_btn" Content="ANMELDEN" HorizontalAlignment="Left" Margin="150,239,0,0" VerticalAlignment="Top" Width="150" Height="50" Foreground="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" BorderBrush="{x:Null}" BorderThickness="0" Padding="0">
    13. <Button.Background>
    14. <ImageBrush ImageSource="LoginUI/Button/buttonNormal.png"/>
    15. </Button.Background>
    16. <Button.Style>
    17. <Style TargetType="Button">
    18. <Setter Property="OverridesDefaultStyle" Value="True" />
    19. <Setter Property="Cursor" Value="Hand" />
    20. <Setter Property="Template">
    21. <Setter.Value>
    22. <ControlTemplate TargetType="Button">
    23. <Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}">
    24. <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    25. </Border>
    26. <ControlTemplate.Triggers>
    27. <Trigger Property="IsMouseOver" Value="True">
    28. <Setter Property="Opacity" Value="0.8" />
    29. </Trigger>
    30. </ControlTemplate.Triggers>
    31. </ControlTemplate>
    32. </Setter.Value>
    33. </Setter>
    34. </Style>
    35. </Button.Style>
    36. </Button>
    37. <Button x:Name="exit_btn" Content="ABBRECHEN" HorizontalAlignment="Left" Margin="367,239,0,0" VerticalAlignment="Top" Width="150" Height="50" Foreground="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" BorderBrush="{x:Null}" Click="exit_btn_Click" Padding="0" BorderThickness="0" MouseDown="exit_btn_MouseDown" MouseEnter="exit_btn_MouseEnter" MouseLeave="exit_btn_MouseLeave">
    38. <Button.Background>
    39. <ImageBrush ImageSource="LoginUI/Button/buttonNormal.png"/>
    40. </Button.Background>
    41. <Button.Style>
    42. <Style TargetType="Button">
    43. <Setter Property="OverridesDefaultStyle" Value="True" />
    44. <Setter Property="Cursor" Value="Hand" />
    45. <Setter Property="Template">
    46. <Setter.Value>
    47. <ControlTemplate TargetType="Button">
    48. <Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}">
    49. <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    50. </Border>
    51. <ControlTemplate.Triggers>
    52. <Trigger Property="IsMouseOver" Value="True">
    53. <Setter Property="Opacity" Value="0.8" />
    54. </Trigger>
    55. </ControlTemplate.Triggers>
    56. </ControlTemplate>
    57. </Setter.Value>
    58. </Setter>
    59. <Style.Triggers>
    60. <Trigger Property="IsMouseOver" Value="True">
    61. <Setter Property="Background">
    62. <Setter.Value>
    63. <ImageBrush ImageSource="LoginUI/Button/buttonHover.png"/>
    64. </Setter.Value>
    65. </Setter>
    66. </Trigger>
    67. </Style.Triggers>
    68. </Style>
    69. </Button.Style>
    70. </Button>
    71. <Label Content="Accountname" HorizontalAlignment="Left" Margin="150,79,0,0" VerticalAlignment="Top" Background="{x:Null}" RenderTransformOrigin="0.5,1.346" Width="85" Foreground="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
    72. <Label Content="Passwort" HorizontalAlignment="Left" Margin="150,157,0,0" VerticalAlignment="Top" Background="{x:Null}" Width="85" Foreground="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" RenderTransformOrigin="0.494,0.5"/>
    73. <TextBox HorizontalAlignment="Left" Height="35" Margin="150,105,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="367" BorderBrush="{x:Null}" Foreground="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" ScrollViewer.CanContentScroll="True" SelectionBrush="{x:Null}" TextAlignment="Center" FontSize="20">
    74. <TextBox.Background>
    75. <ImageBrush ImageSource="LoginUI/Text/textField.png"/>
    76. </TextBox.Background>
    77. </TextBox>
    78. <TextBox HorizontalAlignment="Left" Height="35" Margin="150,188,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="367" BorderBrush="{x:Null}" SelectionBrush="{x:Null}" Foreground="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" FontSize="20" TextAlignment="Center">
    79. <TextBox.Background>
    80. <ImageBrush ImageSource="LoginUI/Text/textField.png"/>
    81. </TextBox.Background>
    82. </TextBox>
    83. </Grid>
    84. </Window>
    Hallo

    OK, jetzt verstehe ich. du willst den Background ändern, was in der WPF normalerweise nicht gemacht wird da man in der WPF sowieso ALLES in den Content des Button packen kann und somit eigentlich mehr damit arbeitet.
    In diesem Fall (kannst dir ja mal das OriginalTemplates angucken, wie das geht erkläre ich in meinen Videos) musst du den Background der BORDERS machen da MS das so beim Button implementiert hat.

    Das hier habe ich gerade mal getestet:

    XML-Quellcode

    1. <Grid>
    2. <Grid.Background>
    3. <ImageBrush ImageSource="images\back.jpg" Opacity="0.8"/>
    4. </Grid.Background>
    5. <Button x:Name="login_btn" Width="150" Height="50" Foreground="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
    6. BorderBrush="{x:Null}" BorderThickness="0" Padding="0">
    7. <Button.Background>
    8. <ImageBrush ImageSource="images\normal.png" Opacity="0.8"/>
    9. </Button.Background>
    10. <Button.Style>
    11. <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
    12. <Setter Property="OverridesDefaultStyle" Value="True"/>
    13. <Setter Property="Template">
    14. <Setter.Value>
    15. <ControlTemplate TargetType="Button">
    16. <Border Name="border" BorderThickness="0" BorderBrush="Transparent" Background="{TemplateBinding Background}">
    17. <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    18. </Border>
    19. <ControlTemplate.Triggers>
    20. <Trigger Property="IsMouseOver" Value="True">
    21. <Setter TargetName="border" Property="BorderBrush" Value="Maroon" />
    22. <Setter TargetName="border" Property="Background">
    23. <Setter.Value>
    24. <ImageBrush ImageSource="images\hover.png"/>
    25. </Setter.Value>
    26. </Setter>
    27. </Trigger>
    28. <Trigger Property="IsPressed" Value="True">
    29. <Setter TargetName="border" Property="BorderBrush" Value="Maroon" />
    30. <Setter TargetName="border" Property="Background">
    31. <Setter.Value>
    32. <ImageBrush ImageSource="images\pressed.png"/>
    33. </Setter.Value>
    34. </Setter>
    35. </Trigger>
    36. </ControlTemplate.Triggers>
    37. </ControlTemplate>
    38. </Setter.Value>
    39. </Setter>
    40. </Style>
    41. </Button.Style>
    42. </Button>
    43. </Grid>



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