Blobbying #1 - Introducing Blob the Builder
Do you remember long time ago when you (or someone else) used to play with small and cute snails, dirt, and sticky, slimy things?
The blobs are here again!
Remember your most precious childhood memories (where applicable) with this short blobbyfying experience.
Above is what we are going to do. I tried to pick up nice names for each of the blobs.
I like the Ema blob most thus Ema can be clicked and respond to the click.
Now the surprise (???): Each of the blobs is made of just one <Border> tag!!
Can it get easier than this? You weren't surprised, were you?
Here's the code for Ricky:
<Border BorderThickness="10" BorderBrush="Blue" Background="BlanchedAlmond" CornerRadius="100,40,5,15" HorizontalAlignment="Left" Margin="20,33,0,0" Width="103" Height="110" VerticalAlignment="Top">
<Grid>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Ricky</TextBlock>
</Grid>
</Border>
As you can see it's just a border with the CornerRadius set to some values.
If you can't wait to experiment jump to the sample code .
Or you can have more patience and do not rush to brutally modify the blobs.
Let's start with Ema:
<Border Name="Ema" BorderThickness="10,10,10,10" CornerRadius="50,80,30,45" HorizontalAlignment="Left" Margin="84,186,0,0" Width="103" Height="110" VerticalAlignment="Top">
<Border.Background>
<RadialGradientBrush GradientOrigin="0.2, 0.2">
<RadialGradientBrush.GradientStops>
<GradientStop Color="#FFFFFFFF" Offset="0.1" />
<GradientStop Color="#0F0000FF" Offset="1.4" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Border.Background>
<Grid>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Ema"/>
</Grid>
</Border>
Looks like:
How did she become so pretty?
1. Using brushes opacity less than 1 usually looks cool.
2. Radial gradient brushes with GradientOrigin other than center look nice
Agreed?
Now a simple tweak to make her even more beautiful!
Just copy the Background to the BorderBrush:
<Border Name="Ema" BorderThickness="10,10,10,10" CornerRadius="50,80,30,45" HorizontalAlignment="Left" Margin="84,186,0,0" Width="103" Height="110" VerticalAlignment="Top">
<Border.BorderBrush>
<RadialGradientBrush GradientOrigin="0.2, 0.2">
<RadialGradientBrush.GradientStops>
<GradientStop Color="#FFFFFFFF" Offset="0.1" />
<GradientStop Color="#0F0000FF" Offset="1.4" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Border.BorderBrush>
<Border.Background>
<RadialGradientBrush GradientOrigin="0.2, 0.2">
<RadialGradientBrush.GradientStops>
<GradientStop Color="#FFFFFFFF" Offset="0.1" />
<GradientStop Color="#0F0000FF" Offset="1.4" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Border.Background>
<Grid>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Ema"/>
</Grid>
</Border>
And...
Nicely plopped on the form!
Instead of having to copy the brush you could as well try:
BorderBrush="{Binding RelativeSource={RelativeSource Self}, Path=(Control.Background)}"
And see if it works.
Animating Our Blob
Imagine pressing a keyboard key. As my fellow Cider Comrade Richard mentioned: "the light goes to the right and bottom".
This means that we'll animate the white dot in the radial brush (which is the GradientOrigin to go "down and right". We'll move it from 0.2, 0.2 to 0.24, 0.24.
We'll also make the white appear a little smaller by animating the (RadialGradientBrush.GradientStops)[0].(Offset) - that's one of the gradient stops from 0.1 to 0.0.
All of this happens on mouse down ({StaticResource Enblob}), on mouse up we'll do the reverse ({StaticResource Deblob}).
We'll also need to move the "Ema" text to the bottom and right. To make it easier we'll place the text in a ViewBox and move the ViewBox instead. This way we can place anything in the ViewBox and it will be moved automatically.
<Border ...>
...
<Grid>
<Viewbox Stretch="None" Name="Boxy" Margin="0,0,0,0">
<Grid>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Ema"/>
</Grid>
</Viewbox>
</Grid>
</Border>
The ViewBox is moved by animating its Margin property from 0,0,0,0 to 4,4,0,0.
The actual animation code:
Moving the GradientOrigin down and right:
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Ema"
Storyboard.TargetProperty="(Control.Background).(RadialGradientBrush.GradientOrigin)" >
<PointAnimationUsingKeyFrames.KeyFrames>
<PointKeyFrameCollection>
<SplinePointKeyFrame KeySpline="0.5,0.5,0.5,0.5" Value="0.2, 0.2" KeyTime="00:00:00.0000000" />
<SplinePointKeyFrame KeySpline="0.5,0.5,0.5,0.5" Value="0.24, 0.24" KeyTime="00:00:00.1000000" />
</PointKeyFrameCollection>
</PointAnimationUsingKeyFrames.KeyFrames>
</PointAnimationUsingKeyFrames>
Animating the gradient stop to make the white smaller:
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Ema"
Storyboard.TargetProperty="(Control.Background).(RadialGradientBrush.GradientStops)[0].(Offset)" >
<DoubleAnimationUsingKeyFrames.KeyFrames>
<DoubleKeyFrameCollection>
<SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,0.5" Value="0.1" KeyTime="00:00:00.0000000" />
<SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,0.5" Value="0.0" KeyTime="00:00:00.1000000" />
</DoubleKeyFrameCollection>
</DoubleAnimationUsingKeyFrames.KeyFrames>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Moving the container ViewBox by 4, 4 to the down and right:
<ThicknessAnimation Storyboard.TargetName="Boxy"
Storyboard.TargetProperty="(Control.Margin)"
Duration="0:0:0.1" FillBehavior="HoldEnd" From="0,0,0,0" To="4,4,0,0" />
That's how we got the Ema clickability.
The example XAML can be opened in the Cider designer (JuneCTP should do).
Disclaimer: No blobs have been harmed in any way while writing this blog entry. The views expressed here are solely mine and not Microsoft's. The code snippets, blobs and everything is provided "as is". There are no warranties for fitness of the blobs and/or code snippets for particular use. The names used here are not names of actual blobs and/or people. Any resemblance to real life events is a pure coincidence.