Closing just one expander within another expander in WPF/ VB.NET

Question

First post here so sorry if I mess something up/forget something. I'm working in Visual Studio 2010 with a WPF application and am using VB.NET.

So I have a parent expander that contains a grid with two controls: another expander and another grid. I have written some code behind to cause each expander to become invisible when it is collapsed or closed (among a few other things), and to change color/ become visible when it is expanded/opened. I also have a few buttons placed in other areas that accomplish the same tasks. My problem is that when I collapse the 2nd expander, the 1st (parent) expander also closes/ becomes invisible. However, a button that is used to collapse the 2nd expander works perfectly. Here is my relevant code (hopefully I'm formatting this right):

XAML

    <Expander Name="Expander1" Visibility="Hidden" >
        <Grid >
            <Grid.RowDefinitions >
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Expander Name="Expander2" Visibility="Hidden" >
                 <Content ...>
            </Expander>
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="20" />
                </Grid.RowDefinitions>
                <Content... />
            </Grid>
        </Grid>
    </Expander>

VB.NET

    Private Sub Expander2_Expanded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Expander2.Expanded

    Expander2.Background = Brushes.PaleTurquoise
    Expander2.BorderBrush = Brushes.Black

End Sub

    Private Sub Expander2_Collapsed(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Expander2.Collapsed

    Expander2.IsExpanded = False
    Expander2.Background = Brushes.Transparent
    Expander2.BorderBrush = Brushes.Transparent
    Expander2.Visibility = Windows.Visibility.Visible
    ButtonA7.Visibility = Windows.Visibility.Visible
    Expander1.IsExpanded = True
    Expander1.Background = Brushes.PaleTurquoise
    Expander1.BorderBrush = Brushes.Black
    Expander1.Visibility = Windows.Visibility.Visible

End Sub

    Private Sub Expander1_Expanded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Expander1.Expanded

    Expander1.Background = Brushes.PaleTurquoise
    Expander1.BorderBrush = Brushes.Black

End Sub

    Private Sub Expander1_Collapsed(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Expander1.Collapsed

    Expander1.Background = Brushes.Transparent
    Expander1.BorderBrush = Brushes.Transparent
    Expander1.Visibility = Windows.Visibility.Hidden
    ButtonA7.Visibility = Windows.Visibility.Visible

End Sub

Dont worry about all the buttons in the code, the buttons all work fine. In fact, one button is suppose to do the EXACT same thing as collapsing the expander, and it works properly. I just need the same thing to happen when you click on the actual expander to collapse it. Here is the code for the button so you see it is the same:

    Private Sub Button_Click_2(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

    Expander2.IsExpanded = False
    Expander2.Background = Brushes.Transparent
    Expander2.BorderBrush = Brushes.Transparent
    Expander2.Visibility = Windows.Visibility.Visible
    Expander1.IsExpanded = True
    Expander1.Background = Brushes.PaleTurquoise
    Expander1.BorderBrush = Brushes.Black
    Expander1.Visibility = Windows.Visibility.Visible
    ButtonA7.Visibility = Windows.Visibility.Visible

End Sub

Thank you so much for any help, I really appreciate it!

EDIT: Alternatively, if there is an easy way (I am VERY new to WPF... ~1week) to hide/ get rid of the header, that could work too. But I would prefer it the other way where I tried before, if possible. Thanks!

Try putting the Expander2 and the Grid in the Grid in a Row and Cell. — paparazzo
Also, remove the "Expander2.IsExpanded = False" from the Expander2_Collapsed Sub. — APrough
@Blam Yeh, I have Expander 2 in Row 0 and the Grid in Row1, so that when Expander 2 is expanded, the Grid is pushed downward. Sorry should have included that, thanks for the response though! — user2509180
@APrough I have tried playing around with the code there, in fact if I remove the entire section of code for the Expander2_Collapsed Sub, the same thing occurs in that when I collapse Expander 2, Expander 1 also closes. In fact -- even when I change the code so that Expander2.IsExpanded = True, and so that it Expander2 should stay visible, the same thing STILL happens. So confused haha.. Thanks for the response! — user2509180
There is a lot there. If you reduce it to the simplest code to reproduce the problem you are going to get more and better responses. — paparazzo

LPL LPL · Accepted Answer · 2013-06-21T15:24:10

Expander.Collapsed Event has routing strategy Bubbling. Mark event as handled before it reaches Expander1 and all should be okay.

Private Sub Expander2_Collapsed(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Expander2.Collapsed
    ...
    e.Handled = True
End Sub

Closing just one expander within another expander in WPF/ VB.NET

1 Answers