Expander Control - UWP - xaml

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?

Answer 1

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>