最後の要素の動作が異なるコレクションへのデータ バインディング

Question

これはよくある問題のように思えますが、私の Google-Fu では何もできませんでした。これまでに何千回も質問されたことがある場合は、申し訳ありません。

私はコレクションを持っています、たとえば ObservableCollection<Athlete>. 。そのコレクションを次のように画面上に表示したいと思います。

ジャージー写真] | [ジャージー写真] | [ジャージー写真] | [ジャージー写真

この不自然な例で重要なのは、各画像の間にある小さなバーです。そのバーを差し引くと、 ListBox コレクションにバインドされており、 ItemsPanelTemplate 水平の StackPanel, 、そして、 ItemTemplate 各アイテムに対応するジャージの写真を表示します。問題はありません！

そこで問題は、コレクションの最後の要素以外の任意のグラフィック要素であるバーをどのように追加するかということです。

ありがとう！

Answer 1

@KornMuffin からのリンクで提案されているように、ListBox item の左側にバーを配置できます。

| [ジャージー写真] | [ジャージー写真] | [ジャージー写真] | [ジャージー写真

次に、使用します DataTrigger と {RelativeSource PreviousData} バインディング。前のデータが null の場合に最初のバーを非表示にします。たとえば、私が使用していると仮定します Separator バーを表示するには、このスタイルをセパレータ コントロールに追加して、最初のセパレータを非表示にします。

<Separator.Style>
    <Style TargetType="Separator">
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
                <Setter Property="Visibility" Value="Collapsed"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Separator.Style>