Wie kann ich ein Raster von anklickbare Bildern aus einer Liste von Daten in WPF machen?

Question

Ich bin ein erfahrener C und Java-Programmierer, sondern ein absoluter WPF-Neuling.

Ich bin eine Kiosk-Anwendung erstellen, die eine Liste von Bildern von Produkten angezeigt werden, dass der Anwender Produktdetails klickt, um zu sehen und vielleicht einen Auftrag vergeben.

Ich versuche, meine app mit MVVM Foundation zu strukturieren, weil ich zu den Vorteilen der Struktur und Tests verwendet werde.

Ich frage mich, was die natürlichste Art und Weise ist ein Raster von anklickbare Bilder zu erzeugen, die den Bildschirm links nach rechts füllt, von oben nach unten (oder umgekehrt, ich habe keine genauen Anforderungen).

Jedes Bild sollte an ein Objekt gebunden werden, die Strom werden wird und in dem nächsten Bildschirm angezeigt werden. Vielen Dank für Ihre Hilfe.

Answer 1

OK! Hör zu! Hier ist, wie Sie das tun! :) 1) Verwenden Sie Items zusammen mit Uniform erhalten automatisches aligment

<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 mit Daten aus Ihrem 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

Ich habe ein wenig den Code verfeinert. Hier ist die Namespace-Deklaration

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

die Datacontext

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

und die Uniform

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

Hier ist der C # -Code in dem View-Modell

    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

In Ansichtsmodell hinzufügen ObservableList<ClickableImage> m_Images als öffentliches Eigentum. In XAML verwenden ListView zur Anzeige ClickableImage. Erstellen Sie für Datatemplate ClickableImage mit Bild und erhöht Befehl uppon klicken.

Auf der XAML:

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

Auf dem Ansichtsmodell:

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