ViewModel - Mehrere Bilder in Anwendung "durchschalten"

  • WPF

Es gibt 5 Antworten in diesem Thema. Der letzte Beitrag () ist von Nofear23m.

    ViewModel - Mehrere Bilder in Anwendung "durchschalten"

    Hallo,

    ich habe heute eine Frage zu einem Problem in WPF mit dem ViewModel.

    Um das Problem zu veranschaulichen habe ich ein kleines Beispielprojekt geschrieben. Es gibt ein Model "Element" mit einen dazugehörigen "ElementViewModel" und "ElementListViewModel".
    "Element" hat zwei Eigenschaften, "Name" und "List (of string)" in der mehrere Links (als string) zu Bildern gespeichert werden.
    Nun mag ich, dass man diese Bilder im View mit vor und zurück durchblättern kann. Doch an was "binde" ich jetzt das Image Control. (Es ist wahrscheinlich super einfach, nur ich komm mal wieder nicht drauf :) )

    (im Anhang das Beispielprojekt mit dem Model, ViewModel und View)

    Viele Grüße
    Florian
    Dateien

    • TestImageSkip.zip

      (798,53 kB, 80 mal heruntergeladen, zuletzt: )
    ----

    WebApps mit C#: Blazor

    Hallo flori

    Freut mich das du die Freude noch nicht verloren hast.

    Naja, es kommt darauf an wie du durch die Bilder navigieren willst. Mit Buttons oder mit einer Auflistung usw.

    Ich habs jetzt mal mit ner auflistung gemacht.

    Im ViewModel ElementViewModel einfach ein Property SelectedImage hinzugefügt. Weiters noch im Constructor mal das erste Element auch gleich ausgewählt damit das Kind einen Namen hat.

    Spoiler anzeigen

    C#-Quellcode

    1. using System;
    2. using System.Collections.Generic;
    3. using System.Collections.ObjectModel;
    4. using System.Linq;
    5. using System.Text;
    6. using System.Threading.Tasks;
    7. using TestImageSkip.Model;
    9. namespace TestImageSkip.ViewModel
    10. {
    11. public class ElementViewModel : ViewModelBase
    12. {
    13. private Element element_Model { get; }
    15. public ElementViewModel(Element elementModel)
    16. {
    17. element_Model = elementModel;
    18. _Name = element_Model.Name;
    19. Images = new ObservableCollection<string>();
    20. element_Model.Images.ForEach(x => Images.Add(x));
    21. SelectedImage = Images.FirstOrDefault();
    22. }
    24. private string _Name;
    25. public string Name
    26. {
    27. get { return _Name; }
    28. set { _Name = value; RaisePropertyChanged(); }
    29. }
    31. private ObservableCollection<string> _Images;
    32. public ObservableCollection<string> Images
    33. {
    34. get { return _Images; }
    35. set { _Images = value; RaisePropertyChanged(); }
    36. }
    38. private string _selectedImage;
    40. public string SelectedImage
    41. {
    42. get { return _selectedImage; }
    43. set { _selectedImage = value; RaisePropertyChanged(); }
    44. }
    46. }
    47. }



    Im XAML dann einfach nur eine horizontale Listbox erstellt und auf die List(Of String) gebunden, sowie das SelectedItem auf das Property im ViewModel (SelectedImage).
    Mittels DataTemplate macht die Optic dann auch was her.

    Nun nur noch das eigendliche Image Control (das große) auf das SelectedImage gebunden und fertich.

    XML-Quellcode

    1. <DockPanel LastChildFill="True" Grid.Column="2" Grid.Row="2" DataContext="{Binding SelectedElement}">
    2. <ListBox ItemsSource="{Binding Images}" SelectedItem="{Binding SelectedImage,Mode=TwoWay}" DockPanel.Dock="Top">
    3. <ListBox.ItemsPanel>
    4. <ItemsPanelTemplate>
    5. <VirtualizingStackPanel Orientation="Horizontal" IsItemsHost="True" />
    6. </ItemsPanelTemplate>
    7. </ListBox.ItemsPanel>
    8. <ListBox.ItemTemplate>
    9. <DataTemplate>
    10. <Border Margin="2" BorderBrush="Black" BorderThickness="1">
    11. <Image Source="{Binding}" Width="45" Height="45"/>
    12. </Border>
    13. </DataTemplate>
    14. </ListBox.ItemTemplate>
    15. </ListBox>
    16. <Image Source="{Binding SelectedImage}"/>
    17. </DockPanel>


    Grüße
    Sascha
    Bilder

    • Image.PNG

      227,79 kB, 791×447, 101 mal angesehen
    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. ##

    Hallo,

    Nofear23m schrieb:

    Freut mich das du die Freude noch nicht verloren hast.

    Ja, jetzt so kurz vor den Ferien ist die Freude gleich viel größer und in den Ferien hab ich dann richtig Zeit :)

    Nofear23m schrieb:

    Naja, es kommt darauf an wie du durch die Bilder navigieren willst. Mit Buttons oder mit einer Auflistung usw.

    Ich habe eigentlich an Buttons gedacht, aber die Weise mit der Auflistung ist eigentlich noch viel besser. Danke für die gute Idee.

    Wie ich bereits gedacht habe, eigentlich ganz simpel. Die Methoden die du verwendet hast kann ich ja eigentlich schon, bin halt nur nicht drauf gekommen und hab schon wieder zu kompliziert gedacht :) .

    Wieder mal vielen Dank für die Zeit die du dir genommen hast. Noch einen schönen Abend wünsche ich dir.

    Viele Grüße
    Florian
    ----

    WebApps mit C#: Blazor

    flori2212 schrieb:

    bin halt nur nicht drauf gekommen und hab schon wieder zu kompliziert gedacht

    Glaub mir, das kenne ich.

    Wegen der Buttons:
    Wenn du das mit Binding korrekt lösen wollen würdest müsstest du dann mit Command arbeiten. Dafür gibt es im Netz einiges.
    Google mal RelayCommand.

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

    Wenn du das mit Binding korrekt lösen wollen würdest müsstest du dann mit Command arbeiten. Dafür gibt es im Netz einiges.

    Müsste ich in der WPF für JEDEN Button mit Commands arbeiten? (wenn ich korrekt arbeiten will)
    Und kommt zu den Thema auch noch ein Tutorial (ich denke schon)?

    Viele Grüße
    Florian
    ----

    WebApps mit C#: Blazor

    Ja, für jede Aktion gibt es einen Command auf den du Bindest.

    Wie unter WinForms ein Handler. Statt dem Handler ein Command.

    Ja klar kommt das noch.

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

Facebook
Telefonspende