WPF & C# [Mahapps.Metro] Animating Controls

Question

I'm starting to learn a little bit of WPF and Mahapps.metro, so I'm pretty new with those ones; here the question:

I have a button and two textboxes, the textboxes visibility is hidden when the forms loads, so when the user clicks the button, the textboxes visibility will be visible, but I want the textboxes to appear with that "slide" animation of the form load that Mahapps provides with the MetroWindow.

I tried using TransitioningContentControl but I couldn't make it happen. I would really appreciate your help, thanks.

My XAML:

<Controls:MetroWindow x:Class="practicas.nuevo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:practicas"
        mc:Ignorable="d"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:behaviours="clr-namespace:MahApps.Metro.Behaviours;assembly=MahApps.Metro"
        xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="Reporte Nuevo" Height="300" Width="574.444" Loaded="formload">
    <Controls:MetroWindow.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Purple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseDark.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedTabControl.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Controls:MetroWindow.Resources>
    <Grid>
        <Controls:TransitioningContentControl x:Name="transitioning" Transition="Down"/>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="238,89,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
            <TextBox x:Name="textBox1" HorizontalAlignment="Left" Height="95" Margin="345,51,0,0" TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" VerticalAlignment="Top" Width="211" Controls:TextBoxHelper.Watermark="Hi Im a watermark" Background="#FF7400FF"/>
            <TextBox x:Name="textBox2" HorizontalAlignment="Left" Height="95" Margin="0,51,0,0" TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" VerticalAlignment="Top" Width="211" Controls:TextBoxHelper.Watermark="Hi im another watermark" Background="#FF7400FF"/>
    </Grid>

</Controls:MetroWindow>

EDIT: This method gave me the solution, the only difference is that the control that I used was ContentControl instead of StackPanel, here is my xaml for anyone who wants to make something like this: PS: Marked as an answer, thanks man.

 <Controls:TransitioningContentControl x:Name="transitioning" Transition="Left">
    </Controls:TransitioningContentControl>
    <Controls:TransitioningContentControl x:Name="transitioning2" Transition="Up">
    </Controls:TransitioningContentControl>
    <Controls:TransitioningContentControl x:Name="transitioning3" Transition="Up">
    </Controls:TransitioningContentControl>
    <ContentControl x:Name="panel" Margin="-10,0,0,0" Visibility="Hidden">
        <Canvas x:Name="canvas">
            <Label x:Name="label" Content="Reporte Recibido:" Canvas.Left="10" Canvas.Top="41" Width="112"/>
            <Label x:Name="label2" Content="Acciones a tomar:" Canvas.Left="600" Canvas.Top="41" Background="{x:Null}" RenderTransformOrigin="0.497,0.551"/>
            <Controls:ToggleSwitch x:Name="ToggleSwitch" Style="{StaticResource MahApps.Metro.Styles.ToggleSwitch.Win10}"  Canvas.Left="284" Canvas.Top="122" OnLabel="Confirmado" OffLabel="Por Confirmar" RenderTransformOrigin="0.5,0.5" Visibility="Hidden" Width="140" Checked="switched" Unchecked="unswitched" />
            <Image x:Name="accion" Height="25" Width="33" Canvas.Left="671" Canvas.Top="218" Source="Imagenes/Add-New.png" MouseDown="accionagregar"/>
            <RichTextBox x:Name="RichTextbox1" HorizontalAlignment="Left" Height="154" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" VerticalAlignment="Top" Width="284" Canvas.Left="438" Canvas.Top="64" TextChanged="textchanged" RenderTransformOrigin="0.815,0.541" Background="#FF7400FF" GotFocus="focus">
                <xctk:RichTextBoxFormatBarManager.FormatBar >
                    <xctk:RichTextBoxFormatBar />
                </xctk:RichTextBoxFormatBarManager.FormatBar>
                <FlowDocument/>

            </RichTextBox>


            <RichTextBox x:Name="RichTextbox2" Background="#FF7400FF" Canvas.Top="64" GotFocus="reportefocus" Height="154" Width="274" Canvas.Left="5">


                <xctk:RichTextBoxFormatBarManager.FormatBar >

                    <xctk:RichTextBoxFormatBar />

                </xctk:RichTextBoxFormatBarManager.FormatBar>

                <FlowDocument/>

            </RichTextBox>

            <Rectangle x:Name="reporteimagen" HorizontalAlignment="Left" Height="100" Margin="83,99,0,0" VerticalAlignment="Top" Width="100">

                <Rectangle.Fill>

                    <VisualBrush Visual="{StaticResource appbar_book_open_text}"/>

                </Rectangle.Fill>

            </Rectangle>

            <Rectangle x:Name="accionesimagen" HorizontalAlignment="Left" Height="100" Margin="536,99,0,0" VerticalAlignment="Top" Width="100" >

                <Rectangle.Fill>

                    <VisualBrush Visual="{StaticResource appbar_book_list}"/>

                </Rectangle.Fill>

            </Rectangle>

            <xctk:DateTimePicker x:Name="datetime" Width="162" Canvas.Left="504" Canvas.Top="218" Foreground="White" Format="Custom" FormatString="hh:mm tt" TimeFormat="Custom" TimeFormatString="hh:mm tt" CultureInfo="es-GT" ShowDropDownButton="False" Text="DefaultValue" IsReadOnly="True"/>

            <Image x:Name="image7" Height="27"  Canvas.Left="697" Canvas.Top="6" Width="33" Source="Imagenes/Repeat-All.png" RenderTransformOrigin="0.471,0.596" ToolTip="Reiniciar" MouseDown="reiniciar" Visibility="Hidden"/>

        </Canvas>

    </ContentControl>

    <ContentControl x:Name="panel2" Visibility="Hidden">

        <Canvas>

            <Label x:Name="label5" Content="Reporte Creado Por:" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Canvas.Left="18" Canvas.Top="329" Background="{x:Null}" RenderTransformOrigin="0.497,0.551" Width="128"/>

            <Label x:Name="label6" Content="Correlativo" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Canvas.Left="305" Canvas.Top="329" Background="{x:Null}" RenderTransformOrigin="0.497,0.551" Width="128"/>

            <Label x:Name="label7" Content="Creado En:" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Canvas.Left="592" Canvas.Top="329" Background="{x:Null}" RenderTransformOrigin="0.497,0.551" Width="128"/>

            <TextBox x:Name="textBox3" Height="23" HorizontalContentAlignment="Center" Canvas.Left="305" Canvas.Top="355" Width="128" IsReadOnly="True" Controls:TextBoxHelper.Watermark="Se genera al concluir."/>

            <TextBox x:Name="textBox4" Height="23" HorizontalContentAlignment="Center" Canvas.Left="18" Canvas.Top="355" Width="128" IsReadOnly="True"/>

            <TextBox x:Name="textBox5" Height="23" HorizontalContentAlignment="Center" Canvas.Left="592" Canvas.Top="355" Width="128" IsReadOnly="True"/>

            <Image x:Name="image1" Height="44" Canvas.Left="504" Canvas.Top="337" Width="51" Source="Imagenes/Mail-Send.png" MouseDown="enviar" Visibility="Hidden"/>

            <Image x:Name="image2" Height="44" Canvas.Left="225" Canvas.Top="337" Width="51" Source="Imagenes/User-Add.png"/>

            <Image x:Name="image3" Height="44" Canvas.Left="169" Canvas.Top="337" Width="51" Source="Imagenes/Recycle-Bin.png" MouseDown="cancelar"/>

            <Image x:Name="image5" Height="44" Canvas.Left="443" Canvas.Top="337" Width="51" Source="Imagenes/Lock.png"/>

            <Image x:Name="image4" Height="44" Canvas.Left="443" Canvas.Top="337" Width="51" Source="Imagenes/Lock-Open.png"/>

        </Canvas>

    </ContentControl>

Example

Answer 1

Animations in WPF are quite tricky to pull of. I've made a fade animation a while back and it was quite a lot of work. Such a slide animation would require a lot of code and debugging to get it right. My recommendation is use a free slide animation library, and if you are feeling up to the task, you might be able to get a hold of some source code that you can use for inspiration if you want.

Answer 2

You didn't place any content inside the transitioning content control. Try this:

<Grid>
   <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="238,89,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
   <Controls:TransitioningContentControl x:Name="transitioning" Transition="Down">
      <StackPanel>
         <TextBox x:Name="textBox1" HorizontalAlignment="Left" Height="95" Margin="345,51,0,0" TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" VerticalAlignment="Top" Width="211" Controls:TextBoxHelper.Watermark="Hi Im a watermark" Background="#FF7400FF"/>
         <TextBox x:Name="textBox2" HorizontalAlignment="Left" Height="95" Margin="0,51,0,0" TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" VerticalAlignment="Top" Width="211" Controls:TextBoxHelper.Watermark="Hi im another watermark" Background="#FF7400FF"/>
      </StackPanel>
   </Controls:TransitioningContentControl>
</Grid>

Plus, reading the documentation , you'll see TransitioningContentControl performs the animation when the content changes. So you want to start with empty Transitioning Content Control, and then inside your Button click handler, set TransitioningContentControl Content dynamically to the two textboxes (need to be wrapped inside another control, like StackPanel, because transitioning control can only have a single child content.