WinRT ListView and ExpanderView issues

Question

After, what I thought was a successful porting of Windows Phone toolkit ExpanderView to WinRT, I noticed that it not working 100% as it should.

Here is what i'm trying to do:-

I have a ListView with the ItemsSource being databound, inside the ItemTemplate of this ListView there is a ExpanderView which I port???!!! The idea is that, I want the expander view to expand when I tap on the ListView item.

This per say, is happening BUT when the ExpanderView expands, it overlap the next ListView item, i.e ListViewItem Height is not changing. Why is that I really don't know. Been trying every possible idea I came up with to solve this but in vain :(

Can anyone helps me and guide me in the right direction?

Below is a link to a simple example (VS project with all the necessary code) to demo the problem Simple Universal App to demo the problem

Thanks in advance

I notice in your demo that your ExpanderView's ItemTemplate has a base element of a ListViewItem. Is there a reason for this? Have you tried it without it? — Nate Diamond
I don't think it is actually. I checked the WPToolkit code and it was the same there. — Nate Diamond
@ajitsunny asks "I am also trying same in code and facing multiple errors. It is taking more memory. Application is crashing after loading around 200+ records in ExpanderView. Can you share your code to ajit.net2 at gmail com, so that I can review that and identify the issue." — drs
@DreamNet could you provide the final solution? The link in your question is no longer working — Igor Kulman

Nate Diamond Nate Diamond · Accepted Answer · 2014-06-06T20:39:31

There are quite a few places where you have animations that are making layout changes. These animations are very UI-thread heavy, so require the property EnableDependentAnimations to be set to True. You can find more out about it here. You will likely need to go into the styles and manually change the VisualStates to make this change. One such example is:

In your ExpanderResource.xaml:

<VisualStateGroup x:Name="ExpansionStates">
    <VisualStateGroup.Transitions>
        <VisualTransition From="Collapsed"
                          GeneratedDuration="0:0:0.15" To="Expanded">
            <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas" EnableDependentAnimation="True">
                    <EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.00" Value="0" />
                    <EasingDoubleKeyFrame x:Name="CollapsedToExpandedKeyFrame" EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.15" Value="1" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </VisualTransition>
    </VisualStateGroup.Transitions>
</VisualStateGroup>

Note that the DoubleAnimationUsingKeyFrames targetting (FrameworkElement.Height) requires EnableDependentAnimations="True", as this affects the layout.

This is not the only place in that file that needs to be fixed. Further, I don't think it will solve all of your layout problems. It will get it property expanding the layout though.

WinRT ListView and ExpanderView issues

2 Answers