Windows 8과 유사한 알림 창이 있습니다.

Question

Windows 8과 비슷한 알림 창을 원하는 경우 옆에서 다트 아웃하는 방법을 원합니다. 그러나 나는 이것을 구현하려고 시도했으나 두께 애니메이션이 작동하지 않는 것 같습니다.

<Window x:Class="URM.Views.DesktopAlert" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="DesktopAlert" Height="184" Width="404" AllowsTransparency="True" WindowStyle="None" Background="Transparent" ShowActivated="False" Loaded="Window_Loaded"> 
    <Grid > 

     <!-- Notification area --> 
     <Border BorderThickness="1" Background="#FFF0F0F0" BorderBrush="Transparent" CornerRadius="0"> 
      <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="144" Width="385"> 
       <Rectangle Fill="#FF5C5C5C" Height="25" HorizontalAlignment="Left" Margin="0,29,0,0" Name="rectangle6" Stroke="{x:Null}" VerticalAlignment="Top" Width="382" /> 
       <TextBlock FontFamily="Franklin Gothic Book" FontSize="17" Foreground="#FFF0F0F0" Height="23" HorizontalAlignment="Right" Margin="0,30,10,0" Name="textBlock2" Text="{Binding NewAlert.AlertHeader}" VerticalAlignment="Top" Width="333" TextAlignment="Right" /> 
       <TextBlock FontFamily="Franklin Gothic Book" FontSize="17" Foreground="#FF5C5C5C" Height="57" HorizontalAlignment="Right" Margin="0,56,7,0" Name="textBlock1" Text="{Binding NewAlertText}" TextAlignment="Left" VerticalAlignment="Top" Width="376" TextWrapping="Wrap" /> 
       <Button Content="X" Height="24" HorizontalAlignment="Left" Margin="365,-2,0,0" Name="button1" VerticalAlignment="Top" Width="14" Foreground="#FF5C5C5C" Background="{x:Null}" BorderBrush="#FFF0F0F0" BorderThickness="0" Click="button1_Click" FontSize="14" FontWeight="SemiBold" /> 
       <TextBlock Height="18" HorizontalAlignment="Left" Margin="0,8,0,0" Name="textBlock3" Text="ULTRA ROUTE MANAGEMENT" VerticalAlignment="Top" Foreground="#FF5C5C5C" /> 
       <TextBlock Height="23" HorizontalAlignment="Left" Margin="195,121,0,0" Name="textBlock4" Visibility="Collapsed" Text="{Binding NewAlert.AlertLinkId}" VerticalAlignment="Top" Width="163" Foreground="#FF5C5C5C" FontSize="18"><TextBlock.TextDecorations><TextDecoration Location="Underline" /></TextBlock.TextDecorations></TextBlock> 
       <Button Height="30" Content="{Binding NewAlert.AlertLinkId}" HorizontalAlignment="Left" Margin="182,113,0,0" Name="button2" VerticalAlignment="Top" Width="186" FontSize="18" BorderBrush="{x:Null}" Background="{x:Null}" Click="button2_Click" /> 
      </Grid> 
     </Border> 

     <!-- Animation --> 
     <Grid.Triggers> 
      <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
       <BeginStoryboard> 
        <Storyboard> 
         <ThicknessAnimation Storyboard.TargetProperty="(Grid.Margin)" Duration="0:0:20" From="1900,200,0,0" To="1400,200,0,0"/> 
         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Completed="DoubleAnimationUsingKeyFrames_Completed"> 
          <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/> 
          <SplineDoubleKeyFrame KeyTime="0:0:15" Value="0"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Grid.Triggers> 



    </Grid> 
</Window> 

내가 뭘 잘못하고 있니? 두께 애니메이션이 효과가없는 이유는 모르겠다.

Answer 1

애니메이션 값이 올바르지 않습니다. 나는 다음 코드로 시도했다

<Grid.Triggers> 
      <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
       <BeginStoryboard> 
        <Storyboard> 
         <ThicknessAnimation Storyboard.TargetProperty="(Grid.Margin)" Duration="0:0:20" From="518,3,-518,-3" To="0"/> 
         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" > 
          <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/> 
          <SplineDoubleKeyFrame KeyTime="0:0:15" Value="0"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
      </Grid.Triggers> 

그것은 나를 위해 잘 작동한다. 디자인보기에서 그리드를 창 밖으로 드래그하면 그리드의 여백에서 업데이트 된 올바른 시작 값을 얻을 수 있습니다.