如何从WPF中的数据列表中制作可点击图像的网格?
-
01-10-2019 - |
题
我是经验丰富的C和Java程序员,但绝对是WPF Newbie。
我正在创建一个售货亭应用程序,该应用程序将显示用户将单击的产品图像列表,以查看产品详细信息并可能下订单。
我正在尝试使用MVVM基金会构建我的应用程序,因为我已经习惯了结构和测试的好处。
我想知道创建可点击图像网格的最自然方法是什么,该网格将填充从左到右,上到底的屏幕(或另一方面,我没有确切的要求)。
任何图像都应绑定到将变为最新并显示在下一个屏幕上的对象。谢谢你的帮助。
解决方案
好的!听着!这就是您的方式! :) 1)将itemscontrol与SoniformerGrid一起使用自动净化
<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)填充来自ViewModel的数据的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!
其他提示
我已经完善了代码。这是名称空间声明
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;
}
不隶属于 StackOverflow