WPF和C＃[Mahapps.Metro]動畫控件

Question

我開始學習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供任何想要做這樣的事情的人：PS：標記為答案，謝謝。

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

例

Answer 1

WPF中的動畫很難提取。 前一段時間我制作了一個淡入淡出的動畫，這是很多工作。 這樣的幻燈片動畫需要大量代碼和調試才能正確完成。 我的建議是使用免費的幻燈片動畫庫，如果您願意完成任務，則可以掌握一些可用於啟發的源代碼。

Answer 2

您沒有在過渡內容控件中放置任何內容。 嘗試這個：

<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在內容更改時執行動畫。 因此，您要從空的Transitioning Content Control開始，然后在Button單擊處理程序內，將TransitioningContentControl Content動態設置為兩個文本框（需要包裝在另一個控件（如StackPanel）內，因為過渡控件只能具有單個子內容。