1

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

我正在创建一个信息亭应用程序,该应用程序将显示产品图像列表,用户将单击该列表以查看产品详细信息并可能下订单。

我正在尝试使用 MVVM Foundation 构建我的应用程序,因为我已经习惯了结构和测试的好处。

我想知道创建可点击图像网格的最自然方法是什么,它将从左到右,从上到下(或相反,我没有确切的要求)填充屏幕。

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

4

3 回答 3

4

好的!听着!这是你如何做到的!:) 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");
}

太棒了!

于 2010-04-28T06:59:42.127 回答
3

我已经对代码进行了一些改进。这是命名空间声明

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

数据上下文

<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;
    }
于 2010-05-05T10:52:02.440 回答
1

在 ViewModel 中添加ObservableList<ClickableImage> m_Images为公共属性。在 XAMLListView中用于显示ClickableImage. 使用图像创建数据模板,ClickableImage并在单击时提出命令。

在 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;
}
于 2010-04-27T08:27:14.343 回答