Как я могу сделать сетку кликабельных изображений из списка данных в WPF?
-
01-10-2019 - |
Вопрос
Я опытный программист C и Java, но абсолютный WPF Newbie.
Я создаю приложение Kiosk, которое отобразит список изображений продуктов, которые пользователь нажимает, чтобы увидеть детали продукта и, возможно, разместить заказ.
Я пытаюсь структурировать свое приложение с основой MVVM, потому что я привык к преимуществам структуры и испытаний.
Интересно, в чем самый естественный способ создать сетку кликабельных изображений, которые заполнят экран слева направо, сверху вниз (или на другую сторону, у меня нет точных требований).
Любое изображение должно быть связано с объектом, который станет током и отображаться на следующем экране. Спасибо за вашу помощь.
Решение
OK! Послушай! Вот как ты это делаешь! :) 1) Используйте itemsControl вместе с униформой, чтобы получить автоматическую авацию
<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) Заполните элементыControl с данными с вашего 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");
}
Тадаааа!
Другие советы
Я немного изыскал код. Вот объявление пространства имен
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;
}
В ViewModel Добавить ObservableList<ClickableImage> m_Images
как государственная собственность. В XAML используют ListView
для отображения ClickableImage
Отказ Создать DataTemplate для ClickableImage
С изображением и поднятой командой Uppon нажмите.
На 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;
}