image - リストボックスの行で単一のアイテムを選択する方法

Question

3枚の画像を連続して表示したいListBox。WrapPanel仮想化が失われるため使用できません。だから私は使用しますVirtualizingStackPanel。

私のListBoxItemテンプレートには、水平方向に 3 つの画像がありStackPanelます。ユーザーが単一の画像をクリックできるようにしたいのですが、ListBoxのデフォルトの動作では全体をクリックすることしかできませんListBoxItem。

どうやってするか ？

Answer 1

行全体を選択したくない場合は、のItemsControl代わりに切り替える必要がありListBoxます。

すべての行で画像を選択できるようにするにはItemTemplate、これItemsControlを画像のコレクションにバインドされたリストボックスに設定します。

動作するはずのサンプルコードを次に示します。

<ItemsControl ItemsSource="{Binding Collection}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <!--THe ItemTemplate is a ListBox of Images-->
            <ListBox>
                <ListBox.ItemTemplate ItemsSource="{Binding Images}">
                    <DataTemplate>
                        <Image Source="{Binding Img}" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </DataTemplate>
    </ItemsControl.ItemTemplate>

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!--This is required to have the scroll-->
    <ItemsControl.Template>
        <ControlTemplate TargetType="ItemsControl">
            <Border>
                <ScrollViewer>
                    <ItemsPresenter/>
                </ScrollViewer>
            </Border>
        </ControlTemplate>
    </ItemsControl.Template>
</ItemsControl>