Hi,
I got the meaning of bitsy/bytesy - just wasn't sure which bits of WPF you were talking about. But no - you wouldn't want to write a storyboard by hand - disregarding the sheer amount of typing it would also be pretty much impossible to visualize the end result. I'm sure the code in your example was not obtained that way. FWIW here's a bit of XAML generated by Blend which took about 15 seconds to construct. The result is neither useful nor pretty but shows how much XAML can be involved in something simple:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="UntitledProject1.Window4"
x:Name="Window"
Title="Window4"
Width="640" Height="480" xmlns:Custom="http://schemas.microsoft.com/winfx/2006/xaml/composite-font">
<Window.Resources>
<Storyboard x:Key="Timeline1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(Custom:TransformGroup.Children)[3].(Custom:TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="88"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="136"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="144"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(Custom:TransformGroup.Children)[3].(Custom:TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="40"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="80"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="160"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(Custom:TransformGroup.Children)[2].(Custom:RotateTransform.Angle)">
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="-47.671"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(Panel.Background).(Custom:GradientBrush.GradientStops)[1].(Custom:GradientStop.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FFAFCC37"/>
<SplineColorKeyFrame KeyTime="00:00:01" Value="#FF1E2DD8"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(Custom:TransformGroup.Children)[1].(Custom:SkewTransform.AngleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="15"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(Custom:TransformGroup.Children)[1].(Custom:SkewTransform.AngleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="15"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
</EventTrigger>
</Window.Triggers>
<Grid x:Name="LayoutRoot">
<Button RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Margin="40,40,0,0" x:Name="button" VerticalAlignment="Top" Width="120" Height="40" Content="Button">
<Button.RenderTransform>
<Custom:TransformGroup>
<Custom:ScaleTransform ScaleX="1" ScaleY="1"/>
<Custom:SkewTransform AngleX="0" AngleY="0"/>
<Custom:RotateTransform Angle="0"/>
<Custom:TranslateTransform X="0" Y="0"/>
</Custom:TransformGroup>
</Button.RenderTransform>
<Button.Background>
<Custom:LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<Custom:GradientStop Color="#FFFFFFFF" Offset="0"/>
<Custom:GradientStop Color="#FFAFCC37" Offset="0.9"/>
</Custom:LinearGradientBrush>
</Button.Background>
</Button>
</Grid>
</Window>>"bitsy/bytesy" = a carryover from mainframes days meaning many lines of detailed code to accomplish something you can say in a few words
>
>For example:
>The code below rotates a button while stretching it.
>That's a lot of detailed coding!
>I realize that with styles and templates you can reuse that code, but that's what I meant by "bitsy/bytesy"
>I guess I expected some higher levels tools in the language, but as you suggest most designers are using another tool like Expression Blend and that makes a lot of sense.
>
>
>
>
> <Button Name="visual" HorizontalAlignment="Center" VerticalAlignment="Center">
> <Button.Content>Test</Button.Content>
> <Button.Triggers>
> <EventTrigger RoutedEvent="Button.Click">
> <BeginStoryboard>
> <Storyboard RepeatBehavior="Forever">
> <DoubleAnimation Storyboard.TargetName="rectangle"
> Storyboard.TargetProperty="RenderTransform.Children[0].AngleY"
> To="180" Duration="0:0:15" AutoReverse="True"></DoubleAnimation>
> <DoubleAnimation Storyboard.TargetName="rectangle"
> Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
> To="180" Duration="0:0:20" AutoReverse="True"></DoubleAnimation>
> <DoubleAnimation Storyboard.TargetName="rectangle"
> Storyboard.TargetProperty="Opacity"
> To="0.1" Duration="0:0:4" AutoReverse="True"></DoubleAnimation>
> </Storyboard>
> </BeginStoryboard>
> </EventTrigger>
> </Button.Triggers>
> </Button>
>
> <Rectangle Grid.Row="1" Name="rectangle" Width="100" Stretch="Uniform" ClipToBounds="False" RenderTransformOrigin="0.5,0.5">
> <Rectangle.Fill>
> <VisualBrush Visual="{Binding ElementName=visual}">
>
> </VisualBrush>
> </Rectangle.Fill>
> <Rectangle.RenderTransform>
>
> <TransformGroup>
> <SkewTransform CenterX="0.5"></SkewTransform>
> <RotateTransform CenterX="0.5" CenterY="0.5"></RotateTransform>
> </TransformGroup>
>
> </Rectangle.RenderTransform>
> </Rectangle>
>
