Multiple Expander have to collapse if ONE is expanded Multiple Expander have to collapse if ONE is expanded wpf wpf

Multiple Expander have to collapse if ONE is expanded


Try out following code:

XAML:

        <StackPanel Name="StackPanel1">            <StackPanel.Resources>                <local:ExpanderToBooleanConverter x:Key="ExpanderToBooleanConverter" />            </StackPanel.Resources>            <Expander Header="Expander 1"                      IsExpanded="{Binding SelectedExpander, Mode=TwoWay, Converter={StaticResource ExpanderToBooleanConverter}, ConverterParameter=1}">                <TextBlock>Expander 1</TextBlock>            </Expander>            <Expander Header="Expander 2"                      IsExpanded="{Binding SelectedExpander, Mode=TwoWay, Converter={StaticResource ExpanderToBooleanConverter}, ConverterParameter=2}">                <TextBlock>Expander 2</TextBlock>            </Expander>            <Expander Header="Expander 3"                      IsExpanded="{Binding SelectedExpander, Mode=TwoWay, Converter={StaticResource ExpanderToBooleanConverter}, ConverterParameter=3}">                <TextBlock>Expander 3</TextBlock>            </Expander>            <Expander Header="Expander 4"                      IsExpanded="{Binding SelectedExpander, Mode=TwoWay, Converter={StaticResource ExpanderToBooleanConverter}, ConverterParameter=4}">                <TextBlock>Expander 4</TextBlock>            </Expander>        </StackPanel>

Converter:

public class ExpanderToBooleanConverter : IValueConverter{    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)    {        return (value == parameter);    }    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)    {        if (System.Convert.ToBoolean(value)) return parameter;        return null;    }}

ViewModel:

public class ExpanderListViewModel{    public Object SelectedExpander { get; set; }}

Initialization

StackPanel1.DataContext = new ExpanderListViewModel();

Explanation:

In XAML we have 4 expanders. They all inherit a ViewModel (of type ExpanderListViewModel) from container StackPanel through DataContext.

They all bind to single property on ViewModel class. And have defined a unique index for themselves using ConverterParameter in binding. That index gets saved in SelectedExpander property whenever you expand an expander. And using that index, the Converter returns true if the stored index matches with given index and false if stored index does not match.

Put a breakpoint in Convert and ConvertBack methods of Converter class and you will see what is going on.


this is how I did it:

1) added a StackPanel and MUST add a name tag attribute (as this is the master).

StackPanel Name="StackPanel1"

2) add as many Expanders as you need (1 to 100's if needed) each MUST have:-

Expanded="Expander_Expanded"

added (notice all have 100% the same wording).

3) no other details need to match on each ( no height's names etc.. needed).

Xaml:

<StackPanel Name="StackPanel1"><Expander Header="Expander 1" Expanded="Expander_Expanded">    <TextBlock>Expander 1</TextBlock></Expander><Expander Header="Expander 2" Expanded="Expander_Expanded">    <TextBlock>Expander 2</TextBlock></Expander><Expander Header="Expander 3" Expanded="Expander_Expanded" >    <TextBlock>Expander 3</TextBlock></Expander><Expander Header="Expander 4" Expanded="Expander_Expanded" >    <TextBlock>Expander 4</TextBlock></Expander>

4) To control the open/close of all "Expanders" on the named "StackPanel1" StackPanel you only need to add the below code once.

VB code-behind:

Private Sub Expander_Expanded(sender As Object, e As RoutedEventArgs)    For Each exp As Expander In StackPanel1.Children        If exp IsNot sender Then            exp.IsExpanded = False        End If    NextEnd Sub

5)Now you can change/add what content, button's, textbox's etc.. you need just do not change 2 things 1, "StackPanel Name" 2, "Expander Expanded" without updating the code-behind else things will not work.

Hope this information is helpful to you.

What's happening?

1) All panels are parents and all controls on that panel are children,

2) All controls are children of a parent panel.

3) A class deals with one call at a time.

4) The class deals with child.

6) The class move to next child.

7) Stops once all children have been asked.

So the pseudo code is like this:

1) Listen for a child’s named x

2) Ask each child in parents list of children

3) If child is not calling then

4) Child is expanded is false

5) End asking that child

6) Move to next child and ask again

7) Until all children have been asked


Just setting the Lost focus seems to be the easiest way to do this.

Xaml:

<Expander LostFocus="CollapseExpander" ExpandDirection="Down" Width="175">    <ListBox Height="265" Margin="0,5,0,10">    </ListBox></Expander>

VB:

Private Sub CollapseExpander(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) sender.IsExpanded = FalseEnd Sub