Как я могу сделать сетку кликабельных изображений из списка данных в WPF? - PullRequest
Новая
       31

Как я могу сделать сетку кликабельных изображений из списка данных в WPF?

1 голос
/ 27 апреля 2010

Я опытный программист на C и Java, но абсолютный новичок в WPF.

Я создаю приложение для киоска, в котором отображается список изображений товаров, на которые пользователь нажимает, чтобы просмотреть сведения о товаре и, возможно, разместить заказ.

Я пытаюсь структурировать свое приложение с помощью MVVM Foundation, потому что я привык к преимуществам структуры и тестов.

Интересно, какой самый естественный способ создать сетку интерактивных изображений, которые будут заполнять экран слева направо, сверху вниз (или наоборот, у меня нет точных требований).

Любое изображение должно быть привязано к объекту, который станет текущим и будет отображаться на следующем экране. Спасибо за вашу помощь.

Ответы [ 3 ]

4 голосов
/ 28 апреля 2010

OK! Послушай! Вот как ты это делаешь! :) 1) Используйте ItemsControl вместе с UniformGrid, чтобы получить автоматическую привязку 

<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) Заполните ItemsControl данными из вашей модели представления 

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

3 голосов
/ 05 мая 2010

Я немного усовершенствовал код. Вот объявление пространства имен 

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

DataContext 

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

и равномерная сетка 

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

вот код C # в представлении модели 

    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;
    }
1 голос
/ 27 апреля 2010

В ViewModel добавьте ObservableList<ClickableImage> m_Images как публичное свойство. В XAML используйте ListView для отображения ClickableImage. Создайте шаблон данных для ClickableImage с изображением и поднятой командой после нажатия.

В XAML: 

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

На ViewModel: 

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