Expression Blend, WPF/E and the Torus Trip


So, if you haven’t heard, Expression Interactive Designer has been renamed to Expression Blend and is out in beta.  Check it out!  The new UI is amazing and the power latent in this tool is ripe with possibility. 



Also, WPF/E is finally out in the wild — give those tires a kick for sure


In honor of this all, here is a very simple trippy visualization I did, inspired by Blend, which turned me on to the fact that gradients have property called SpreadMethod with a very funky possible value of Stretch.  Setting this and playing with the Brush Transform tool in Blend revealed to me the RelativeTransform that hangs off brushes,  which can be animated. (I had to hand tweak some XAML to animate this transform.)  The result may be considered either zenith or nadir inducing: you make the call.  Try it here or click on the screenshot below.  XAML posted below.



<Page
 xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
 xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
 >
  <Page.Resources>
    <Storyboard x:Key=”OnLoaded1″>
      <DoubleAnimation From=”2″ To=”.009″ AutoReverse=”True” DecelerationRatio=”1″  RepeatBehavior=”Forever” Duration=”00:00:7″ Storyboard.TargetName=”scaleTransform” Storyboard.TargetProperty=”(ScaleTransform.ScaleX)”>
      </DoubleAnimation>
      <DoubleAnimation From=”2″ To=”.009″ AutoReverse=”True”  DecelerationRatio=”1″ RepeatBehavior=”Forever” Duration=”00:00:7″ Storyboard.TargetName=”scaleTransform” Storyboard.TargetProperty=”(ScaleTransform.ScaleY)”>
      </DoubleAnimation>
    </Storyboard>
  </Page.Resources>
  <Page.Triggers>
    <EventTrigger RoutedEvent=”FrameworkElement.Loaded”>
      <BeginStoryboard Storyboard=”{StaticResource OnLoaded1}”/>
    </EventTrigger>
  </Page.Triggers>
  <Ellipse x:Name=”ellipse” Stroke=”#FF000000″ Width=”{Binding Path=ActualWidth, ElementName=LayoutRoot, Mode=Default}” Height=”{Binding Path=ActualHeight, ElementName=LayoutRoot, Mode=Default}”  RenderTransformOrigin=”0.5,0.5″>
    <Ellipse.Fill>
      <RadialGradientBrush SpreadMethod=”Repeat”>
        <RadialGradientBrush.RelativeTransform>
          <ScaleTransform  x:Name=”scaleTransform” CenterX=”0.5″ CenterY=”0.5″ ScaleX=”2″ ScaleY=”2″/>
        </RadialGradientBrush.RelativeTransform>
        <GradientStop Color=”#FFFFFFFF” Offset=”0.865″/>
        <GradientStop Color=”#FF000000″ Offset=”1″/>
        <GradientStop Color=”#FF000000″ Offset=”0.654″/>
        <GradientStop Color=”#FFD0D0D0″ Offset=”0.058″/>
      </RadialGradientBrush>
    </Ellipse.Fill>
    <Ellipse.RenderTransform>
      <ScaleTransform ScaleX=”2″ ScaleY=”2″/>
    </Ellipse.RenderTransform>
  </Ellipse>
</Page>


 


 

Comments (2)

  1. rabidrobot says:

    Cool animation!  Might be fun to play with the Gradient Options Pad, Reflect, and Repeat with this.

  2. rabidrobot says:

    oops, I see it in there now as SpreadMethod="Repeat".  Changing this to Reflect in XAMLPad or XAML Cruncher also results in visually interesting animation.  Fun stuff.

Skip to main content