具有单选和单击取消选择的列表框...? [英] ListBox with single select and also unselect on click...?

问题描述

我需要一个在第一次单击时选择并在第二次单击时取消选择的列表框，以便在任何时候只选择零个或一个项目.

I need a listbox that selects on first click and un-selects on second click, so that only zero or one item is selected at any time.

当您按住 crtl 时，选择/取消选择是在列表框中实现的(使用 SelectionMode="Single")，但不幸的是，我的用户都不会知道这一点.

The select/unselect is implemented in the listbox (with SelectionMode="Single") when you hold down crtl, but unfortunately, none of my users can be expected to know that.

使用 SelectionMode="Multiple" 我们拥有我想要的确切功能，除了您可以选择多个项目...

With SelectionMode="Multiple" we have the exact functionality I want, except that you can select more than one item...

更多背景:我希望用户首先选择要登录的安装，然后提供凭据(以及其他一些选择)

More background: I want the user to first choose which installation to log into, then to give credentials (and some other choices)

为了实现这一点，我使用了一个包含扩展内容的列表框.为了帮助展开，我在列表框的左侧做了一个三角形，在未展开时指向右侧，当您选择列表框项时变为向下.

To achieve this I have used a listbox with expanding content. To aid the expansion I have on the left side of the listboxitem made a triangle that points right when unexpanded that turns to point down when you have selected the listbox item.

因此，首先用户会看到安装列表，然后，当他通过选择它来选择他想要的项目时，列表框项目会扩展到他需要输入的其余信息.它非常好，而且效果很好，但测试报告说他们希望再次单击三角形以取消选择(从而折叠展开的部分).我必须承认我点击了¤%&箭头也一样，期望动作会导致崩溃... :-(

So, first the user see the list over the installations, and then, when he has chosen the item he wants by selecting it, the listboxitem expands to the rest of the info he need to enter. It's quite nice, and works well, but testing reports that they want a second click to the triangle to unselect (and thus collapse the expanded section). And I must admit that I have clicked the ¤%& arrow too, expecting the action to result in a collapse... :-(

有人知道如何实现这一点(最好没有代码)?

Anyone has an idea how this can be achieved (preferably without code behind)?

推荐答案

试试看:

您使用 ToggleButton 作为详细内容的扩展器".您可以绑定到项目的 IsSelected 属性的切换按钮的IsChecked"属性

you use a ToggleButton as the "Expander" of the detailed content. The "IsChecked" Property of the toggle Button you can bind to the IsSelected Property of the item

这里是代码:

<ListBox SelectionMode="Single">
   <ListBox.ItemsSource>
      <x:Array Type="{x:Type sys:String}">
         <sys:String>test1</sys:String>
         <sys:String>test2</sys:String>
         <sys:String>test3</sys:String>
         <sys:String>test4</sys:String>
         <sys:String>test5</sys:String>
         <sys:String>test6</sys:String>
      </x:Array>
   </ListBox.ItemsSource>
   <ListBox.ItemTemplate>
      <DataTemplate>
         <StackPanel Orientation="Horizontal">
            <ToggleButton IsChecked="{Binding 
                          RelativeSource={RelativeSource FindAncestor, 
                          AncestorType={x:Type ListBoxItem}},
                          Path=IsSelected}"
            >btn</ToggleButton>
         </StackPanel>
      </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

它是如何工作的:在 Listbox 中只能选择一项.当我们选择一个项目时，Toggler 会扩展，因为他的 IsChecked 绑定到他的父 ListBoxItem 的 ListBoxItem.IsSelected(ListBoxItem 是一个控件，它被包裹在每个项目的内容周围).由于 selectionMode 是单一的，一旦另一个项目被选中，就会发生以下情况:

how it works: In the Listbox can only one item be selected. As we select an item the Toggler gets expanded cause his IsChecked is bound to ListBoxItem.IsSelected (ListBoxItem is a Control which gets wrapped around the Content of each Item) of his parent ListBoxItem. As the selectionMode is single as soon as another item gets selected the following happens:

• 取消选择实际选择的项目
• 通过绑定，Toggler 也会被取消选中
• 选择新项目
• 新项目切换器通过其绑定进行检查

如果只有实际选择的项目的切换器未被选中，则项目通过绑定取消选择自身...

and if just the actually selected item's toggler gets unchecked the item deselects itself through the binding...

这篇关于具有单选和单击取消选择的列表框...?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！