The Sandbox Post

Single Post Permalink

View Thread: SlideShow (Avalon, WinFS)
  • User profile image
    Kazi

    Here is an interesting sample of the animation feature, copy/paste it to the XAMLPad:
    -------------------------
    <Page
        xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
        xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
        >

      <DockPanel>
        <Grid DockPanel.Dock="Left" Margin="10">
          <ColumnDefinition/>
          <ColumnDefinition/>
          <RowDefinition Height="50"/>
          <RowDefinition Height="50"/>
          <Button x:Name="button1" Grid.Column="0" Grid.Row="0" Width="50" Height="50">1</Button>
          <Button x:Name="button2" Grid.Column="1" Grid.Row="0" Width="50" Height="50">2</Button>
          <Button x:Name="button3" Grid.Column="0" Grid.Row="1" Width="50" Height="50">3</Button>
          <Button x:Name="button4" Grid.Column="1" Grid.Row="1" Width="50" Height="50">4</Button>
        </Grid>

        <Viewbox>
          <Canvas Width="100" Height="100" Background="VerticalGradient LightCyan LightBlue">
            <Ellipse x:Name="ellipse" Canvas.Left="40" Canvas.Top="40" Stroke="Blue" StrokeThickness="1" Width="20" Height="20"/>
          </Canvas>
        </Viewbox>

      </DockPanel>

      <Page.Triggers>

        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button1">
          <EventTrigger.Actions>
            <BeginStoryboard Name="sb1">
              <Storyboard TargetName="ellipse">
                <ParallelTimeline>
                  <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" To="05.0" Duration="0:0:5" />
                  <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" To="05.0" Duration="0:0:5" />
                </ParallelTimeline>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>

        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button2">
          <EventTrigger.Actions>
            <BeginStoryboard Name="sb2">
              <Storyboard TargetName="ellipse">
                <ParallelTimeline>
                  <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" To="75.0" Duration="0:0:5" />
                  <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" To="05.0" Duration="0:0:5" />
                </ParallelTimeline>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>

        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button3">
          <EventTrigger.Actions>
            <BeginStoryboard Name="sb3">
              <Storyboard TargetName="ellipse">
                <ParallelTimeline>
                  <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" To="05.0" Duration="0:0:5" />
                  <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" To="75.0" Duration="0:0:5" />
                </ParallelTimeline>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>

        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button4">
          <EventTrigger.Actions>
            <BeginStoryboard Name="sb4">
              <Storyboard TargetName="ellipse">
                <ParallelTimeline>
                  <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" To="75.0" Duration="0:0:5" />
                  <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" To="75.0" Duration="0:0:5" />
                </ParallelTimeline>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>

      </Page.Triggers>

    </Page>

    -------------------------

    Click on the buttons at random!