Image onclick

  • WPF

Es gibt 27 Antworten in diesem Thema. Der letzte Beitrag () ist von Derfuhr.

    Image onclick

    Hm, vielleicht stelle ich mich gerade ein bisschen dämlich an aber wie löst man denn eine Aktion bei Klick auf ein Bild aus? Hätte gedacht ich lege einfach ein Bild in den Designer und doppelklicke darauf, um ein onclick Event anzulegen. So wie es bei allen anderen Steuerelementen ja auch geht.

    Geht das jetzt bei Visual Studio Express 2012 irgendwie anders?

    Hi,

    in WPF hat ein Image kein Click Event, du kannst aber auch das MouseLeftButtonUp event nutzen:

    VB.NET-Quellcode

    1. Private Sub Image1_MouseLeftButtonUp(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles Image1.MouseLeftButtonUp
    3. End Sub


    mfG

    Derfuhr

    tolox schrieb:

    lege einfach ein Bild in den Designer und doppelklicke darauf, um ein onclick Event anzulegen.
    Und schon alles falsch.
    Im Designer tust du gar nix legen. Weder ziehen, noch klicken noch sonst was. Nur anschauen sonst nix. Designen tust du nur mit XAML, da sonst wieder genau der gleiche Scheiß rauskommt wie bei Winforms. So das wäre das erste. Zusätzlich kannste ma solche Events gleich vergessen. In WPF verwendet man Commands und keine Events.
    Außerdem wirst du nicht auf das Bild klicken sondern auf einen Button welcher auf Klicken ausgelegt ist. Jetzt sagst du: Ich möchte aber ein Bild und nix vom Button sehen. Kein Problem.
    Dazu verwendet man Templates. Ich habe das jetzt nur im Editor geschrieben und nicht alles extra nachgeschaut. Müsste so aber stimmen(ansonsten gribs einschalten und Fehler selbst korriegieren :))

    XML-Quellcode

    1. <Button Command={Binding BildchengeclicktCommand}>
    2. <Button.Template>
    3. <ControlTemplate TargetType={x:Type Button}>
    4. <Image BaseUri={Binding PictureUri} ... />
    5. </ControlTemplate>
    6. </Button.Template>
    7. </Button>


    EDIT: Bitte ignoriere die Antwort über mir.


    Opensource Audio-Bibliothek auf github: KLICK, im Showroom oder auf NuGet.

    @thefiloe: hat recht,

    hab mal ein besseres Beispiel gemacht:

    XML-Quellcode

    1. <Window x:Class="MainWindow"
    2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4. Title="MainWindow" Height="350" Width="525">
    5. <Window.Resources>
    6. <Style x:Key="ButtonWithImage" TargetType="{x:Type Button}">
    7. <Setter Property="Template">
    8. <Setter.Value>
    9. <ControlTemplate TargetType="{x:Type Button}">
    10. <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="Transparent">
    11. <Image x:Name="IMG" Source="C:\1.png"/>
    12. </Grid>
    13. <ControlTemplate.Triggers>
    14. <Trigger Property="IsMouseOver" Value="true">
    15. <Setter Property="Opacity" TargetName="IMG" Value="0.5"/>
    16. </Trigger>
    17. <Trigger Property="IsMouseDirectlyOver" Value="true">
    18. <Setter Property="Opacity" TargetName="IMG" Value="0"/>
    19. </Trigger>
    20. </ControlTemplate.Triggers>
    21. </ControlTemplate>
    22. </Setter.Value>
    23. </Setter>
    24. </Style>
    25. </Window.Resources>
    26. <Grid>
    27. <Button Name="BTN1" Style="{DynamicResource ButtonWithImage}" Width="200" Height="200"/>
    28. </Grid>
    29. </Window>


    mfG

    Derfuhr

    Derfuhr schrieb:

    hab mal ein besseres Beispiel gemacht:
    Das sieht ja schon mal viel besser aus. Jedoch ist da nirgends was, was den Click handeln würde ^^


    Opensource Audio-Bibliothek auf github: KLICK, im Showroom oder auf NuGet.

    OK hab ich nachgeholt:

    XML-Quellcode

    1. <Button Name="BTN1" Style="{DynamicResource ButtonWithImage}" Width="200" Height="200" Click="BTN1_Clicked"/>


    VB.NET-Quellcode

    1. Private Sub BTN1_Clicked(ByVal sender As System.Object, ByVal e As System.EventArgs)
    2. MessageBox.Show("BTN1_Clicked")
    3. End Sub


    mfG

    Derfuhr

    Edit:
    die Trigger Property IsDirectlyMoseOver würde ich noch gegen das austauschen

    XML-Quellcode

    1. <Trigger Property="IsPressed" Value="true">
    2. <Setter Property="Opacity" TargetName="IMG" Value="0"/>
    3. </Trigger>

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

    Derfuhr schrieb:

    Click="BTN1_Clicked"

    thefiloe schrieb:

    Zusätzlich kannste ma solche Events gleich vergessen. In WPF verwendet man Commands und keine Events.


    Opensource Audio-Bibliothek auf github: KLICK, im Showroom oder auf NuGet.

    Hallo,

    ich hab mich nun ma etwas mit diesen Commands beschäftigt, nun wäre es nett, wenn ihr mir sagt ob´s besser geht.

    XML-Quellcode

    1. <Window x:Class="MainWindow"
    2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4. xmlns:local="clr-namespace:WpfApplication1"
    5. Title="MainWindow" Height="350" Width="525">
    6. <Window.CommandBindings>
    7. <CommandBinding Command="{x:Static local:My_Commands.MyClickCommand}" CanExecute="MyCmdBinding_CanExecute" Executed="MyCmdBinding_Executed"></CommandBinding>
    8. </Window.CommandBindings>
    9. <Window.Resources>
    10. <Style x:Key="ButtonWithImage" TargetType="{x:Type Button}">
    11. <Setter Property="Template">
    12. <Setter.Value>
    13. <ControlTemplate TargetType="{x:Type Button}">
    14. <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="Transparent">
    15. <Image x:Name="IMG" Source="C:\1.png"/>
    16. </Grid>
    17. <ControlTemplate.Triggers>
    18. <Trigger Property="IsMouseOver" Value="true">
    19. <Setter Property="Opacity" TargetName="IMG" Value="0.5"/>
    20. </Trigger>
    21. <Trigger Property="IsPressed" Value="true">
    22. <Setter Property="Opacity" TargetName="IMG" Value="0"/>
    23. </Trigger>
    24. </ControlTemplate.Triggers>
    25. </ControlTemplate>
    26. </Setter.Value>
    27. </Setter>
    28. </Style>
    29. </Window.Resources>
    30. <Grid>
    31. <Button Name="BTN1" Style="{DynamicResource ButtonWithImage}" Width="200" Height="200" Command="{x:Static local:My_Commands.MyClickCommand}"></Button>
    32. </Grid>
    33. </Window>

    VB.NET-Quellcode

    1. Module My_Commands
    3. Private _MyClickCommand As RoutedUICommand
    5. ReadOnly Property MyClickCommand As RoutedUICommand
    6. Get
    7. Return _MyClickCommand
    8. End Get
    9. End Property
    11. Sub New()
    12. _MyClickCommand = New RoutedUICommand("", "MyClickCommand", GetType(My_Commands))
    13. End Sub
    15. End Module

    VB.NET-Quellcode

    1. Class MainWindow
    3. Private Sub MyCmdBinding_CanExecute(ByVal sender As Object, ByVal e As System.Windows.Input.CanExecuteRoutedEventArgs)
    4. e.CanExecute = True
    5. End Sub
    7. Private Sub MyCmdBinding_Executed(ByVal sender As Object, ByVal e As System.Windows.Input.ExecutedRoutedEventArgs)
    8. MessageBox.Show("Dat wars")
    9. End Sub
    10. End Class


    Wie ihr die Commands einbauen, im CodeBehind oder auch im XAML?

    mfG

    Derfuhr

    Gehört hab ich davon schon, mir ist dieser "artikel" von Josh Smith dank dir schon bekannt, hatte noch nicht die zeit das mal zu lesen(nur flüchtig überschaut), aber das scheint wohl wichtiger zu sein als ich erwartete. Ich werd mir das schleunigst mal vornehmen.

    mfG

    Derfuhr

    in letzter Zeit entstund in mir auch Kritik am Artikel (bzw. an Wpf insgesamt), weil Josh mit keinem Wort auf das Prinzip Binding-Picking im Xaml-Editor eingeht.

    Im Grunde bin ich entsetzt, wie unsicher zu coden in Wpf scheinbar akzeptabel erscheint oder gar unvermeidbar ist, und dass das nirgends beim Namen genannt wird ("StringSmells").

    MVVM ist sicher eines der ersten Dinge die man sich anschauen sollte wenn man WPF verwendet. Alles andere endet in Brainfuk.


    Opensource Audio-Bibliothek auf github: KLICK, im Showroom oder auf NuGet.

    Ja, ok...
    versteh ich alles nicht. Nicht mal das Beispiel. Bei mir fangen XAML Seiten so an:

    Quellcode

    1. <Page
    2. x:Class="Bild_klicken.MainPage"
    3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    5. xmlns:local="using:Bild_klicken"
    6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    8. mc:Ignorable="d">
    10. <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    12. </Grid>
    13. </Page>


    und daher weiß ich nicht mal wo ich das Beispiel einfügen soll:

    Quellcode

    1. <Window x:Class="MainWindow"
    2. usw.


    Hat jemand einen Tipp für ein Tutorial oder Buch für diese XAML-Geschichte, die ich anscheinend so komplett gar nicht verstanden habe?

    LOL, das wusste ich noch garnicht, hab ma eben geguggt, finde ich merkwürdig das mir das noch nie aufgefallen ist. Vieleicht sollte ich Winforms an den Nagel hängen, beides zusammen zu lernen scheint nicht gut zu sein, oder das was ich über WPF gelesen hab stammte aus schlechten Büchern.

    Derfuhr schrieb:

    Winforms an den Nagel
    [Like]
    WPF bietet so viele Vorteile. Von dem her ist ein richtiger Umstieg sicher nicht schlecht.


    Opensource Audio-Bibliothek auf github: KLICK, im Showroom oder auf NuGet.

    tolox schrieb:

    Ja, ok...
    versteh ich alles nicht. Nicht mal das Beispiel. Bei mir fangen XAML Seiten so an:

    jo, eine Page kann ich auch meinem Projekt hinzufügen - sieht so aus wie deine.

    Ich vermute, Page ist was ähnliches wie Window, unterstützt aber zusätzlich Silverlight-Anwendungen (wovon ich keinen blassen habe)

    scheint jdfs. kein groß unterschied zu machen, ob nu Page oder Window.

    Pages werden auch oft bei Wizzards und Co. eingesetzt. So genau hab ich den Sinn jedoch nie verstanden :D
    Ach ja und bei WPF-Browseranwendungen verwendet man auch Pages.


    Opensource Audio-Bibliothek auf github: KLICK, im Showroom oder auf NuGet.

    Naja, mit den Pages kann man halt relativ einfach und komfortabel den Inhalt mehrerer Seiten nach einander anzeigen lassen, ohne immer wieder neue Fenster zu laden. Bietet an manchen Stellen Vorteile, wird aber halt nicht so oft benutzt^^

Facebook
Telefonspende