Question

I am trying to create a custom control, which behaves a bit like one of the “rows” in the toolbox in Expression Blend.

When closed, it displays the first of its items, and when the user holds the mouse down over it for a second or so, it “expands” to reveal the other items in a popup excluding the item which is currently selected (the item which was clicked on still remains visible, but is not grouped with the others).

I have managed to make a control which inherits from ContentControl displays one item and then reveals the others when expanded, but the item which is displayed first does not change when one is clicked.

The template is as follows:

<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
    <ContentPresenter Content="{TemplateBinding MainItem}" /> // The item that is seen even when not expanded
    <Popup Name="Popup" Placement="Right" IsOpen="{TemplateBinding IsExpanded}" AllowsTransparency="True" Focusable="False" PopupAnimation="Fade">
        <Border Name="SubmenuBorder" SnapsToDevicePixels="True" BorderThickness="0" >
            <StackPanel Orientation="Horizontal" IsItemsHost="True" /> // The items only seen when expanded
        </Border>
    </Popup>
</Grid>

At the moment, I have to manually set the MainItem in XAML and it is not a member of the Items property of the ContentControl.

Is there a way to achieve this functionality where all items are part of the Items collection and are automatically not shown when an IsSelected property or something is set, and are then shown where the current MainItem is shown when this is the case?

I tried changing it to a Selector and using a filter on the Items to achieve this and binding the first ContentPresenter to the SelectedItem but it didn’t seem to work.

If possible, the order of the items only visible when the control is expanded should be the same as the order in which they are laid out in XAML, with the currently selected item missing.

Thanks

Answer 1

try using the ItemContainerStyle to set the visibility of the selected item to ‘Hidden’. You’d need a BoolToVisibilityConverter (you can write one easily or get one from the WPFToolkit) to get the correct value

<ContentPresenter Content="{Binding ElementName=selector, Path=SelectedItem}" />
<ComboBox x:Name="selector">
    <ComboBox.ItemContainerStyle>
        <Style TargetType="ComboBoxItem">
            <Setter Property="Visibility" Value="{Binding Path=IsSelected, Converter={StaticResource boolToVisibilityConverter}}" />
        </Style>
    </ComboBox.ItemContainerStyle>
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding SomeProperty}" />
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>ComboBoxItem