CODEWITHSUNDEEP
windows-runtimewinrt-xamlwin-universal-app
DreamNet
DreamNet

Reputation: 627

WinRT ListView and ExpanderView issues

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

Upvotes: 1

Views: 657

Answers (2)

Nate Diamond
Nate Diamond

Reputation: 5575

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.

Upvotes: 3

Jerry Nixon
Jerry Nixon

Reputation: 31813

Be sure you are using a stackpanel as your panel.

<ListView>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

Best of luck!

Upvotes: 0

Related Questions