Expression Blend, WPF/E and the Torus Trip

Article
12/04/2006

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="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>