9

The application I'm developing has a kind of accordion made of expanders but each exapnder acts independently rather than only allowing a single open item at a time. Each expander is related to an item in a collection in the view model.

My currently solution is to use a listbox and then bind the lists itemsource to the collection and have an item template render the expander and the exapnders contents.

The problem is that the listbox treats each expander as an item (obviously) and allows selection and highlighting. Highlighting is a little ugly and could be disabled, but the selection causes me some issues because it causes the list to scroll to show as much of the expanded expander as possible.

Is there a WPF control that is a little like a stackpanel (perhaps) that would allow me to bind the contained controls using item templating but without the selection and highlighting?

enter image description here

            <ListBox Grid.Row="0" Grid.Column="0" Width="Auto" SelectionMode="Single" ItemsSource="{Binding Path=MeasurementSources}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Expander  Header="{Binding Name}" IsEnabled="{Binding Available}">
                        <ListBox Width="Auto" SelectionMode="Single"
                                ItemsSource="{Binding Path=Measurements}"
                                SelectedItem="{Binding Path=SelectedMeasurement}">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <WrapPanel>
                                        <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                                        <TextBlock Text=" "/>
                                        <TextBlock Text="{Binding Created}"/>
                                    </WrapPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Expander>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
naskew
  • 2,091
  • 1
  • 19
  • 20
  • Refer this link, you can hide selection of listbox like belowhttp://stackoverflow.com/questions/1398559/there-is-no-listbox-selectionmode-none-is-there-another-way-to-disable-select – Sivakumar Jul 25 '13 at 08:12
  • 7
    I 'm not sure what exactly you are looking for, but [`ItemsControl`](http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.aspx) might be it. – Jon Jul 25 '13 at 08:12
  • Jon, that's just what I needed. I've changed the list to a itemscontrol (which was not shown in my toolbox BTW) and now my expanders work the way I wanted. – naskew Jul 25 '13 at 08:45

3 Answers3

28

If you want List-like capabilities without selection capabilities, you should use an ItemsControl - incidentally the base class of Selector which in turn is the base class of ListBox

The whole thing then just becomes

<ItemsControl Width="Auto" ItemsSource="{Binding Measurements}"
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <WrapPanel>
        <TextBlock Text="{Binding Name}" FontWeight="Bold" />
        <TextBlock Text=" "/>
        <TextBlock Text="{Binding Created}"/>
      </WrapPanel>
    </DataTemplate>
 </ItemsControl.ItemTemplate>
</ItemsControl>

Obviously, you cannot bind a selected item in this case.

flq
  • 22,247
  • 8
  • 55
  • 77
1

This is a useful piece of information that I had not realised.

http://msdn.microsoft.com/library/windows/apps/hh780657.aspx

Note ItemsControl is the base class for several common collection controls, including ListView, GridView, FlipView, ListBox, and ComboBox controls. These examples use the ListView and GridView controls, but the info applies generally to ItemsControls.

In other words using the ItemsControl really is the way to solve my issue because using a ListBox and then trying to disable the highlight and the selection functionality really is turning it back into it's own base class.

naskew
  • 2,091
  • 1
  • 19
  • 20
0

The best solution is for me:

 <Style TargetType="{x:Type ListBoxItem}">
      <Style.Resources>
          <!-- With focus -->
          <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
                                 Color="Transparent" />
          <!-- Without focus -->
          <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
                                 Color="Transparent" />
          <!-- Text foreground -->
          <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
                                 Color="Black" />
      </Style.Resources>
      <Setter Property="FocusVisualStyle" Value="{x:Null}"></Setter>
</Style>

and I found it few months ago somwhere on stackoverflow :)

Mateusz Dembski
  • 427
  • 1
  • 5
  • 15
  • Mateusz, I guess that could be a solution but I prefer the one proposed by Jon in which I use an itemscontrol. It simply gives me all the behaviour I need without the need to disable the behaviours I do not need. But thanks for your reply. – naskew Jul 25 '13 at 08:47