2

私はちょうど C++ の背景から来る WPF と XAML の基本的な概念を学んでいるので、そのいくつかは私には少し異質です。XAML を理解するために Expression Blend を使用しています。

単純な 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」をそれぞれ含む 2 つのテキスト ボックスが、画像と「次の製品」というテキストを含むボタンとともに表示されます。ご覧のとおり、コレクション「photoDataSource」を親グリッドにバインドしました。実行すると、コレクションの最初のアイテムが表示されます。

実行時にコレクション (およびループ) 内の次のアイテムを表示するボタンをトリガーするにはどうすればよいですか?

データ自体を変更するのではなく、表示される項目だけを変更するので、コード ビハインドでこれを行うつもりはありません。しかし、おそらく私はこれについて間違った方法で進んでいますか？

理想的には、この例の後、ボタンを完全に削除し、ストーリーボード アニメーションが完了した後にレコードを自動的に変更します (トリガーを使用'StoryboardCompletedTrigger')。

4

1 に答える 1

1

コードビハインドを使用したくないのは当然です。ただし、ウィンドウに対して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 Source="{Binding Source={StaticResource myViewModel}, Path=SelectedPhoto.Image}"/>

これがあなたにとって何らかの意味を持ち、助けになったことを願っています.

于 2013-04-15T05:56:12.853 に答える