2017-06-14 43 views
0

我開始學習一點WPF和Mahapps.metro,所以我對這些很新,這裏的問題:WPF&C#[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> 

Example

+0

顯示你的'XAML' – Peter

回答

0

您沒有在轉換內容控件中放置任何內容。試試這個:

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

另外,閱讀documentation,你會看到TransitioningContentControl進行動畫的內容發生變化時。因此,您想從空的Transitioning Content Control開始,然後在Button單擊處理程序中,將TransitioningContentControl Content動態設置爲兩個文本框(需要在另一個控件(如StackPanel)中打包,因爲轉換控件只能有一個子內容。

0

動畫在WPF是相當棘手的拉動。我已經做了一個淡入淡出的動畫,這是相當多的工作。這樣的幻燈片動畫需要大量的代碼和調試才能做到。我的建議是使用一個免費的幻燈片動畫庫,如果你對這項任務感到滿意,那麼如果你願意的話,你可能會得到一些源代碼,你可以用它來獲取靈感。