ExpanderView will not expand from inside XAML

Question

Previously I ported ExpanderView from Windows Phone toolkit to WinRT ExpanderRT, just to notice now that if you have two ExpanderView controls inside a StackPanel or ListView and you want the first expanderView to be expanded from the beginning by setting the IsExpanded property to True, then first expanderView will overlay the second one.

Here is an example:-

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel>
        <local:ExpanderControl 
                           IsExpanded="True"
                           Expander="This is the expander">
            <local:ExpanderControl.Items>
                <Button Content="Yes"/>
                <Button Content="No"/>
            </local:ExpanderControl.Items>
        </local:ExpanderControl>
        <local:ExpanderControl 
                           IsExpanded="False"
                           Expander="This is the expander">
            <ListViewItem>
                <StackPanel Orientation="Horizontal">
                    <Button Content="yes"/>
                    <Button Content="no"/>
                </StackPanel>
            </ListViewItem>
        </local:ExpanderControl>
    </StackPanel>

</Grid>

After few hours trying to debug the ExpanderView control code i found out that this code is firing 4 times

private void OnSizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (_presenter == null) return;
        var parent = _presenter.GetParentByType<ExpanderControl>();
        var gt = parent.TransformToVisual(_presenter);
        var childToParentCoordinates = gt.TransformPoint(new Point(0, 0));
        _presenter.Width = parent.RenderSize.Width + childToParentCoordinates.X;


    }

    private void OnPresenterSizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (null != _itemsCanvas && null != _presenter && IsExpanded)
        {
            _itemsCanvas.Height = _presenter.DesiredSize.Height;
        }
    }

During the first 2 times, the _itemsCanvas has a height of 0. While the third time it has a height of 64 just to be overwriten to 0 by the forth time.

I have not find any reason why this is happening. Anyone here can help?

Answer 1

I have faced similar issues after porting Expander from windows phone toolkit.

To fix this issue, I modified OnPresenterSizeChanged logic

private void OnPresenterSizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (null != _itemsCanvas && null != _presenter && IsExpanded)
        {
            if (double.IsNaN(_itemsCanvas.Height))
            {

                VisualStateManager.GoToState(this, CollapsedState, false);
                UpdateVisualState(true);
            }
            else
            {
                // Already expanded, so we need to update the height of the canvas directly.
                _itemsCanvas.Height = _presenter.DesiredSize.Height;
            }
        }
    }

What is different here is that I check if the item canvas has been rendered before or not based on checking if it's height is Nan, if that's the case then I change visual state to collapse without transition then I call UpdateVisualState(true). else I just update the render height of canvas.

The issue was that the first time UpdateVisualState was called, the content presnter was null.