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 assaisonné, mais un débutant absolu WPF.

Je suis création d'une application de kiosque qui affiche une liste d'images de produits que l'utilisateur cliquera 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 façon la plus naturelle pour créer une grille d'images cliquables qui rempliront l'écran de gauche à droite, de haut en bas (ou l'inverse, je n'ai pas les exigences exactes).

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 ça! :) 1) Utiliser 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

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>

voici 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;
    }

Answer 3

Dans ViewModel ajouter ObservableList<ClickableImage> m_Images comme des biens publics. En XAML utiliser ListView pour afficher ClickableImage. Créer DataTemplate pour ClickableImage avec image et commande élevé uppon clic.

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;
}