The Sandbox Thread

7 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

SlideShow (Avalon, WinFS)

Back to Forum: The Sandbox
  • User profile image
    Kazi

    This application shows all your digital photos stored in WinFS. It uses the property animation feature of Avalon for the fade in effect.

    How does it work?

    There is an ImagePipeline object and there are two threads on the two end of the pipeline. The picture producer thread reads the pictures from the WinFS (picture taken time descent order) and puts those onto the pipeline. Its main task is to keep 5 pictures on the pipeline always.

    The consumer thread gets pictures from the pipeline and sends those to the Avalon controls periodically and starts the fade in animation. Its main task is to ensure accurate timing.

    Requirements: WinFX Sept CTP, WinFS Beta 1

    EDIT1:

    Minor changes, fixes.

    EDIT2:

    - Migrated to WinFX Sept CTP
    - Improvements

    EDIT3

    - Button visual style improvements

    EDIT4

    Minor changes:
    - own RoutedEvent defined to start the fade-in animation
    - minimize button has been implemented

  • User profile image
    Kazi

    p.s.: I haven't tested it with less than 5 pictures, sorry, it may not work. I have copied about 5000 pictures to the default winfs store, and it works nicely.

  • User profile image
    Kazi

    What's fixed: the file stream is disposed now.

  • User profile image
    Kazi

    Mainly visual improvements

  • User profile image
    Kazi

    The buttons on the upper right corner have animated visual style now. It's very easy to change the visual style and appearance of an Avalon control by the styling feature.

  • User profile image
    Kazi

    The magic is to use your own RoutedEvent to start an animation in XAML:

    this tag: <?Mapping XmlNamespace="SlideShow" ClrNamespace="SlideShow"?>

    and this attribute: xmlns:ss="SlideShow"

    and then you can use it as:

    <Window.Triggers>
      <EventTrigger RoutedEvent="ss:Window1.ShowImage" SourceName="image1">
    ...

  • 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!

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.