Comment puis-je faire une grille d'images cliquables à partir d'une liste de données dans WPF?

Question

Je suis un programmeur C et Java chevronné, mais un débutant WPF absolu.

Je crée une application de kiosque qui affiche une liste d'images de produits que l'utilisateur clique sur le bouton pour voir les détails du produit et peut-être passer une commande.

Je suis en train de structurer mon application avec MVVM Fondation parce que je suis habitué aux avantages de la structure et des tests. Je me demande quelle est la manière la plus naturelle de créer une grille d'images cliquables qui rempliront l'écran de gauche à droite, de haut en bas (ou inversement, je n'ai pas d'exigences précises).

Toute image doit être lié à un objet qui deviendra courant et être affiché dans l'écran suivant. Merci pour votre aide.

Answer 1

OK! Écoutez! Voici comment vous faites cela! :) 1) Utilisation ItemsControl avec UniformGrid pour obtenir Aligement automatique

<ItemsControl> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <UniformGrid> 
      </UniformGrid> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <Button Width="50" Height="50"/> 
    <Button Width="50" Height="50"/> 
    <Button Width="50" Height="50"/> 
</ItemsControl> 

2) Populate ItemsControl avec les données de votre viewmodel

<ItemsControl ItemsSource="{Binding Path=ImageList}"... 

public ObservableCollection<ClickableImage> ImageList 
{ 
    get { return m_ImageList;} 
} 

... constructor 
{ 
    m_ImageList = new ObservableCollection<ClickableImage>(); 
    m_ImageList.Add(new ClickableImage("image.png"); 
} 

TADAAAA!

Answer 2

En ViewModel ajouter ObservableList<ClickableImage> m_Images comme des biens publics. En XAML utiliser ListView pour afficher ClickableImage. Créer un datatemplate pour ClickableImage avec Image et commande augmentée uppon click.

Sur le XAML:

<Button Command="{Binding Path=OnClickCommand}"/> 

Sur le ViewModel:

public ICommand OnClickCommand { 
    get 
    { 
     return new RelayCommand(aram => this.Click(), param => this.CanClick); 
    } 
} 
public void Click() { 
     //i was clicked! 
     globalBigImageViewModel.BigImageContent = m_Image; 
} 

Answer 3

J'ai affiné un peu le code. Voici la déclaration d'espace de noms

xmlns:vm="clr-namespace:TestSandbox.ViewModels" 

DataContext

<UserControl.DataContext> 
    <vm:ViewModel1/> 
</UserControl.DataContext> 

et UniformGrid

<ItemsControl Name="imageList" ItemsSource="{Binding Path=Products}" BorderBrush="#FFA90606" Background="#FFE70F0F"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <UniformGrid Margin="50"> 
      </UniformGrid> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <!-- The Image binding --> 
      <Image Source="{Binding Path=image}" /> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

ici est le code C# dans le modèle de vue

public List<Product> Products {get; set; } 

    public ViewModel1() 
    { 
     Products = new List<Product>(); 
     Products.Add(MakeProduct(@"..\images\beemovie.jpg")); 
     Products.Add(MakeProduct(@"..\images\darkknight.jpg")); 
     Products.Add(MakeProduct(@"..\images\matrix.jpg")); 
     Products.Add(MakeProduct(@"..\images\milo.jpg")); 
     Products.Add(MakeProduct(@"..\images\superhero.jpg")); 
     Products.Add(MakeProduct(@"..\images\twilight.jpg")); 
     Products.Add(MakeProduct(@"..\images\xfiles.jpg")); 
    } 

    public Product MakeProduct(string path) 
    { 
     return new Product(path, MakeImage(path)); 
    } 

    public BitmapImage MakeImage(string path) 
    { 
     BitmapImage bmpi = new BitmapImage(); 
     bmpi.BeginInit(); 
     bmpi.UriSource = new Uri(path, UriKind.Relative); 
     bmpi.EndInit(); 
     return bmpi; 
    }