Animate a side menu in WPF

Navigation
2
Hello, I am now entering the WPF world (I come from MVC), and I have a question: I am trying to animate an expandable menu, that is, when the user clicks the button, it expands and when it clicks it again it hides.

I even managed to do the animation, but when the expandable menu appears, it pushes the component next to it.

My question is: How to animate a DockPanel without "pushing" the one on the side, if we use web terms, my question is if you have to leave a DockPanel as "absolute"?

Below is the XAML eas 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>

    
asked by anonymous 01.06.2017 / 20:15

1 answer

2

DockPanel does not have the ZIndex property, which would allow you to set the relevance index (I could not think of any other way to explain) of the component in the layout, much like the web.

Replace the DockPanel with a Grid, for example, and use ZIndex to set the relevance of your menu over other elements.

    
01.06.2017 / 21:21
Run program in a certain folder in IIS Update on more than one line