Binding Single Item of Collection

Question

Я просто изучаю основные понятия WPF и XAML, исходящие из фона C++, поэтому некоторые из них немного чужды мне. Я использую 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> 

Это показывает две текстовые поля, содержащие «клубника» и «Активы \ Item01.png» соответственно, вместе с изображением и кнопки, содержащей текст «Следующий продукт». Как вы можете видеть, я связал сборник «photoDataSource» с родительской сеткой. При запуске отображается первый элемент в коллекции.

Как я могу вызвать кнопку для отображения следующего элемента в коллекции (и цикла) во время выполнения?

Я не собираюсь делать это с любым кодом, поскольку я не изменяю ни одну из данных, только какой элемент отображается. Но, возможно, я собираюсь сделать это неправильно?

В идеале после этого примера я хочу полностью удалить кнопку и автоматически изменить записи после завершения анимации раскадровки (с помощью триггера 'StoryboardCompletedTrigger').

Answer 1

Совершенно верно, не желая использовать код позади. Однако я бы рекомендовал реализовать ViewModel против вашего окна, чтобы получить то, что вы хотите достичь.

В вашей модели представления вы должны иметь ObservableCollection вашего объекта Фото и другое свойство, чтобы указать одну фотографию называют SelectedPhoto, как показано ниже:

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 Source="{Binding Source={StaticResource myViewModel}, Path=SelectedPhoto.Image}"/> 

Надеюсь, это имеет смысл для вас и оказало некоторую помощь.