如何從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; 
    }