WPF и Blend: окно изменения размера не работает

Question

Я установил раскадровку для увеличения и сжатия окна. Они отлично работают в редакторе Blend, но при фактическом запуске они просто не работают вообще.

Окно должно расширяться/сжиматься с той же скоростью по горизонтали, что и вертикально.

В чем причина?

Вот мой XAML.

<Window x:Name="window" x:Class="MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="32" Width="32" ResizeMode="NoResize" WindowStyle="None"> 
    <Window.Resources> 
     <Storyboard x:Key="GrowFrame"> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="window"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="32"/> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="256"> 
        <EasingDoubleKeyFrame.EasingFunction> 
         <BackEase EasingMode="EaseOut" Amplitude="0.25"/> 
        </EasingDoubleKeyFrame.EasingFunction> 
       </EasingDoubleKeyFrame> 
      </DoubleAnimationUsingKeyFrames> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="window"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="32"/> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="256"> 
        <EasingDoubleKeyFrame.EasingFunction> 
         <BackEase EasingMode="EaseOut" Amplitude="0.25"/> 
        </EasingDoubleKeyFrame.EasingFunction> 
       </EasingDoubleKeyFrame> 
      </DoubleAnimationUsingKeyFrames> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="window"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="0.5"/> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"> 
        <EasingDoubleKeyFrame.EasingFunction> 
         <BackEase EasingMode="EaseOut" Amplitude="0.25"/> 
        </EasingDoubleKeyFrame.EasingFunction> 
       </EasingDoubleKeyFrame> 
      </DoubleAnimationUsingKeyFrames> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="window"> 
       <EasingColorKeyFrame KeyTime="0" Value="Transparent"/> 
       <EasingColorKeyFrame KeyTime="0:0:0.5" Value="White"> 
        <EasingColorKeyFrame.EasingFunction> 
         <BackEase EasingMode="EaseOut"/> 
        </EasingColorKeyFrame.EasingFunction> 
       </EasingColorKeyFrame> 
      </ColorAnimationUsingKeyFrames> 
     </Storyboard> 
     <Storyboard x:Key="ShrinkFrame"> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="window"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="256"/> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="32"> 
        <EasingDoubleKeyFrame.EasingFunction> 
         <CubicEase EasingMode="EaseInOut"/> 
        </EasingDoubleKeyFrame.EasingFunction> 
       </EasingDoubleKeyFrame> 
      </DoubleAnimationUsingKeyFrames> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="window"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="256"/> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="32"> 
        <EasingDoubleKeyFrame.EasingFunction> 
         <CubicEase EasingMode="EaseInOut"/> 
        </EasingDoubleKeyFrame.EasingFunction> 
       </EasingDoubleKeyFrame> 
      </DoubleAnimationUsingKeyFrames> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="window"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.5"> 
        <EasingDoubleKeyFrame.EasingFunction> 
         <CubicEase EasingMode="EaseInOut"/> 
        </EasingDoubleKeyFrame.EasingFunction> 
       </EasingDoubleKeyFrame> 
      </DoubleAnimationUsingKeyFrames> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="window"> 
       <EasingColorKeyFrame KeyTime="0" Value="White"/> 
       <EasingColorKeyFrame KeyTime="0:0:0.5" Value="Transparent"> 
        <EasingColorKeyFrame.EasingFunction> 
         <CubicEase EasingMode="EaseInOut"/> 
        </EasingColorKeyFrame.EasingFunction> 
       </EasingColorKeyFrame> 
      </ColorAnimationUsingKeyFrames> 
     </Storyboard> 
    </Window.Resources> 
    <Window.Triggers> 
     <EventTrigger RoutedEvent="Mouse.MouseEnter"> 
      <BeginStoryboard Storyboard="{StaticResource GrowFrame}"/> 
     </EventTrigger> 
     <EventTrigger RoutedEvent="Mouse.MouseLeave"> 
      <BeginStoryboard x:Name="ShrinkFrame_BeginStoryboard" Storyboard="{StaticResource ShrinkFrame}"/> 
     </EventTrigger> 
    </Window.Triggers> 
</Window> 

Answer 1

Как указывали другие, в новых выпусках фреймов есть ошибка, которая предотвращает синхронную анимацию. Тем не менее, вот небольшое небольшое решение, которое очень хорошо работает для меня. Это не просто, поэтому я не думаю, что в порядке есть какое-либо объяснение. Она работает, и это все, что имеет значение:

XAML:

<Window x:Class="App.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="32" Width="32" ResizeMode="NoResize" WindowStyle="None" 
    MouseEnter="MouseEntered" MouseLeave="MouseLeft"> 
</Window> 

Code-Behind:

using System.Windows; 
using System.Windows.Input; 

namespace App 
{ 
    public partial class MainWindow : Window 
    { 
     private const int MAX_WINDOW_SIZE = 256; 
     private const int MIN_WINDOW_SIZE = 32; 
     private const int ANIMATION_SPEED = 10; 

     public MainWindow() 
     { 
      InitializeComponent(); 
     } 

     private void MouseEntered(object sender, MouseEventArgs e) 
     { 
      while (this.Width <= MAX_WINDOW_SIZE) 
      { 
       this.Width += ANIMATION_SPEED; 
       this.Height += ANIMATION_SPEED; 
      } 
     } 

     private void MouseLeft(object sender, MouseEventArgs e) 
     { 
      while (this.Width >= MIN_WINDOW_SIZE) 
      { 
       this.Width -= ANIMATION_SPEED; 
       this.Height -= ANIMATION_SPEED; 
      } 
     } 
    } 
} 

Answer 2

WPF поддерживает оба синхронизированных анимации (как вы пытались) и перекрытие анимации, где вы поставляете HandoffBehavior. Вы можете попробовать это, чтобы увидеть, работает ли это как обходной путь. Однако я думаю, что это известная ошибка (https://connect.microsoft.com/VisualStudio/feedback/details/715415/window-width-height-animation-in-wpf-got-broken-on-net-framework-4-0). Я в шоке, пока это не исправлено.

Answer 3

Или просто использовать фиксированный размерный прозрачное окно в качестве обходного пути:

<Window x:Name="window" x:Class="RectangleWindow" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      Title="RectangleWindow" Height="300" Width="300" ResizeMode="NoResize" WindowStyle="None" 
      Background="Transparent" AllowsTransparency="True"> 
     <Window.Resources> 
      <Storyboard x:Key="GrowFrame"> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="insideRectangle"> 
        <EasingDoubleKeyFrame KeyTime="0" Value="32"/> 
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="256"> 
         <EasingDoubleKeyFrame.EasingFunction> 
          <BackEase EasingMode="EaseOut" Amplitude="0.25"/> 
         </EasingDoubleKeyFrame.EasingFunction> 
        </EasingDoubleKeyFrame> 
       </DoubleAnimationUsingKeyFrames> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="insideRectangle"> 
        <EasingDoubleKeyFrame KeyTime="0" Value="32"/> 
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="256"> 
         <EasingDoubleKeyFrame.EasingFunction> 
          <BackEase EasingMode="EaseOut" Amplitude="0.25"/> 
         </EasingDoubleKeyFrame.EasingFunction> 
        </EasingDoubleKeyFrame> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
      <Storyboard x:Key="ShrinkFrame"> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="insideRectangle"> 
        <EasingDoubleKeyFrame KeyTime="0" Value="256"/> 
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="32"> 
         <EasingDoubleKeyFrame.EasingFunction> 
          <CubicEase EasingMode="EaseInOut"/> 
         </EasingDoubleKeyFrame.EasingFunction> 
        </EasingDoubleKeyFrame> 
       </DoubleAnimationUsingKeyFrames> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="insideRectangle"> 
        <EasingDoubleKeyFrame KeyTime="0" Value="256"/> 
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="32"> 
         <EasingDoubleKeyFrame.EasingFunction> 
          <CubicEase EasingMode="EaseInOut"/> 
         </EasingDoubleKeyFrame.EasingFunction> 
        </EasingDoubleKeyFrame> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
     </Window.Resources> 
     <Window.Triggers> 
      <EventTrigger RoutedEvent="Mouse.MouseEnter"> 
       <BeginStoryboard Storyboard="{StaticResource GrowFrame}"/> 
      </EventTrigger> 
      <EventTrigger RoutedEvent="Mouse.MouseLeave"> 
       <BeginStoryboard x:Name="ShrinkFrame_BeginStoryboard" Storyboard="{StaticResource ShrinkFrame}"/> 
      </EventTrigger> 
     </Window.Triggers> 

     <Rectangle x:Name="insideRectangle" Fill="White" 
      Width="50" Height="50" 
      HorizontalAlignment="Left" 
      VerticalAlignment="Top"> 
      <Rectangle.BitmapEffect> 
       <DropShadowBitmapEffect/> 
      </Rectangle.BitmapEffect>  
     </Rectangle> 
    </Window>