Question

我刚刚学习了来自C ++背景的WPF和XAML的基本概念，所以其中一些对我来说有些陌生。我正在使用Expression Blend来帮助我掌握XAML。

我正在制作一个在简单的XML数据源中显示记录的基本应用程序：

<photos>
  <photo>
    <image>Assets\Item01.png</image>
    <description>Strawberry</description>
  </photo>
  <photo>
    <image>Assets\Item02.png</image>
    <description>Orange</description>
  </photo>
  <photo>
    <image>Assets\Item03.png</image>
    <description>Pineapple</description>
  </photo>
  ...
</photos>

我已将此数据'photoDataSource'绑定到网格并粘贴了一些显示第一条记录的文本框和图像字段。在XAML中：

<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource photoDataSource}}" Margin="0,0,0,1" Background="#FF1D1D1D">
    <Image Height="104" Width="104" Source="{Binding XPath=/photos/photo/image}" Margin="8,62,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <TextBox Height="23" Margin="8,8,6,0" TextWrapping="Wrap" Text="{Binding XPath=/photos/photo/description}" VerticalAlignment="Top"/>
    <TextBox Height="23" Margin="8,35,6,0" TextWrapping="Wrap" Text="{Binding XPath=/photos/photo/image}" VerticalAlignment="Top"/>
    <Button Content="Next Product" Margin="213,97,297,0" Height="44" VerticalAlignment="Top"/>
</Grid>

分别显示两个包含“Strawberry”和“Assets \ Item01.png”的文本框，以及包含文本“Next Product”的图像和按钮。如您所见，我已将集合“photoDataSource”绑定到父Grid。运行时，它会显示集合中的第一个项目。

如何触发按钮在运行时显示集合（和循环）中的下一个项目？

我不打算用任何代码隐藏来执行此操作，因为我没有更改任何数据本身，只显示了哪个项目。但也许我会以错误的方式解决这个问题？

理想情况下，在此示例之后，我将完全删除按钮并在故事板动画完成后自动更改记录（使用触发器'StoryboardCompletedTrigger'）。

Answer 1

非常不想使用背后的代码。但是，我建议您针对Window实现ViewModel以获得您想要的效果。

在您的视图模型中，您应该拥有Photo对象的ObservableCollection和另一个属性，以指定一个名为SelectedPhoto的Photo，如下所示：

public ObservableCollection<Photo> MyPhotos {
  get { return _photos; }
  set { _photos = value;
     if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("Photos"));
  }
}

public Photo SelectedPhoto {
  get { return _photo; }
  set { _photo = value; 
     if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("SelectedPhoto"));
  }
}

然后使用XmlSerialization将Xml加载到ObservableCollection中。然后创建按钮以移动下一个和上一个以绑定到ICommand（也在ViewModel中），以便每次循环或向下循环MyPhotos集合设置SelectedPhoto。

然后你可以在你的Xaml中绑定和Image，如下所示。

<Image Source="{Binding Source={StaticResource myViewModel}, Path=SelectedPhoto.Image}"/>

我希望这对你有所帮助并且有所帮助。

绑定集合的单个项目

1 个答案: