Bhanuprakash Mankala Bhanuprakash Mankala - 3 months ago 30
C# Question

How to collapse ExpandPanel in window 10 uwp

I am using ExpandPanel to expand and collapse list as follows.

<local:ExpandPanel x:Name="test1" HeaderContent="Test1" Foreground="White" Margin="10,0,0,0" IsExpanded="False">
<local:ExpandPanel.Content>
<TextBlock x:Name="yearlyAstrology" TextWrapping="Wrap"></TextBlock>
</local:ExpandPanel.Content>
</local:ExpandPanel>

<local:ExpandPanel HeaderContent="Test2" Foreground="White" Margin="10,0,0,0" IsExpanded="False">
<local:ExpandPanel.Content>
<TextBlock x:Name="guruAstrology" TextWrapping="Wrap"></TextBlock>
</local:ExpandPanel.Content>
</local:ExpandPanel>


Now, i want to expand one ExpandPanel at a time.
But in this case, if i expand one panel and clicking on the next panel, the first panel is not collapsing. So, both the panels are in expanded state only. That looks irritating.
I have tried in the C# end as follows.

test1.IsExpanded=false;


But it is not working.
I am using Expandanel.cs class as below.

public ExpandPanel()
{
this.DefaultStyleKey = typeof(ExpandPanel);
}

private bool _useTransitions = true;
private VisualState _collapsedState;
private Windows.UI.Xaml.Controls.Primitives.ToggleButton toggleExpander;
private FrameworkElement contentElement;

public static readonly DependencyProperty HeaderContentProperty =
DependencyProperty.Register("HeaderContent", typeof(object),
typeof(ExpandPanel), null);

public static readonly DependencyProperty IsExpandedProperty =
DependencyProperty.Register("IsExpanded", typeof(bool),
typeof(ExpandPanel), new PropertyMetadata(true));

public static readonly DependencyProperty CornerRadiusProperty =
DependencyProperty.Register("CornerRadius", typeof(CornerRadius),
typeof(ExpandPanel), null);

public object HeaderContent
{
get { return GetValue(HeaderContentProperty); }
set { SetValue(HeaderContentProperty, value); }
}

public bool IsExpanded
{
get { return (bool)GetValue(IsExpandedProperty); }
set { SetValue(IsExpandedProperty, value); }
}

public CornerRadius CornerRadius
{
get { return (CornerRadius)GetValue(CornerRadiusProperty); }
set { SetValue(CornerRadiusProperty, value); }
}

private void changeVisualState(bool useTransitions)
{
if (IsExpanded)
{
if (contentElement != null)
{
contentElement.Visibility = Visibility.Visible;
}
VisualStateManager.GoToState(this, "Expanded", useTransitions);
}
else
{
VisualStateManager.GoToState(this, "Collapsed", useTransitions);
_collapsedState = (VisualState)GetTemplateChild("Collapsed");
if (_collapsedState == null)
{
if (contentElement != null)
{
contentElement.Visibility = Visibility.Collapsed;
}
}
}
}

protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
toggleExpander = (Windows.UI.Xaml.Controls.Primitives.ToggleButton)
GetTemplateChild("ExpandCollapseButton");
if (toggleExpander != null)
{
toggleExpander.Click += (object sender, RoutedEventArgs e) =>
{
IsExpanded = !IsExpanded;
toggleExpander.IsChecked = IsExpanded;
changeVisualState(_useTransitions);
};
}
contentElement = (FrameworkElement)GetTemplateChild("Content");
if (contentElement != null)
{
_collapsedState = (VisualState)GetTemplateChild("Collapsed");
if ((_collapsedState != null) && (_collapsedState.Storyboard != null))
{
_collapsedState.Storyboard.Completed += (object sender, object e) =>
{
contentElement.Visibility = Visibility.Collapsed;
};
}
}
changeVisualState(false);
}

Answer

In the given class, the IsExpanded property doesn't affect anything when it's changing. You can add a callback in the dependency property's definition to change the visual state when the property changed:

public static readonly DependencyProperty IsExpandedProperty = 
    DependencyProperty.Register("IsExpanded", typeof(bool), typeof(ExpandPanel), 
        new PropertyMetadata(true, IsExpanded_Changed));

private static void IsExpanded_Changed(DependencyObject sender, DependencyPropertyChangedEventArgs args)
{
    var panel = (ExpandPanel)sender;
    panel.toggleExpander.IsChecked = IsExpanded;
    panel.changeVisualState(false);
}