Expander Control - UWP

Question

I have an expander control in my UWP app with the following code:

<Expander
     Header="A"
     IsExpanded =" True">
     <TextBlock
       Text="Content in A"/>
</Expander>
<Expander
     Header="B">
     <TextBlock
       Text="Content in B"/>
</Expander>

Currently expander A is expanded by default and B is closed. However, when I expand B, A is also open. I would like the behavior that if I expand one , the other closes and vice versa. Any suggestions as to how I can achieve this in an MVVM way ? Would i need to use converters here? I looked into Collapse all the expanders and expand one of them by default but most of the solutions happen to be in modifying the code behind. How do i achieve the same if i have a XAML code in Main.xaml and i have a corresponding MainPageViewModel.cs?

Nico Zhu - MSFT Nico Zhu - MSFT · Accepted Answer · 2020-10-05T02:19:20

I would like the behavior that if I expand one , the other closes and vice versa.

For this scenario, you could use OppositConverter to make the other expender close when previous is open.

public class OppositConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
  
        return !(bool)value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return !(bool)value;
    }
}
public class MainPageViewModel : INotifyPropertyChanged
{
    public MainPageViewModel()
    {

    }
    private bool _isExpend;

    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged([CallerMemberName] string name = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
    public bool IsExpend
    {
        get
        {
            return _isExpend;
        }
        set
        {
            _isExpend = value;
            OnPropertyChanged();
        }
    }
}

Usage

<Page.DataContext>
    <local:MainPageViewModel x:Name="ViewModel" />
</Page.DataContext>
<Page.Resources>
    <local:OppositConverter x:Key="OppositConverter" />
</Page.Resources>
<StackPanel>
    <controls:Expander
        x:Name="Expander1"
        Margin="0,0,0,10"
        VerticalAlignment="Top"
        HorizontalContentAlignment="Stretch"
        ExpandDirection="Down"
        Header="This is the header - expander 1"
        IsExpanded="{Binding IsExpend, Mode=TwoWay}">
        <Grid>
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Text="This is the expanded content"
                TextWrapping="Wrap" />
        </Grid>
    </controls:Expander>
    <controls:Expander
        x:Name="Expander2"
        Margin="0,0,0,10"
        VerticalAlignment="Top"
        HorizontalContentAlignment="Stretch"
        ExpandDirection="Down"
        Header="This is the header - expander 2"
        IsExpanded="{Binding IsExpend, Converter={StaticResource OppositConverter}, Mode=TwoWay}">
        <Grid>
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Text="This is the expanded content"
                TextWrapping="Wrap" />
        </Grid>
    </controls:Expander>     
</StackPanel>

Expander Control - UWP

1 Answers