WPF&；C#[Mahapps.Metro]动画控件

我开始学习一点WPF和Mahapps.metro，所以我对它们还很陌生；问题是：

我有一个按钮和两个文本框，当表单加载时，文本框的可见性是隐藏的，因此当用户单击按钮时，文本框的可见性将是可见的，但我希望文本框与Mahapps随MetroWindow提供的表单加载的“幻灯片”动画一起显示

我尝试使用TransitioningContentControl，但无法实现。我非常感谢你的帮助，谢谢

我的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>

编辑：此方法为我提供了解决方案，唯一的区别是我使用的控件是ContentControl而不是StackPanel，这是我的xaml，适用于希望制作类似内容的任何人： 注：标记为回答，谢谢，伙计

 <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>

---

WPF中的动画很难处理。不久前我制作了一个淡入淡出的动画，这是相当多的工作。这样的幻灯片动画需要大量的代码和调试才能正确制作。我的建议是使用一个免费的幻灯片动画库，如果您觉得能够胜任这项任务，您可以获得一些源代码，如果您愿意，您可以使用这些源代码获得灵感。

您没有将任何内容放在转换内容控件中。试试这个：

<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>

---

另外，阅读，您将看到TransitioningContentControl在内容更改时执行动画。因此，您希望从空的转换内容控件开始，然后在按钮单击处理程序中，将转换内容控件内容动态设置为两个文本框（需要包装在另一个控件中，如StackPanel，因为转换控件只能有一个子内容。

显示

XAML