Sdílet prostřednictvím

Jak na to: Animovat vyskakovací okno

  • Článek

Tento příklad ukazuje dva způsoby animace Popup ovládacího prvku.

Příklad

Následující příklad nastaví vlastnost PopupAnimation na hodnotu Slide, což způsobí přisunutí Popup při jeho zobrazení.

Chcete-li otočit Popup, tento příklad přiřadí RotateTransform k vlastnosti RenderTransform na Canvas, což je podřízený prvek Popup.

Aby transformace fungovala správně, musí příklad nastavit vlastnost AllowsTransparency na true. Kromě toho musí Margin na obsahu Canvas zajistit dostatek prostoru pro otočení Popup.

<Popup IsOpen="{Binding ElementName=myCheckBox,Path=IsChecked}" 
       PlacementTarget="{Binding ElementName=myCheckBox}"            
       AllowsTransparency="True"
       PopupAnimation="Slide"
       HorizontalOffset="50"
       VerticalOffset="50"
       >
  <!--The Margin set on the Canvas provides the additional 
      area around the Popup so that the Popup is visible when 
      it rotates.-->
  <Canvas Width="100" Height="100" Background="DarkBlue"
          Margin="150">
    <Canvas.RenderTransform>
      <RotateTransform x:Name="theTransform" />
    </Canvas.RenderTransform>
    <TextBlock TextWrapping="Wrap" Foreground="White">
      Rotating Popup
    </TextBlock>
  </Canvas>
</Popup>

Následující příklad ukazuje, jak událost Click, ke které dochází při kliknutí na Button, aktivuje Storyboard, která animaci spustí.

<Button HorizontalAlignment="Left" Width="200" Margin="20,10,0,0">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="theTransform"
            Storyboard.TargetProperty="(RotateTransform.Angle)" 
            From="0" To="360" Duration="0:0:5" AutoReverse="True"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
  Click to see the Popup animate
</Button>

Viz také