¿Cómo puedo hacer una cuadrícula de imágenes se puede hacer clic en una lista de datos en WPF?

Question

Soy un programador de C y Java sazonado, pero un novato de WPF absoluta.

Estoy creando una aplicación de kiosco que mostrará una lista de las imágenes de los productos que el usuario haga clic para ver los detalles del producto y tal vez hacer un pedido.

Estoy tratando de estructurar mi aplicación con la Fundación MVVM porque estoy acostumbrado a los beneficios de la estructura y las pruebas.

Me pregunto cuál es la forma más natural para crear una cuadrícula de imágenes se puede hacer clic que llenarán la pantalla de izquierda a derecha y de arriba abajo (o al revés, no tengo requisitos exactos).

Cualquier imagen debe estar enlazado a un objeto que va a ser actual y se mostrará en la pantalla siguiente. Gracias por su ayuda.

Answer 1

OK! ¡Escuchen! Así es cómo se hace eso! :) 1) Uso ItemsControl junto con UniformGrid para conseguir alineamiento automático

<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) Llenar ItemsControl con los datos de su modelo de vista

<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

He depurado un poco el código. Aquí está la declaración de espacio de nombres

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

DataContext

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

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

aquí está el código C # en el modelo de vista

    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

En ViewModel añadir ObservableList<ClickableImage> m_Images como propiedad pública. En XAML utilizar para la visualización de ListView ClickableImage. Crear DataTemplate para ClickableImage con la imagen y el comando planteado uppon clic.

En el XAML:

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

En el modelo de vista:

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