Question

I am using the ExpanderView control available in the Silverlight Toolkit with some custom templates. It all works well, but when the ExpanderView is collapsed, and I click on the area below the Header where an item resides when the ExpanderView is expanded. The click event of that item fires.

How can i fix this? Should I somehow remove the tap commands or remove the ItemPanel when the ExpanderView is collapsed and add it again when it’s being expanded?

<DataTemplate x:Key="CustomItemTemplate">
        <Image delay:LowProfileImageLoader.UriSource="{Binding}" Width="156" Height="95" >
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Tap">
                    <cmd:EventToCommand Command="{Binding Storage.ImageTapCommand, Source={StaticResource Locator}}" CommandParameter="{Binding}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Image>
</DataTemplate>

<toolkit:ExpanderView Grid.Column="1" Header="{Binding}"
                  Expander="{Binding}" IsExpanded="{Binding IsExpanded, Mode=TwoWay}"
                  ItemsSource="{Binding Files}" HeaderTemplate="{StaticResource CustomHeaderTemplate}"
                  ExpanderTemplate="{StaticResource CustomExpanderTemplate}"
                  ItemTemplate="{StaticResource CustomItemTemplate}" >
      <toolkit:ExpanderView.ItemsPanel>
             <ItemsPanelTemplate>
                    <toolkit:WrapPanel />
              </ItemsPanelTemplate>
      </toolkit:ExpanderView.ItemsPanel>
</toolkit:ExpanderView>

Answer 1

You can change the IsHitTestVisible property of the root UIElement for each of your expander items every time the ExpanderView is expanded/collapsed, and also just after initially binding the ExpanderView (hooking up to ExpanderView.LayoutUpdated works fine for that purpose). Here’s an example that fixed the issue for me:

    private void FixExpanderItemsInteractivity(ExpanderView expanderView)
    {
        foreach (var item in expanderView.Items)
        {
            ContentPresenter contentPresenter = expanderView.ItemContainerGenerator.ContainerFromItem(item) as ContentPresenter;

            if (contentPresenter != null)
            {
                UIElement expanderItemRootElement = VisualTreeHelper.GetChild(contentPresenter, 0) as UIElement;
                if(expanderItemRootElement != null)
                {
                    expanderItemRootElement.IsHitTestVisible = expanderView.IsExpanded;
                }
            }
        }
    }

    private void Expander_Expanded(object sender, RoutedEventArgs e)
    {
        FixExpanderItemsInteractivity(sender as ExpanderView);
    }

    private void Expander_Collapsed(object sender, RoutedEventArgs e)
    {
        FixExpanderItemsInteractivity(sender as ExpanderView);
    }

    private void Expander_LayoutUpdated(object sender, EventArgs e)
    {
        FixExpanderItemsInteractivity(sender as ExpanderView);
    }