如何从WPF中的数据列表制作可点击图片的网格？

Question

我是一个经验丰富的C和Java程序员，但绝对是WPF新手。

我正在创建一个自助服务终端应用程序，该应用程序将显示用户将点击查看产品详细信息并可能下订单的产品图像列表。

我想用MVVM Foundation构建我的应用程序，因为我习惯于结构和测试的好处。

我不知道什么是最自然的方式来创建一个可点击的图像网格，将从左到右，从上到下填充屏幕（或其他方式，我没有确切的要求）。

任何图像都应绑定到一个对象，该对象将变为当前对象并显示在下一个屏幕中。 感谢您的帮助。

Answer 1

OK！听好了！这是你如何做到的！ :) 1）使用的ItemsControl与UniformGrid合力得到自动aligment从您的视图模型

<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

<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的数据！

Answer 2

在ViewModel中添加ObservableList<ClickableImage> m_Images作为公共属性。 在XAML中使用ListView来显示ClickableImage。 使用Image为ClickableImage创建数据模板，并引发命令uppon单击。

在XAML：

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

在视图模型：

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

Answer 3

我已经细化了一些代码。下面是该命名空间声明

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

DataContext的

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

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

这里的视图模型

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