动画矩形移动到窗口WPF

我想动画一个曲线矩形，我必须将其从外部移动到实际的Window组件中，并且最好像它刚刚出现在屏幕上一样。到目前为止，我已经看到了在窗口内部的画布中滚动动画的建议。我不知道我是否真的可以让Canvas超出实际窗口。我是不是该？那里有更好的想法吗？动画矩形移动到窗口WPF

这是我的XAML，它的代码隐藏到目前为止。

UserMenu.xaml：

<Window x:Class="ChatClient.UserMenu" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="UserMenu" Height="350" Width="525" Icon="media/favicon.gif" Background="#FF3C3636" Foreground="{x:Null}"> 
    <Window.BorderBrush> 
     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
      <GradientStop Color="Black" Offset="0"/> 
      <GradientStop Color="#FF6F6D95" Offset="1"/> 
     </LinearGradientBrush> 
    </Window.BorderBrush> 
    <Grid x:Name="GridBody"> 
     <Canvas Name="WindowMainCanvas"> 
      <Rectangle x:Name="Menu" Fill="#755E5E83" HorizontalAlignment="Left" Height="273" Stroke="Black" VerticalAlignment="Top" Width="446" RadiusY="27.5" RadiusX="27.5" Canvas.Left="545" Canvas.Top="23"/> 
      <Button x:Name="ChatClientOnlyButton" Content="Chat (Clients Only)" HorizontalAlignment="Left" Height="80" Margin="132,65,0,0" Style="{DynamicResource OTonButtonStyle1}" VerticalAlignment="Top" Width="259" FontFamily="Impact" FontSize="26.667" Foreground="#FF1C045B" Click="chatClientsOnlyOption" Visibility="Hidden"/> 
      <TextBlock x:Name="MenuLabel" HorizontalAlignment="Left" Height="25" Margin="231,35,0,0" TextWrapping="Wrap" Text="Menu" VerticalAlignment="Top" Width="101" FontFamily="Copperplate Gothic Light" FontSize="20" Visibility="Hidden"> 
       <TextBlock.Foreground> 
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
         <GradientStop Color="#FF0A1D5F" Offset="0.374"/> 
         <GradientStop Color="#FF6E7FB9" Offset="1"/> 
        </LinearGradientBrush> 
       </TextBlock.Foreground> 
      </TextBlock> 
      <Canvas ClipToBounds="True" Name="errorCanvas" Width="446" Height="17" Margin="36,152,35,151"> 
       <Rectangle x:Name="errorMarquee" Fill="#FF0A0A0C" HorizontalAlignment="Left" Height="17" Stroke="#FF5B1D1D" VerticalAlignment="Top" Width="446" Canvas.Left="-1" Visibility="Hidden"/> 
       <TextBlock x:Name="errorText" HorizontalAlignment="Left" Height="16" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="690" FontFamily="Copperplate Gothic Bold" FontSize="16" Foreground="#FF7E0202" Visibility="Hidden"/> 
      </Canvas> 
     </Canvas> 
    </Grid> 
</Window>

UserMenu.xaml.cs：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Data; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Media.Imaging; 
using System.Windows.Shapes; 

namespace ChatClient 
{ 
    /// <summary> 
    /// Interaction logic for UserMenu.xaml 
    /// </summary> 
    public partial class UserMenu : Window 
    { 
     public UserMenu() 
     { 
      InitializeComponent(); 
      DoubleAnimation menuSlideInAnimation = new DoubleAnimation(); 
      menuSlideInAnimation.From = Menu.Margin.Left; 
      menuSlideInAnimation.To = 35; 

      menuSlideInAnimation.Completed += (s, doneEvent) => 
      { 
       //consider additional triggers 
      }; 
      menuSlideInAnimation.Duration = new Duration(TimeSpan.FromSeconds(7.0)); 
      errorText.BeginAnimation(Rectangle.MarginProperty, menuSlideInAnimation, HandoffBehavior.Compose); 
     } 

     private void chatClientsOnlyOption(object sender, RoutedEventArgs e) 
     { 
      MessageBox.Show("Not available just yet!"); 
     } 
    } 
}

任何想法？

来源

2015-11-24 Kieran Ojakangas

哇，让我救你一些这种矫枉过正的东西。 [这]（http://stackoverflow.com/questions/22817854/xaml-grid-visibility-transition/22819145#22819145）答案是为Silverlight，但在这种情况下它基本上是相同的东西。尽管如果你想要水平而不是垂直，你可以改变X的Y值。 –

甜！我只是用Blend做了一些类似的代码。很高兴知道。谢谢！ –

很高兴帮助KC'er的朋友 –

这样做很复杂，但你可以这样做。

结束语要在边境控制，以动画的矩形，并渲染它的内容图像。
创建一个边界的透明弹出你的窗口
外动画弹出
关闭弹出窗口时的动画完成内的矩形图像。

这里是接受边境管制类动画：

public class SlideInPopup 
{ 
    private Popup _popup; 

    public SlideInPopup() 
    { 

    } 

    public void SlideIn(Window parent, int heightOffset, Border animateControl, Duration duration) 
    { 
     if ((animateControl != null) && (parent != null)) 
     { 
      int controlHeight = (int)animateControl.ActualHeight; 
      int controlWidth = (int)animateControl.ActualWidth;     

      _popup = new Popup(); 

      double height = parent.Height; 
      double widthOffset = parent.Width; 
      double width = parent.Width * 2; 

      var fromMargin = new Thickness(animateControl.Margin.Left + widthOffset, 
               animateControl.Margin.Top, 
               animateControl.Margin.Right, 
               animateControl.Margin.Bottom); 

      var toMargin = animateControl.Margin; 


      Image animateImage = new Image();  
      animateImage.Name = "imgAnimate"; 
      animateImage.Margin = fromMargin; 
      animateImage.Height = controlHeight; 
      animateImage.Width = controlWidth; 
      animateImage.HorizontalAlignment = HorizontalAlignment.Left; 
      animateImage.VerticalAlignment = VerticalAlignment.Top; 
      animateImage.Source = CaptureScreen(animateControl, controlWidth, controlHeight); 

      animateControl.Visibility = Visibility.Collapsed; 
      animateControl.Height = 0; 

      Grid child = new Grid(); 
      child.Height = height; 
      child.Width = width; 
      child.Background = Brushes.Transparent; 
      child.Children.Add(animateImage); 

      var storyboard = new Storyboard(); 
      ThicknessAnimation animation = new ThicknessAnimation(fromMargin, toMargin, duration); 
      animation.AccelerationRatio = 0.8; 

      storyboard.Children.Add(animation); 

      storyboard.Completed += (s, doneEvent) => 
      { 
       _popup.IsOpen = false; 
       animateControl.Visibility = Visibility.Visible; 
       animateControl.Height = controlHeight; 
      }; 

      Storyboard.SetTarget(animation, animateImage); 
      Storyboard.SetTargetProperty(animation, new PropertyPath("(Margin)")); 

      _popup.Height = height; 
      _popup.Width = width; 
      _popup.HorizontalOffset = parent.Left; 
      _popup.VerticalOffset = parent.Top + heightOffset; 
      _popup.AllowsTransparency = true; 
      _popup.Child = child; 
      _popup.IsOpen = true; 

      child.Resources.Add("sbSlideIn", storyboard); 

      storyboard.Begin(); 
     }    
    } 

    private static BitmapSource CaptureScreen(Visual target, double dpiX, double dpiY) 
    { 
     if (target == null) 
     { 
      return null; 
     } 
     Rect bounds = VisualTreeHelper.GetDescendantBounds(target); 
     RenderTargetBitmap rtb = new RenderTargetBitmap((int)(bounds.Width * dpiX/96.0), 
                 (int)(bounds.Height * dpiY/96.0), 
                 dpiX, 
                 dpiY, 
                 PixelFormats.Pbgra32); 
     DrawingVisual dv = new DrawingVisual(); 
     using (DrawingContext ctx = dv.RenderOpen()) 
     { 
      VisualBrush vb = new VisualBrush(target); 
      ctx.DrawRectangle(vb, null, new Rect(new Point(), bounds.Size)); 
     } 
     rtb.Render(dv); 
     return rtb; 
    } 
}

然后在你的主窗口的XAML你可以用一个边境管制包装你的矩形，并同时删除画布定位属性

<Border x:Name="borderRect" Margin="35,23,0,0"> 
    <Rectangle x:Name="Menu" Fill="#755E5E83" HorizontalAlignment="Left" Height="273" Stroke="Black" VerticalAlignment="Top" Width="446" RadiusY="27.5" RadiusX="27.5"/ > 
</Border>

然后，您可以使用此代码启动动画：

来源

2015-11-24 22:38:26 Ehz

Phew！虽然我很欣赏这个答案，但它非常复杂。不过谢谢。我想我会按照第一个建议去做。 –

动画矩形移动到窗口WPF

回答

相关问题