Animate a side menu in WPF

Question

Hello, I’m now entering the world WPF (I come from MVC), and I’m with a question: I’m trying to animate an expandable menu, IE, when the user clicks the button, it expands and when you click again it hides.

I even managed to carry out the animation, but when the expandable menu appears, it pushes the component that is situated next to it.

My question is: How to animate a Dockpanel without "pushing" the side, if we use web terms, my question is whether it has to leave a Dockpanel as "Absolute"?

Below follows the XAML and Prints:

<Storyboard x:Key="sbShowMenu">
        <ThicknessAnimation Storyboard.TargetProperty="Margin" From="-150,43,0,0" To="0,43,0,0" DecelerationRatio="0.9" Duration="0:0:0.3"/>
    </Storyboard>

    <Storyboard x:Key="sbHideMenu">
        <ThicknessAnimation Storyboard.TargetProperty="Margin" From="0,43,0,0" To="-150,43,0,0" DecelerationRatio=".9" Duration="0:0:0.3"/>
    </Storyboard>
</Window.Resources>

<DockPanel x:Name="dockPanel1">
    <!--Inicio BarraTitulo-->
    <DockPanel DockPanel.Dock="Top" Background="#FF26A896" Height="30px">
        <StackPanel DockPanel.Dock="Left" VerticalAlignment="Center" >
            <TextBlock FontFamily="Roboto" FontSize="12px" Foreground="#fff" Margin="10,0,0,0">
                App Teste
            </TextBlock>
        </StackPanel>

        <StackPanel DockPanel.Dock="Right" HorizontalAlignment="Right" Orientation="Horizontal">
            <Button Name="CloseButton" Style="{StaticResource CloseButton}" Click="CloseButton_Click">
                <Image Source="Imgs/icons/Delete_64px.png" Margin="5" />
            </Button>
        </StackPanel>
    </DockPanel>
    <!--Fim BarraTitulo-->

    <!--Inicio Menu-->
    <DockPanel DockPanel.Dock="Left" Width="43" Background="#FF222222" Name="Nav" Height="Auto" Panel.ZIndex="2">
        <StackPanel DockPanel.Dock="Top" Orientation="Vertical">
            <Button Background="#FF26A896" BorderThickness="0" Click="BtnToggleMenu_Click" Name="BtnToggleMenu">
                <Image Source="Imgs/icons/Menu_100px.png" Stretch="Fill" Margin="10" />
            </Button>
            <Button Background="Transparent" BorderThickness="0">
                <Image Source="Imgs/icons/Home_64px.png" Stretch="Fill" Margin="10" />
            </Button>
        </StackPanel>

        <StackPanel DockPanel.Dock="Bottom" VerticalAlignment="Bottom">
            <Button Background="Transparent" BorderThickness="0">
                <Image  Stretch="Fill" Margin="10" Source="Settings_64px.png" />
            </Button>
        </StackPanel>
    </DockPanel>
    <!--Fim Menu-->

    <!--Inicio Menu Expansivel-->
    <DockPanel Name="NavExt" DockPanel.Dock="Left" Panel.ZIndex="1" Margin="-150,43,0,0" HorizontalAlignment="Left"  Background="#222" Width="150">
        <StackPanel DockPanel.Dock="Top" Orientation="Vertical" >
            <Button Background="Transparent" BorderThickness="0" Height="43" Foreground="#fff" HorizontalContentAlignment="Left" Padding="15,0,0,0" FontFamily="Roboto" FontSize="14">
                Pagina Inicial
            </Button>
        </StackPanel>
        <StackPanel DockPanel.Dock="Bottom" Orientation="Vertical" VerticalAlignment="Bottom">
            <Button Background="Transparent" BorderThickness="0" Height="43" Foreground="#fff" HorizontalContentAlignment="Left" Padding="15,0,0,0" FontFamily="Roboto" FontSize="14">
                Configurações
            </Button>
        </StackPanel>
    </DockPanel>
    <!--Fim Menu Expansivel-->

    <!--Inicio MainContainer-->
    <DockPanel Panel.ZIndex="2" Margin="0,0,0,0" x:Name="MainContainer">
        <StackPanel x:Name="dockPanel" DockPanel.Dock="Top" Height="86" Background="#FFF" Orientation="Vertical">
            <Border Height="43">
                <TextBlock Style="{StaticResource MenuTitle}" >
                    Pagina Inicial
                </TextBlock>
            </Border>

            <StackPanel Height="43" Orientation="Horizontal" Margin="15,0,0,0">
                <TextBlock Padding="0,0,10,0" Style="{StaticResource SubMenuItens}">
                    Operações
                </TextBlock>
                <TextBlock Style="{StaticResource SubMenuItens}">
                    Estatísticas
                </TextBlock>
            </StackPanel>
        </StackPanel>
        <UserControl Name="MainContent"></UserControl>
    </DockPanel>
    <!--Fim MainContainer-->

</DockPanel>

Answer 1

Dockpanel does not have the Zindex property, which would allow you to define the relevance index (I couldn’t think of another way to explain) of the component in the layout, just like the web.

Replace the Dockpanel with a Grid, for example, and use Zindex to define the relevance of your menu over the other elements.