nor0x nor0x - 3 months ago 26
C# Question

ExpanderView is expanded after page navigation

I'm using a port of the

WPF
ExpanderView
(ExpanderRT) in my
UWP
app to show expandable headers with items. This works fine when the app is launched for the first time and
MainPage
is initialized. However if I navigate to a new page and then go back to
MainPage
the
ExpanderView
looks like expanded, but not it's not showing the items. It should look the same as it was when
MainPage
was first initialized. I captured a
GIF
to show the behaviour.

This is the
XAML
of the
UserControl
on the
MainPage
;

<ListView x:Name="CategoriesListView" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter ContentMargin="0" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Category">
<expander:ExpanderControl
x:Name="expander_Main"
ItemsSource="{x:Bind childItems}"
Expanded="Expanded" />
</DataTemplate>
</ListView.ItemTemplate>




This is the
EventHandler
which I use for navigation;

private void OnSettingsButtonChecked(object sender, RoutedEventArgs e)
{
ShellSplitView.IsPaneOpen = false;
ViewModel.NavigationService.Navigate(typeof(SettingsPage));
}


If anyone of you knows why the
ExpanderView
has such a weird behavior, please give me a hint - I can provide more of my code if you need.

Capture

[UPDATE]

I noticed that this behavior only occurs, when I run the app on a mobile device (Smartphone or Mobile Windows 10 Emulator). If I execute the app on the local machine the
ExpanderView
works fine. When I use the back button for navigating back to
MainPage
it works as expected - I don't have a clue how to fix this, it's really weird.

Capture on Desktop

Answer

After debugging the whole code of the ExpanderRT control I was able to solve the problem! It's caused by a bug of the original Expander control which was ported over to WinRT

I found out, that the height of _itemsCanvas in the class ExpanderControl.cs is set via this method:

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

This causes that the size of the item container is only applied when the ExpanderView is currently expanded. I simply added the following condition to set the height of the item container to 0 when the ExpanderView is currently not expanded.

else if (null != _itemsCanvas && null != _presenter && !IsExpanded)
{
   _itemsCanvas.Height = 0;
}

I added various improvements to the control to take advantage of new UWP capabilities, so if anyone is interested in a UWP compatible version feel free to contact me.

UPDATE

I created a GitHub Repo for the updated ExpanderControl for UWP

Comments