CODEWITHSUNDEEP
c#wpfexpander
Lyndon Broz Tonelete
Lyndon Broz Tonelete

Reputation: 51

Expand and Collapse a WPF Expander

I have two Expanders in a DockPanel control, the first Expander that is at the top is set to isExpanded true while the other Expander is not.

I just want the second Expander to go up whenever the first Expander is set to isExpanded false in run time...

Here is my XAML code :

<DockPanel LastChildFill="False" Margin="0,26,0,0" Background="#FF552D2D" HorizontalAlignment="Left" Width="149">
        <StackPanel ScrollViewer.VerticalScrollBarVisibility="Auto">
            <Expander x:Name="AdminManage" Header="Manage" Margin="0" Foreground="#FF14D0EE" Height="198" IsExpanded="True" Collapsed="AdminManage_Collapsed" Width="544">
                <StackPanel x:Name="AdminStackPanel" Height="177" Margin="0,0,-2,0">
                    <Button Content="" Background="#FF552D2D" BorderBrush="{x:Null}" BorderThickness="0" Opacity="0.5" Foreground="White" VerticalAlignment="Center" Margin="23,0,0,0" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Width="124"/>
                    <Button Content="" Margin="23,0,0,0" Background="#FF552D2D" BorderBrush="{x:Null}" BorderThickness="0" Opacity="0.5" Foreground="White" VerticalAlignment="Center" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Width="124"/>
                    <Button Content="" Margin="23,0,0,0" Background="#FF552D2D" BorderBrush="{x:Null}" BorderThickness="0" Opacity="0.5" Foreground="White" VerticalAlignment="Center" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Width="124"/>
                    <Button Content="" Margin="23,0,0,0" Background="#FF552D2D" BorderBrush="{x:Null}" BorderThickness="0" Opacity="0.5" Foreground="White" VerticalAlignment="Center" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Width="124"/>
                    <Button Content="" Margin="23,0,0,0" Background="#FF552D2D" BorderBrush="{x:Null}" BorderThickness="0" Opacity="0.5" Foreground="White" VerticalAlignment="Center" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Width="124"/>
                    <Button Content="" Margin="23,0,0,0" Background="#FF552D2D" BorderBrush="{x:Null}" BorderThickness="0" Opacity="0.5" Foreground="White" VerticalAlignment="Center" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Width="124"/>
                    <Button Content="" Margin="23,0,0,0" Background="#FF552D2D" BorderBrush="{x:Null}" BorderThickness="0" Opacity="0.5" Foreground="White" VerticalAlignment="Center" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Width="124"/>
                    <Button Content="" Margin="23,0,0,0" Background="#FF552D2D" BorderBrush="{x:Null}" BorderThickness="0" Opacity="0.5" Foreground="White" VerticalAlignment="Center" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Width="124"/>
                </StackPanel>
            </Expander>
            <Expander Header="Account" Margin="0" VerticalAlignment="Top" Foreground="#FF14D0EE" Height="66">
                <StackPanel Height="44" Margin="0,0,-2,0">
                    <Button Content="" Margin="23,0,0,0" Background="#FF552D2D" BorderBrush="{x:Null}" BorderThickness="0" Opacity="0.5" Foreground="White" VerticalAlignment="Center" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Width="124"/>
                    <Button Content="" Margin="23,0,0,0" Background="#FF552D2D" BorderBrush="{x:Null}" BorderThickness="0" Opacity="0.5" Foreground="White" VerticalAlignment="Center" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Width="124"/>
                </StackPanel>
            </Expander>
        </StackPanel>
    </DockPanel>

Upvotes: 0

Views: 3368

Answers (2)

Jamaxack
Jamaxack

Reputation: 2460

Remove your Height property from AdminManage Expander, i test it it will work like expected

Upvotes: 3

Vignesh.N
Vignesh.N

Reputation: 2666

By go below do you mean to expand the expander ?
If so, you can do a element binding like below. You also need a converter to invert the Boolean value of the first expander.

            <Expander Header="Account" Margin="0" VerticalAlignment="Top" Foreground="#FF14D0EE" Height="66" 
IsExpanded="{Binding IsExpanded, ElementName=AdminManage, Converter={StaticResource InvertBooleanConverter}"
                <StackPanel Height="44" Margin="0,0,-2,0">
                 <!-- your content here -->
                </StackPanel>
            </Expander>

Else if you meant to interchange their positions you would want to add the expanders inside a Grid instead of a StackPanel and change the attached Grid.Row property of the expanders whenever IsExpanded changes

Upvotes: 1

Related Questions